CSS初心者です。
Win IE6 環境で制作しています。
「メニュー」部分(右側)と「コンテンツ部分」(左側)とに分けて2段組で外部CSSでのページレイアウトに挑戦しているのですが、なんとかテーブルでのレイアウトを全部外して、形にはなったのですが、表題のようにコンテンツの高さに合わせて、メニュー領域の背景色を付けることが出来ません・・・。
CSSは
.contents { width:770px; text-align:center; } (全体のコンテンツ領域)
.contents-left { width:550px; float: left; text-align:center; } (←コンテンツ部分)
.contents-right { width:200px; vertical-align:100%; } (←メニュー部分)
.footer { width:770px; text-align:center; clear: both; } (フッター)
とし、
メニューを囲んでいるDiv要素には
.menu_box { background-image:url(img/menuback.gif) ; width:197px; vertical-align:100%; }
としています。
いといろと試行錯誤していて「vertical-align:100%;」または「vertical-align:bottom;」などを付けてみましたが、ダメでした。
教えてください。よろしくお願いします。
No.2ベストアンサー
- 回答日時:
「vertical-align」はあくまでもBOX内の要素のそろえ位置を指定するものであって、BOXの幅が変わるわけではありません。
#1の方が言うように<div>で周りを囲い背景を設定するしか。
IEとFirefoxで同様の表示ができるサンプルを作ってみました。
ご参考とまで。
------------------------------
<html>
<head>
<title>Layout Sample2</title>
<style type="text/css">
.contents {
width:770px;
text-align:center;
}
.contents-left {
width:550px;
float:left;
text-align:left;
background-color:#ffffff; /* 左側の背景が画像にならないように隠すため */
}
.contents-right {
text-align:center;
}
.footer {
width:770px;
text-align:center;
}
.clr {
clear:both;
}
.back {
width:770px;
background-color:#ccffff;
background-image:url(./img/menuback.gif);
}
</style>
</head>
<body>
<div class="back"><!-- さらに囲まないとFirefoxじゃ背景でない -->
<div class="contents">
<div class="contents-left">
<h2>こんてんつ</h2>
<p>こんてんつの内容。どれくらい長くなるかは表示してみないとわからんねぇ。</p>
<p>こんてんつの内容。どれくらい長くなるかは表示してみないとわからんねぇ。</p>
<p>こんてんつの内容。どれくらい長くなるかは表示してみないとわからんねぇ。</p>
<p>こんてんつの内容。どれくらい長くなるかは表示してみないとわからんねぇ。</p>
<p>こんてんつの内容。どれくらい長くなるかは表示してみないとわからんねぇ。</p>
<p>こんてんつの内容。どれくらい長くなるかは表示してみないとわからんねぇ。</p>
<p>こんてんつの内容。どれくらい長くなるかは表示してみないとわからんねぇ。</p>
<p>こんてんつの内容。どれくらい長くなるかは表示してみないとわからんねぇ。</p>
<p>こんてんつの内容。どれくらい長くなるかは表示してみないとわからんねぇ。</p>
</div>
<div class="contents-right">
<h2>めにゅー</h2>
<p>めにゅー1</p>
<p>めにゅー2</p>
<p>めにゅー3</p>
<p>めにゅー4</p>
<p>めにゅー5</p>
</div>
</div>
<div class="clr"></div>
</div>
<div class="footer">
<p>ふったふったふった</p>
</div>
</body>
</html>
No.4
- 回答日時:
外側をdiv等で囲む場合、内側にfloat要素があれば、内側の最後にclearが必要です。
内側にfloatではない高さ1px以上の要素がなければ
外側のdivは領域を確保しません。
ネスケで確認すれば分かるはずです。
No.1
- 回答日時:
コンテンツ部分に応じてメニュー部分の高さを取得するのは現実的に難しいです。
<div id="wrapper">
<div id="contents-left"></div>
<div id="contents-right"></div>
<div style="clear:both;height:1px;"></div>
</div>
としてwrapperに背景画像をつければ意図した表示になると思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- JavaScript htmlとcssで分数を表示後、分数の右側に文書を書きたい 1 2022/04/28 10:09
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
動く(流れる)文字列はどうや...
-
文字をクリックしたら別の文字...
-
CSS <div>の入れ子が反映さ...
-
css固定したフッターが本文と重...
-
1行で左寄せと右寄せと中央揃え...
-
レイアウトが崩れないようにす...
-
スクロール可能なチェックボックス
-
Flickity で画像にリンクを貼る...
-
youtubeをHPに載せたいです。
-
スタイルシートで位置固定する...
-
オンマウス時に別画像を上に重...
-
【CSS】floatで左右に並べた...
-
ポップアップのソースの書き方...
-
html スクロール要素を下から表...
-
MAX関数を使ってからLEFT JOIN...
-
createElementで作成した要素を...
-
読み込んだQRコードをフォーム...
-
jqueryのsortableで一部ソート...
-
ネストされたチェックボックス...
-
iframe内のリンクが飛ばないの...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
サイトにコンテンツを並べる際...
-
CSS <div>の入れ子が反映さ...
-
スクロール可能なチェックボックス
-
フッター上部に謎の隙間
-
【CSS】floatで左右に並べた...
-
textareaで入力した文字を改行...
-
文字をクリックしたら別の文字...
-
css固定したフッターが本文と重...
-
Flickity で画像にリンクを貼る...
-
Ctrl+F(検索)の窓を出したいの...
-
文字を固定したいのですが…
-
背景の過
-
オンマウス時に別画像を上に重...
-
離れた場所にマウスオーバーで...
-
チェックボックスの背景色って...
-
スタイルシートで画面を上下に...
-
フッターの下に隙間ができてしまう
-
TABLEの高さを固定したいのですが…
-
floatさせたdivタグを折り返さ...
-
ポップアップのソースの書き方...
おすすめ情報