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で質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・【お題】絵本のタイトル
- ・【大喜利】世界最古のコンビニについて知ってる事を教えてください【投稿~10/10(木)】
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
clear: bothの事で質問です。
-
文字を固定したいのですが…
-
メニューやヘッダー背景だけを...
-
floatさせたdivタグを折り返さ...
-
CSSで背景画像が表示されない
-
コンテンツの高さに合わせた縦...
-
フッター上部に謎の隙間
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
c++std::string型をTCHARに変換...
-
Slick.jsのオプションrtlについて
-
jQueryでクリックされた要素のi...
-
jQuery アコーディオンメニュー...
-
検索結果を別フレームに表示したい
-
javascriptでpostした値が取得...
-
jqueryのimgpreviewというプラ...
-
ネストされたハッシュの値から...
-
Colorboxがうまく設置できません
-
読み込んだQRコードをフォーム...
-
デフォルト非表示にしたい。【t...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
フッター上部に謎の隙間
-
CSS <div>の入れ子が反映さ...
-
【CSS】floatで左右に並べた...
-
スクロール可能なチェックボックス
-
文字を固定したいのですが…
-
大分類・中分類・小分類
-
html スクロール要素を下から表...
-
サイトにコンテンツを並べる際...
-
スタイルシート(CSS)で、高さ...
-
文字をクリックしたら別の文字...
-
チェックボックスの背景色って...
-
webデザイン, コーディング
-
レイアウトが崩れないようにす...
-
リンクで違うページの指定箇所...
-
textareaで入力した文字を改行...
-
ラジオボタンで段階評価
-
ヘッダとフッタが固定でコンテ...
-
画像のスムーズなフェードイン方法
-
ページへのアクセス後に背景色...
-
フッターの下に隙間ができてしまう
おすすめ情報