- ベストアンサー
ホームページのテンプレートの事で？
自分でホームページのテンプレートを作成したのですが、上手くいきません。 コンテンツが長い場合、左のメニュー部分が途中で切れてしまいます。 ホームページビルダー11で作成したのですが、スタイルシートのどの部分を直せばいいのでしょうか？ 色々試したのですが自分の力では駄目なようです。 よろしくお願いします。
- torasan117
- お礼率48% (44/91)
- ホームページ作成ソフト
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (3)
- tenderfeel
- ベストアンサー率56% (215/379)
メニュー部分を入れている親のDiv（この場合は#box）に メニューと同じ色、幅で縦1pxの画像を背景に指定し（これだと198ｘ1かな?）、縦方向にリピートさせる(repeat-y)のが楽です。 メニューの背景色をなしにしても色は付くし、メニューを縦100%にする手間もありません。 （CSSで縦100%はTableのように指定しただけでは出来ません）
お礼
ご回答ありがとうございました。参考になりました。
- GreenCup
- ベストアンサー率53% (7/13)
はじめまして。 私も回答No.1さんと同様、Tableを使った方がいいんじゃないかなぁと思いますが とりあえず、現状のままで左側が切れないようにするには shop.css を開いて、#left の高さ設定を100%にする（height: 100%）で対応できると思います。
お礼
ご回答ありがとうございました。 試したのですが、ホームページビルダーのページ編集の画面では上手く表示できるのですが、プレヴュー画面では駄目でした。
- qualheart
- ベストアンサー率41% (1451/3486)
DIVで各エリアをくくって高さを合わせるのはちょっと無理があるような気がします。tableで作ったらどうでしょうか？ 以下tableで作った場合のサンプルコードです。 ○tesuto.html <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="description" content="[メタ説明文]" /> <meta name="Keywords" content="[キーワード]" /> <title>[タイトル]</title> <link rel="stylesheet" href="shop.css" type="text/css" /> <link rel="stylesheet" type="text/css" href="tdftad.css" /></head> <body> <strong>[トップ説明文]</strong> <table id="box" cellspacing="0"> <tr> <td colspan="2" id="hed"> <h1>[サイト名見出し１]</h1> </td> <tr> <td id="left" valign="top"> <div id="leftbody"> <p class="index">メニュー</p> <ul> <li><a href="index.html">トップページ</a></li> <li><a href="c-10.html">[メニュー1]</a></li> <li><a href="c-20.html">[メニュー2]</a></li> <li><a href="c-30.html">[メニュー3]</a></li> <li><a href="c-40.html">[メニュー4]</a></li> <li><a href="c-50.html">[メニュー5]</a><br /> </li> </ul> <p class="index">リンク</p> <ul> <li>[ここにリンク]</li> </ul> </div> </td> <td id="main"> <div class="mainbody"> <h2>[見出2]</h2> <div align="left" style="text-align : left;">[コンテンツ]<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> コンテンツが長い場合、左の青い部分が切れてしまいます。スタイルシートのどこを直せばいいでしょうか？<br /> このページはホームページビルダーで作っています。</div> </div> </td> </tr> <tr> <td colspan="2" id="foot"> <div align="center"><a href="index.html"><font color="#ffffff">Copyright（C） [サイト名] All right reserved.</font></a></div> </td> </tr> </table> [アクセス解析]<div class="tdftdiv"><ul class="tdftad"> <li><a href="http://www.samurai-factory.jp/celebrity/programmer/" target="_top">PHPプログラマ求人情報</a></li> <li class="tdftpr"><a href="http://a-hikkoshi.com/" target="_top">引越し</a></li> <li class="tdftpr"><a href="http://ducar.carsensor.net/">中古車ディーラー</a></li> <li class="tdftlink"><a href="http://www.comsort.jp/" target="_top">SEO対策</a><!--33|606--></li> <li class="tdftpr"><a href="http://sf.super-search.jp/keyword/%E7%B5%90%E5%A9%9A">結婚</a></li></ul> </div></body> </html> ○shop.css #left{ width : 198px; background-color : #cacaff; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; height : 100%; } ※「float:left;」を削除 ※「height:100%」に変更
お礼
ご回答ありがとうございました。 テーブルタグはSEO的に良くないらしいのでDIVタグで今回は考えたいと思っています。 でも、わざわざありがとうございました。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
ご回答ありがとうございました。無事解決いたしました。