背景色を下まで表示して画像を常に真ん中に配置したい

Question

下記のようにHTMLを組んでCSSを設定しました。表示結果が画像の通り。しかし自分としては ●「画像」のある茶色の背景を下まで伸ばしたい。 ●その「画像」をliの項目が増えても中心に来るようにしたい。と思っています。でも何をどうやっても実現できずに困っております。さっと見て、さっとお分かりになる方がいらっしゃいましたら、ご教授いただければ幸いです。よろしくお願いいたします。 ▼HTML

XXXXXXXXXXXXX
XXXXXXXXXXXXX
XXXXXXXXXXXXX
XXXXXXXXXXXXX
XXXXXXXXXXXXX
XXXXXXXXXXXXX

▼CSS #etcLowerLink { border: 2px dotted #433832; width: 650px; margin: 50px 0px 0px; padding: 0px; clear: both; } #etcLowerLink #image { float: left; background: #392D0D; width: 150px; text-align: center; } #etcLowerLink #list { float: right; margin: 12px 0px 8px; padding: 0px; width: 500px; } #etcLowerLink #list li { background: url(../img/icon.gif) no-repeat 0px 6px; margin: 0px 0px 3px; padding: 0px 10px 0px 18px; }

ORUKA1951 · Accepted Answer

まず、基本を守ること。 HTMLにはデザイン(プレゼンテーション)に関わることは書かない。率直に文書構造だけマークアップすれば、デザインは自由自在になるはずです。将来デザインを変えるときもHTMLには手を加えなくてすみます。そして、なによりもHTMLもCSSもわかりやすくなります。 [HTML]のサンプル・ナビゲーションの画像は要はナビゲーションの見出しですから

でマークアップしておけば良いですね。検索エンジンを含めどんなユーザーエージェントも理解してくれる。・ナビゲーションは単純な順不同リスト ※タブは＿に置換してあるので戻すこと。 class名は、文書構造を示すものにしてあります。 HTML5の場合はそれぞれ⇒

になります。増えても減っても追随します。＿ [CSS]HTMLの文書構造に基づいて、セレクタを書いていきます。たったこれだけで良いです。決して難しいことはしてません。 div.header div.nav{ /* headerのnav */ border:2px dotted #433832; width: 650px; margin: 0 auto;/* 中央配置 */ position:relative; } /* header内のnavの見出し */ div.header div.nav h2{/* 見出しはテキストを消して代わりに画像 */ margin:0; background:#392D0D url(img/XXX.gif) no-repeat 50% 50%;/* 上下左右中央配置 */ height:100%;width:150px;/* 高さはnavの高さにあわせる */ position:absolute;/* 絶対配置位置や高さは(relativeな)navを基準 */ top:0;left:0; text-indent:-100em;overflow:hidden;/* テキストは消す */ } /* header 内のnavのul */ div.header div.nav ul{ min-height:140px;/* 最低限画像のサイズの高さは確保 */ list-style-image:url(../img/icon.gif);/* リストマーク */ margin-left:160px; width:420px; } ポイント:構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) 　それさえ出来ていれば、決して難しいことではありません。頑張ってね、

ORUKA1951 · Answer

No.2です。スタイルシート下記のほうがよいかも・・リキッドなのでスマホでも幅広でも対応可能(ウィンドウサイズを変えてみる)

div.header div.nav{
border:2px dotted #433832;
width: 60%;min-width:480px;max-width:800px;
margin: 0 auto;
position:relative;
}
div.header div.nav h2{
margin:0;
background:#392D0D url(img/XXX.gif) no-repeat 50% 50%;
height:100%;width:150px;
position:absolute;
top:0;left:0;
text-indent:-100em;overflow:hidden;
}

div.header div.nav ul{
min-height:140px;
list-style-image:url(../img/icon.gif);
margin: 10px 20px 10px 160px;
width:auto;
}

warpspace · Answer

１例です。アレンジしてどうぞ。

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト

参考URL：http://c-brains.jp/blog/wsg/11/10/13-200523.php

背景色を下まで表示して画像を常に真ん中に配置したい

まず、基本を守ること。

No.2です。

１例です。

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング