- ベストアンサー
ボックスの高さを揃える、について
こんばんは。 私は今CSSでHPを作っているのですが、左側にメニュー画像、右側に 内容、といった風にしたいのですが、左側だけに壁紙を貼り付けようと しているのですが、上手く出来ません。 左側のボックスにmin-heightを付けたりしたのですが、それですと右のページの長さが変わると意味が無くなってしまいます・・・。 何処が間違っていましたら、ご指摘お願いします。 HTML部 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="css.css" type="text/css"> <title>あ/title> </head> <body> <div id="wrapper"> <div id="layout"> <div id="side"> <img src="menu.gif" usemap="#map1" alt="menu"> <map name="map1"> (ここは略させて頂きます)</map> </div> <div id="main"> <div class="sample1"> <img src="webtitle2.gif" alt="title"> </div> </div> </div> </div> </body> </html> CSS部 * {margin: 0px; padding: 0px;} #wrapper {padding: 0px;} #layout {width: 850px; background-image: url("sidewall2.gif"); background-repeat: repeat-y; background-attachment: fixed;} #side {float:left; width: 150px; margin-left:0px; margin-top:0px;} #main { float:right; width: 700px;} div.sample1{background-color: transparent; margin:10px; text-align:left; color:#282828; font-size:13px;}
- RiodeJanei
- お礼率29% (48/163)
- HTML
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
これであなたのやりたいことはOKなはずです。 要は、左側のイメージマップをつけたメニュー画像の背景画像が、右側のコンテンツの縦幅にかかわらずずれないように（繰り返されないように）ということだと読みましたがOKですか？。 あちこちいじってますが、ポイントは#layoutにsidewall2.gifに関するスタイルを入れていたのを#sideに替えたという所です。どうでしょう。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- * {margin: 0px; padding: 0px;} #wrapper { padding: 0px; float:left; border-width: 2px; border-style: solid; border-color:blue; } #layout { width: 850px; /*background-image: url("sidewall2.gif"); background-repeat: repeat-y; background-attachment: fixed;*/ float:left; border-width: 2px; border-style: solid; border-color:green; } #side { float:left; width: 150px; margin-left:0px; margin-top:0px; background-image: url("sidewall2.gif"); background-repeat: repeat-y; background-attachment: fixed; /*height:500px;*/ background-color:red; /*border-width: 2px; border-style: solid; border-color:red;*/ } #main { float:right; width: 700px; /*border-width: 2px; border-style: solid; border-color:orange;*/ background-color:orange; } div.sample1{ /*background-color: transparent;*/ margin:10px; /*text-align:left;*/ /*color:#282828;*/ /*font-size:13px;*/ /*border-width: 2px; border-style: solid; border-color:#000000;*/ background-color:yellow; } --> </style> <title>title</title><!--endtag miss--> </head> <body> <div id="wrapper"> #wrapper <div id="layout"> #layout <div id="side"> #side <img src="menu.gif"></div><!--end_side--> <div id="main"> #main <div class="sample1"> .sample1 image </div> </div><!--end_main--> </div><!--end_layout--> </div><!--end＿wrapper--> </body> </html>
その他の回答 (2)
- perlerz10
- ベストアンサー率40% (4/10)
「ボックスの高さ」ではなく、「メニュー画像とその位置」ですね？ で、「揃えたい」というよりも、 要はjavascriptでよくやるように、ページの下部を見ようとスクロールさせても、いつでもメニュー部分が真横にあるというか、スクロール時のブラウザ表示領域の最上部にメニューがまるまる表示されていてほしいと。 こういうことですか。
お礼
わざわざご回答有難う御座います！ 色々やってみた所、自分の納得する形が出来ました。
- leap_day
- ベストアンサー率60% (338/561)
こんにちは 領域が多すぎるので情報を整理したいのですが・・・ ＞領域について wrapper → (ページ)全体領域 layout → 表示するコンテンツ領域 side → クリッカブルマップ(？)領域 main → テキスト領域の為の下準備領域(？) sample1 → 実際のテキスト領域 ＞背景画像について 上記で言うところのコンテンツ領域(layout)の背景画像 ＞高さを揃えるについて 今現在(僕の環境では) ┌┐ └┼┐ └┘ こんな感じでsideとmainが配置されてますが ┌┐┌┐ └┘└┘ こういう風にしたいということですか？ それとも上の状態で高さを揃えるということですか？ <style type="text/css"> <!-- * { margin: 0px; padding: 0px; } #layout { width: 850px; background-image: url("sidewall2.gif"); background-repeat: repeat-y; background-attachment: fixed; } .side { width: 150px; margin-left:0px; margin-top:0px; vertical-align: top; } .main { width: 700px; vertical-align: top; } .sample1{ margin:10px; text-align:left; font-size:13px; } //--> </style> <table id="layout"> <tr><td class="side"> <img src="menu1.gif" usemap="#map1" alt="menu"> <map name="map"></map> </td><td class="main"> <div class="sample1"> <img src="webtitle2.gif" alt="title"> </div> </td</tr></table> vertical-align: top; は必要なければ削除してください
お礼
わざわざ図解で説明していただいて有難う御座います。 お陰様でこちらの方で解決する事が出来ました。
お礼
丁寧なご回答有難う御座います。大分助かりました。
補足
私の文章力不足で、伝えたい事が上手く伝わってないみたいで、申し訳御座いません。 私の言いたい事は、左側のメニュー(つまりsideの部分)のメニュー画像の高さが500pxだとすると、そのsideのボックスは500pxのままになってしまい、右側のコンテンツの高さが800pxでしたりする場合に、右側と左側でボックスの長さが違ってしまう、という事なんです。つまりどれだけスクロールしてもsideのメニュー画像が置いてあるボックスの背景画像が右側と釣り合うように、という事なんです。 前述で回答して下さった場合のを一度試してみましたが、やはり左と右の高さが揃わず、layoutの方にも背景画像が表示されません。 もしよろしければご回答お願いします。 分かりにくい説明で申し訳御座いませんでした。