- ベストアンサー
サブメニュー要素を下部する方法
以下のサンプルソースを作成しました。 希望する事は、メインコンテンツ #main 領域の最下部に、#submenu 要素をを固定したいと思います。 今までは、メインコンテンツ #main 領域の最下部に配置する為、#mainにて、height を設定して下に押し下げていましたが、コンテンツ毎に、height の高さが変わる為に、対処しきれなくなりました。 また、メインコンテンツ領域より、サイドコンテンツ領域の容量が多くなる場合、#submenu が上に行ってしまう事が有ります。 希望として、メインコンテンツ領域、サイドコンテンツ領域の容量にかかわらず、常にメインコンンテンツ領域の最下部に固定したいと思っています。サンプルソースでは、#submenu 要素を margin でマイナスを与え上に上げいます。 希望としてクロスブラウザ、汎用性の高い方法が有ればと思います。Windows IE6,IE7,FireFox2.x,3.x、Mac safari,FireFox2.x,3.x 等です。 以下にサンプルソースを記載します。 下記のサンプルソースだと、Firefox2.x,3.x で下にはみ出てしまします。 もう少しスマート（エレガント）な CSS でクロスブラウザの環境で実現する事は出来ないでしょうか。 <!-- サンプルソース --> <head> <style type="text/css"> <!-- #wrapper { margin: 0 auto; width: 510px; background-color: #FFA; border: solid 1px #F00; } #content { background-color: #FFF; border: solid 1px #F00; } #side { float: left; width: 200px; background-color: #FFE; border: solid 1px #F00; } #main { float: right; margin: 0px 0px 20px 0px; width: 300px; background-color: #FFC; border: solid 1px #F00; } #submenu { clear: both; text-align: left; width: 300px; margin: -20px 0px 0px 210px; padding: 0px 0px 0px 0px; background-color: #FFA; border: solid 1px #F00; } #submenu ul { margin: 0; padding: 0; } #submenu li { margin: 0; padding: 0; display: inline; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } --> </style> </head> <html> <body> <div id="wrapper"> <div id="content" class="clearfix"> <div id="side"> <p>サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域</p> </div> <div id="main"> <div id="maincontents"> <p>メインコンテンツ領域メインコンテンツ領域メインコンテンツ領域メインコンテンツ領域メインコンテンツ領域メインコンテンツ領域メインコンテンツ領域メインコンテンツ領域メインコンテンツ領域メインコンテンツ領域メインコンテンツ領域メインコンテンツ領域</p> </div> </div> </div> <div id="submenu"> <ul> <li>サブメニュー：</li> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </div> </body> </html> <!-- サンプルソース --> サンプルソースで、 border: solid 1px #F00; は、単にブロック要素が判るようにしているだけです。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- readordie
- ベストアンサー率57% (66/115)
素直に #submenu のwidthは #wrapper と同じ（100%とかでもいいですが）にして #submeu のbackground image を #side が下いっぱいっまできているように見えるものにしてはどうでしょう。 #submeu 内のリストメニューは css で右に寄せれますし。
お礼
readordie 様 判りづらいタイトルに、ご回答頂きありがとうございます。 kuzumiHK 様からアドバイスを、position で希望通りになりました。 アドバイスを頂き、ありがとうございました。
関連するQ&A
- サブメニュー要素を下部に固定したい。
以下のソースを作成しました。 希望する事は、メインコンンテンツ領域の下部に、#submenu を固定したいと思います。 今までは、メインコンテンツ #main 領域の下に配置し、#mainで、height を設定して下に押し下げていましたが、コンテンツ毎に、height の高さが変わる為に、対処しきれなくなりました。 何か良いアイディアが有ればアドバイスを頂きたいと思います。 ネット検索も色々試みましたが、探しきれませんでした。 ちなみに、#submenu を追加すると、ブラウザ一番下まで来てしまいました。 position: absolute; bottom: 0; 希望として、クロスブラウザ、汎用性の高い方法が有ればと思います。Windows IE6,IE7,FireFox2.x,3.x、Mac safari,FireFox2.x,3.x 等です。 以下にサンプルソースを記載します。 <!-- ソースサンプル --> <head> <style type="text/css"> <!-- #wrapper { margin: 0 auto; width: 510px; background-color: #FFA; border: solid 1px #F00; } #side { float: left; width: 200px; background-color: #FFE; } #main { float: right; width: 300px; height: 200px; background-color: #FFC; } #submenu { margin: 0 auto; padding: 0; width: 95%; background-color: #FFF; } #submenu ul { margin: 0; padding: 0; } #submenu li { margin: 0; padding: 0; display: inline; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } --> </style> </head> <html> <body> <div id="wrapper" class="clearfix"> <div id="side"> <p>サイドコンテンツ領域</p> </div> <div id="main"> <p>メインコンテンツ領域</p> <!-- 下記要素（サブメニィー）をメインコンテンツ領域の下部に固定したい --> <div id="submenu"> <ul> <li>サブメニュー：</li> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </div> </div> </body> </html> <!-- ソースサンプル -->
- ベストアンサー
- CSS
- CSSを使用したHPの左メニューとフッターについて
CSSを使用したホームページを作成しています。 左メニューとメインコンテンツ部分があります。 2点ほど、ご教授頂けますと幸いです。 1.左メニューの背景色について 現在、左メニューの背景色がメニュー周りのみとなっています。 これを左メニュー最下部（フッターの所まで）色を付けたいと思っています。 2.ブラウザのサイズ縮小によるフッターの表示について 現在、フッターを常に最下部で表示するように対応してみた所です。 ブラウザのサイズを縮小（上下を狭くする）と、フッターの部分が、左メニューの上部に重なってしまいます。 こちらを重ならないようにする方法（重なりそうになるとフッターが画面外に）はどのようにしたら宜しいでしょうか？ 以下ソースとなります。 宜しくお願い致します。 HTML --------------------------------------------------------------- <html> <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="test.css" type="text/css" /> <title></title> </head> <body> <div id="container"> <div id="header"> </div> <div id="main"> <div class="category"> <h1>テスト</h1> <div class="entry_body"> 本文本文本文本文本文本文本文本文本文本文本文本文 </div> </div> </div> <div id="side"> <div class="category"> <h3>メニュー</h3> <ul> <li><a href="../test1/">test1</a></li> <li><a href="../test2/">test2</a></li> <li><a href="../test3/">test3</a></li> <li><a href="../test4/">test4</a></li> <li><a href="../test5/">test5</a></li> </ul> </div> </div> <div id="footer"> </div> </div> </body> </html> --------------------------------------------------------------- CSS --------------------------------------------------------------- html, body { height: 100%; font-size:80%; line-height: 140%; letter-spacing:1px; color: #333333; background-color:#cccccc; text-align: center; margin: 0px auto; padding: 0px; } a:hover { text-decoration: none; } #container { width:900px; min-height:100%; height:auto !important; height:100%; position: relative; margin: 0px auto; background-color:#FFFFFF; text-align: left; } #header { border-top:#003366 solid 10px; margin: 0px 0px 0px 0px; clear:both; } #main { float:right; width:688px; background: #FFFFFF; margin: 0px 5px 0px 0px; padding: 0px 0px 0px 0px; display: inline; } #main .category { width:688px; margin: 0px 0px 15px 0px; } #main h1 { font-size:105%; border-left:#003366 solid 6px; border-bottom:#cccccc solid 1px; height:17px; font-size:120%; font-weight:bold; margin: 10px 10px 10px 10px; padding: 11px 10px 10px 20px; } #main .entry_body { margin: 15px 24px 15px 24px; padding: 0px 0px 0px 0px; } #main ul { margin: 0px 30px 0px 28px; padding: 0px 0px 10px 0px; } #main ol { margin: 0px 30px 0px 35px; padding: 0px 0px 10px 0px; } #main li { line-height: 140%; margin: 0px 0px 0px 0px; padding: 0px 0px 5px 0px; } #side { float:left; font-size:12px; width:200px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background:#336699; color:#FFFFFF; } #side .category { margin: 0px 0px 10px 0px; padding: 0px 0px 0px 0px; } #side h3 { color:#FFFFFF; background:#003366; font-size:12px; text-align:left; font-weight:bold; margin: 5px 5px 5px 5px; padding: 10px 10px 10px 10px; border:#6699cc 1px solid; } #side .entry_body { margin: 5px 5px 5px 5px; padding: 10px 10px 10px 10px; background: #6699cc; } #side ul { margin: 5px 5px 5px 5px; padding: 5px 5px 5px 5px; background: #6699cc; } #side li { line-height: 120%; list-style:none; margin: 5px 0px 5px 0px; border:#336699 1px solid; } #side li a, #side li a:link, #side li a:visited { color:#FFFFFF; text-decoration:none; display:block; padding: 10px 10px 10px 10px; } #side li a:hover { color:#333333; background:#99ccff; text-decoration: none; padding: 10px 10px 10px 10px; } #footer { width:900px; height:10px; background:#003366; margin: 0px 0px 0px 0px; position: absolute; bottom: 0; } ---------------------------------------------------------------
- ベストアンサー
- HTML
- css leftsideだけ色をつける方法
あるサイトのレイアウトを参考にしながらcssの勉強をしています。 html <body> <div id="page"> <div id="head"> <img src="./simpe01/img/logo_img300-60.gif" alt="log_img" width="300" height="60"> </div> <div id="navigation"> <ul> <li><a href="./index.htm">HOME</a></li> <li><a href="./contents/index.htm">コンテンツ</a></li> <li><a href="./link/index.htm">リンク</a></li> </ul> </div> <h1>○○</h1> <div id="leftside"> <p>新着情報</p> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </div> <div id="main"> <h2>ごあいさつ</h2> <div class="imgbox_f"><img src="./img/img_sample.jpg" alt="サンプル" width="200" height="257"></div> <p>画像は<div id="imgbox_f"></div>で囲むと写真右へ。</p> <p>あいさつ文を入力しおく。<strong>太字</strong>は<strong></strong>で囲む。</p> <ul> <li>箇条書き</li> <li>箇条書き</li> </ul> <h2>補足情報</h2> <p>サイトの使い方や、 注意事項を書いておく。 </p> </div> <!-- #foot 画面一番下 --> <div id="pagefooter"> <p>必要ならコピーライトや、サイトの付加情報を書くところ。 </ p> </div> </div> </body> css *{ margin: 0px; padding: 0px; } body { background-color: #FFFFF; font-size: 95%; line-height: 150%; text-align: center; color: #333333; margin: 0px; } div#page { text-align: left; border: 1px solid #333333; background: #FFFFFF; width: 780px; margin: 5px auto; } div#head { padding: 10px 10px 5px 5px; margin: 0px; background: #FFFFFF; } div#navigation { padding: 10px; background: #E188FF; border-top: 1px solid #333333; border-bottom: 1px solid #333333; height: 25%; } div#navigation ul{ margin: 0px; padding: 0px; background: #FFFFFF; } div#navigation li{ float: left; padding: 0px; margin-left: 10px; color: #FFFFFF; list-style: none; } div#navigationu a{ color: #FFFFFF; text-decoration: none; } div#navigation a:hover{ color: #000000; background: #D7E1EC; } div#main { margin: 0px; border-left: 1px solid #CCCCCC; padding: 10px 0px; background: #FFFFFF; width: 560px; float: left; } div#main p{ margin: 0px 0px 20px 10px; } div#main ul { margin-left: 60px; margin-bottom: 1em; margin-right: 30px; } div#leftside { width: 200px; margin: 5px 0px 0px 5px; padding: 10px 0px; float: left; } div#leftside ul{ margin: 0px 0px 0px 5px; list-style: circle; padding-left: 2em; } div#leftside p{ margin: 0px 10px 10px; } div#pagefooter { border-top: 1px solid #333333; padding: 0px; text-align: center; clear: both; margin: 0px; } div#pagefooter p{ margin: 5px 0px; } strong { color: #CC3333; } h1 { font-size: 110%; padding: 25px 15px 5px; border-bottom: 1px solid #CCCCCC; background: #F3F3F3; font-weight: normal; } h2 { font-size: 110%; margin: 0px 20px 20px; color: #333333; border-bottom: 1px dashed #999999; padding: 0px 0px 5px; clear: both; } dl { margin: 0px 0px 50px 40px; } dt { font-weight: bold; } dd { margin-bottom: 10px; } .imgbox { margin: 0px 0px 1em 10px; } .imgbox img{ border: 1px solid #666666; } .imgbox_f { margin: 0px 10px 1em; float: right; } .imgbox_f img{ border: 1px solid #666666; } --------------------------------------------------------------- leftsideだけに色をつけたいのですが、どうしても右側が20px;分 あまってしまいます。色々いじってみたのですが改善されず、行き詰っています。 bodyのwidthが780px; leftsideが200px; mainが560px; 自分としてはmainの560を580に変えれば解決と思っていたのですが、 そうするとmainがleftsideの下にきて形がくずれてしまいます。 20px分はどの部分を変更すればきれいな形になるのでしょうか。 宜しくお願いします。
- ベストアンサー
- HTML
- スタイルシートでのレイアウトについて
スタイルシートでレイアウトしたく、フリーのテンプレートからソースをもってきました。 -HTML- <div id="outline"> <div class="main"> メイン上部コンテンツ部分 </div><!-- end main --> <div class="side"> サイド上部メニュー部分 </div><!-- end side --> <br class="c-both"> <div class="main"> メイン下部コンテンツ部分 </div><!-- end main --> <div class="side"> サイド下部メニュー部分 </div><!-- end side --> <br class="c-both"> <div class="footer"> フッター部分 </div><!-- end footer --> </div><!-- end outline --> -CSS- #outline{ width : 750px ; text-align : left ; border : solid 1px #000000 ; } .main { width : 200px ; background : #ebebeb ; margin-bottom : 10px ; float : left ; } .side { width : 540px ; background : #ebebeb ; margin-bottom : 10px ; float : right ; } .c-both { clear : both ; } .footer{ width : 100% ; background : #ebebeb ; } そこで、"上部コンテンツ部分"と"下部コンテンツ部分"の高さを、それぞれ違う高さにしたいのですが、どうしたら良いでしょうか？ あと、メイン上部コンテンツ部分・サイド上部メニュー部分、メイン下部コンテンツ部分・サイド下部メニュー部分の下に、同じように行を追加したいのですが、どうしたら良いでしょうか？ スタイルシートの段組みで、非常に困っています。 助けて下さいm(_ _)m
- 締切済み
- その他（プログラミング・開発）
- ページを開いた直後のサブメニューを非表示
現在、個人で利用するサイトをJqueryを導入してリニューアルしようと計画しているのですが、 添付画像のように新しいページを開いた直後は、左の青いサブメニューが必ず表示されてしまいます。 ("#menu ul li ul:first").hide();を入れると 消えることには消えたのですが、 それ以後サブメニューが表示されなくなってしまいました。 どなたかお分かりの方、ご助言をお願い致します。 参考までに以下にHTMLとＣＳＳのコードを記載します。 (HTML) <html> <head> </head> <body> <div id="content"> <div id="menuWrapper" class="menuWrapper bg1"> <ul class="menu" id="menu"> <li class="bg1" style="background-position:0 0;"> <a id="bg1" href="#">Our Passion</a> <ul class="sub1" style="background-position:0 0;"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> <li class="bg1" style="background-position:-266px 0px;"> <a id="bg2" href="#">Our Brands</a> <ul class="sub2" style="background-position:-266px 0;"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> <li class="last bg1" style="background-position:-532px 0px;"> <a id="bg3" href="#">Contact</a> <ul class="sub3" style="background-position:-266px 0;"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> </ul> </div> </div> </body> </html> (CSS) .menuWrapper{ font-family: "Trebuchet MS", Arial, sans-serif; font-size: 15px; font-style: normal; font-weight: normal; text-transform:uppercase; letter-spacing: normal; line-height: 1.45em; position:relative; margin:20px auto; height:542px; width:797px; background-position:0 0; background-repeat:no-repeat; background-color:transparent; } ul.menu{ list-style:none; width:797px; } ul.menu > li{ float:left; width:265px; height:542px; border-right:1px solid #777; background-repeat:no-repeat; background-color:transparent; } ul.menu > li.last{ border:none; } .bg1{ background-image: url(../images/1.jpg); } .bg2{ background-image: url(../images/2.jpg); } .bg3{ background-image: url(../images/3.jpg); } ul.menu > li > a{ float:left; width:265px; height:50px; margin-top:450px; text-align:center; line-height:50px; color:#ddd; background-color:#333; letter-spacing:1px; cursor:pointer; text-decoration:none; text-shadow:0px 0px 1px #fff; } ul.menu > li ul{ list-style:none; float:left; margin-top:-180px; width:100%; height:110px; padding-top:20px; background-repeat:no-repeat; background-color:transparent; } ul.menu > li ul li{ display:none; } ul.menu > li ul.sub1{ background-image:url(../images/bg1sub.png); } ul.menu > li ul.sub2{ background-image:url(../images/bg2sub.png); } ul.menu > li ul.sub3{ background-image:url(../images/bg3sub.png); } ul.menu > li ul li a{ color:#fff; text-decoration:none; line-height:30px; margin-left:20px; text-shadow:1px 1px 1px #444; font-size:11px; } ul.menu > li ul.sub1 li{ display:block; } ul.menu > li ul li a:hover{ border-bottom:1px dotted #fff; }
- ベストアンサー
- JavaScript
- フルCSSでFirefoxでデザインが崩れてしまいます。
フルcssHPに挑戦しようと思っています。 cssでIEでは思ったような表示が可能ですが Firefox、Operaでは「contents」内のコンテンツが 「container」>を突き抜けて表示されてしまいます。 下記がhtml、cssソースになります。 【HTML】 <body> <div id="container"> <!--メインナビ--> <div id="contents"> <div id="subnavi"> <ul> <li>サブナビ1</li> <li>サブナビ2</li> <li>サブナビ3</li> <li>サブナビ4</li> </ul> </div> <div id="main"> メインコンテンツが入ります </div> </div> <!--フッター--> </div> </body> メインナビ、フッターアンカーリンクは文字数制限上削除しています。 【CSS】 body{ text-align:center; background-color:#ffffff; font-size:10px; color:#333333; } body div { text-align:left; margin: 0 auto; } #container{ text-align:left; width:724px; background-color:#ffffff; padding:15px 18px; position: relative; border:1px solid #666; } #contents{ width:724px; background-color:#ffffff; text-align:left; border-bottom:8px solid #666666; margin-bottom:10px; position: relative; clear:both; } #subnavi{ float:left; width:200px; } #main{ float:left; width:495px; padding-left:29px; } この突き抜けを防止するにはどうしたらよろしいのでしょうか。 「contents」 を削除して表示するとどのブラウザでも表示が可能ですので <div id="contents">の記述が何かおかしいのでしょうか。 それとも根本的にブラウザの問題なのでしょうか？ (ブラウザは最新版を使っています) 皆様、よろしくご回答お願いいたします。
- ベストアンサー
- CSS
- レイアウトがズレル
お世話になります。 スタイルシートの勉強中ですが、以下のようなソースを書くものの、左右のサイドメニュー部、メイン部にズレが生じてしまいます。 （XPでIE８を利用していますが、互換表示でもレイアウトが異なる） 何故こうなるのか、アドバイスのほど頂戴出来れば幸いです。 宜しくお願い致します。 #outline{ border: 1px solid #C0C0C0; width: 804px; margin: 13px auto 10px auto; padding: 2px; } #main{ margin-top: 0px; margin-right: 0px; width:631px; border: 1px solid #C0C0C0; padding: 2px; text-align:left; float: right; } #menu{ margin-left: 0px; margin-top: 0px; width:159px; background: #FFFFFF; border: 1px solid #C0C0C0; padding: 2px; } <div id="outline"> <div id="main"> メインメインメイン<br>メインメインメイン<br>メインメインメインメインメイン<br>メインメインメインメインメイン<br> メインメインメイン<br>メインメインメイン<br>メインメインメインメインメイン<br>メインメインメインメインメイン<br> </div> <div id="menu"> サイドメニューサイドメニュー </div> </div>
- 締切済み
- CSS
- IE6で見るとメニューバーが崩れてしまいます
ホームページを作成したのですが、ページによって上部に設置したメニューバーが見れたり見れなかったりしてしまいます。CSSハックでIE6でもページ自体は何とか見れるようにはなったのですが、何ページかはどういうわけかトップ部分にあるメニューが画像ではなく、文字で現れて正常に見ることができません。どなた様かお詳しい方、教えて頂けませんでしょうか。下記にhtmlとcssを記述します。 〈html〉 <html> <body> <div class="headbg"><img src="head_bg1.jpg" alt="" border="0"></div> <div class="header"><a href="#" border="0"> <div class="rogo"> </div> </a> <div id="globalnavi"> <ul> <li id="menu1"><a href="#">メニュー1</a></li> <li id="menu2"><a href="#" >メニュー2</a></li> <li id="menu3"><a href="#">メニュー3</a></li> <li id="menu4"><a href="#">メニュー4</a></li> <li id="menu5"><a href="#">メニュー5</a></li> <li id="menu6"><a href="#">メニュー6</a></li> </ul> </div> <div class="main"></div> </div> </body> </html> <CSS> .headbg { height:400px; width: 100%; min-width:900px; border:0px solid #F00; position:absolute; top:66px; left:0; overflow:hidden; background: url(head_bg_bg.jpg); background-repeat:repeat-x; } .rogo { background-image: url(rogo.jpg); background-repeat: no-repeat; height: 160px; width: 160px; padding: 0px; margin-top: 8px; margin-right: 0px; margin-bottom: 11px; margin-left: 33px; position: relative; border: 0px solid #000; clear: both; float: left; position:relative; } .header { width: 900px; height:300px; padding:0px; margin-left: auto; margin-right:auto; text-align:left; margin-top:0px; border:0px solid red; } .main { height:920px; width: 900px; min-width:900px; background-color:#ffffff; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; padding: 0px 0px 0px 0px; margin-left: auto; margin-right: auto; text-align: center; margin-top:65px; } #globalnavi { margin-left:auto; margin-right:auto; margin-top:-170px; text-align:left; top:0px; left:0px; padding:0px; width:700px; height:52px; list-style:none; overflow:hidden; border: 0px solid red; float:right; clear:both; } #globalnavi ul { list-style-type: none; margin: 0; padding: 0; height: 52px; overflow: hidden; } #globalnavi li { text-indent: -9999px; float:left; width: 116px; height: 52px; margin: 0; padding-right: 0px; border:0px solid #333; } #globalnavi a { display: block; position: relative; width: 100%; height: 52px; } #menu1 a { background: url(menu1_active.jpg) no-repeat 0 0; left:0px; margin-left:0px; } #menu2 a { background: url(menu2.jpg) no-repeat 0 0; margin-left:0px; } #menu3 a { background: url(menu3.jpg) no-repeat 0 0; margin-left:0px; } #menu4 a { background: url(menu4.jpg) no-repeat 0 0; margin-left:0px; } #menu5 a { background: url(menu5.jpg) no-repeat 0 0; margin-left:15px; } #menu6 a { background: url(menu6.jpg) no-repeat 0 0; margin-left:15px; }
- ベストアンサー
- ネットトラブル
- CSSを独学中です。が背景の設定がどうしてもうまくいきません。
CSSを使ってwebを作ろうとしている素人です。 header（見出しのロゴなど） main この中にコラムを２つ。左コラムに縦並びメニュー 背景画像あり。 footer（copyright表記など） 色はグレー。 いろいろ参考資料を見ながら、このような構成にしたのですが、 本文(main)のところが、footerと同じグレー１色になってしまい、 予定していた背景画像が表示されません。 とりあえず全体的なレイアウトは何とか大丈夫なようなのですが、 何か原因がお分かりでしたらご教示いただけると幸いです。 おそらく単純なミスなのかもしれませんが。 以下に、cssとhtmlファイルの抜粋を載せておきます。 ------- css ------- body { margin: 0; padding: 0; background-color: #999999; color: #FFFFFF } .header {略} .main { padding: 0px; background-color: #FFFFFF; color: #000000; background-image: url(images/background-check.gif); } .footer{ clear: both; padding: 2px 0 2px 0; border-top: solid 1px #333333; color: #FFFFFF; text-align: center; } p { margin: 0 0 12px 20px; padding: 0; line-height: 130%; color: #000000 } ul { list-style: none; margin: 0; padding: 0; } img { border: none; } /*------ 左の縦メニュー------------ */ .menutate { width: 120px; margin: 0px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; } .menutate li a { height: 32px; text-decoration: none; } .menutate li a:link, .menutate li a:visited { color: #FFFFFF; display: block; background: url(images/menutate.gif); padding: 8px 0 0 5px; } .menutate li a:hover, .menutate li #current { color: #990099; background: url(images/menutate.gif) 0 -32px; padding: 8px 0 0 5px; } /*-------- コラム分け---------------- */ .leftcolumn { float: left; width: 120px; } .rightcolumn { float: left; overflow: auto; padding: 0 0 0 20px; } /*----- 本文-------------- */ h1{ padding: 6px 5px 6px 5px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 15px solid #CC0099; background-color: #FFFF99; } h2{ padding: 2px; border-left: 15px solid #CC0099; border-bottom: 1px solid #666666; } ------ html ------ <body> <div class="header"> （略） </div> <!-- メインパート --> <div class="main"> <!-- 左のタテメニュー --> <div class="leftcolumn"> <div class="menutate"> <ul> <li><a id="current" href="index.html">home</a></li> <li><a href="others.html">others</a></li> <li><a href="aboutme.html">about me</a></li> </ul> </div> </div> <!-- 右のコラム --> <div class="rightcolumn"> <h1>いろいろ</h1> <h2>あれこれ</h2> <p>などなど</p> </div> </div> <div class="footer"> Copyright: 2007 xxx. All rights reserved. </div> </body> </html>
- 締切済み
- CSS
- floatすると親要素より横にずれてしまいます
#contentsにある2つのボックスが左へ20pxほどずれてしまいます。 いろいろと調べてみたのですが解決できませんでした。 長文になってしまい申し訳ありませんが、ご指導よろしくお願いします。 <<CSS>> body { font-size:10px; margin: auto; padding: 0; text-align:center; min-width: 810px; max-width: 850px; height: 100%; } #wrapper { width: 830px; height:100%; margin-left:auto; margin-right:auto; padding-top: 10px; padding: 0; background-color: #FFF; } #header { width: 830px; height: 150px; margin: 0; padding-bottom: 0; min-height: 1%; overflow: hidden; line-height: 0px; background: url(back_top.gif) #F9F9F7 center top no-repeat; } img { display:block; } #logo { float: left; width: 450px; height: 78px; padding-top: 50px; padding-bottom: 0; margin-left: 40px; background: transparent; } #logo h1 { width: 450px; height: 78px; font-size:12px; margin: 0; padding-bottom: 0; background: transparent; } #navi { float: right; width: 310px; height: 50px; padding-top: 60px; margin-right: 30px; line-height: 0px; } #contents { width: 830px; min-height: 600px; margin: 0; background: url(back_main.gif) #F9F9F7 center repeat-y; } #contents #sub { float: left; width: 180px; height: auto; text-align: center; } ul { margin: 0; padding: 0; float: left; width: 180px; list-style: none; color: #794c2c; background-color: #EDE4EB; } li { display: block; margin: 0; padding: 0; font-size: small; } li span { display: block; font-size: x-small; } li#c01 a { background: url(c01.jpg) 7px 5px no-repeat; } li#c02 a { background: url(c02.jpg) 7px 5px no-repeat; } li a { display: block; min-height: 40px; padding: 5px 7px 5px 66px; border-bottom: 1px dotted #ffffff; text-decoration: none; color: #aa8f78; background-color: #F3EEDE; } ul li a:hover { color: #794c2c; background-color: #F3FAD1; } /* Hides from IE-mac \*/ * html ul li a, * html ul li { height: 40px; line-height: 1.5; } /* End hide from IE-mac */ /* line-heightはli間の隙間をなくするために指定 */ #contents #main { float: right; margin-right: 50px; width: 500px; height: auto; background-color: transparent; } #footer { width: 830px; height: 100px; background: url(back_bottom.gif) #F9F9F7 center no-repeat; margin: 0; } <<html>> <body> <div id="wrapper"> <div id="header"> <div id="logo"><h1><a href="/"><img src="../../Documents/logo.png" width="450" height="78" border="0" alt="HOMEPAGE" /></a></h1></div> <div id="navi"><p>SAMPLE</p> <div id="srchBox">**yahoo検索窓** </div></div> <div style="clear:both;"></div> <div id="contents"><div id="sub"><ul><li> </li><li id="c01"><a href="c01.htm">c01<span>c01</span></a></li><li> </li><li id="c02"><a href="c02.htm">c02<span>c02</span></a></li</ul></div> <div id="main"><img src="../../Documents/001.jpg" width="400" height="354" border="0" /></div></div> <div id="footer"><table border="0" width="750" height="100" align="center"><tr><td width="250" height="70" align="center" valign="top">AAA</td><td width="250" height="70" align="center" valign="top">BBB</td><td width="250" height="70" align="center" valign="top">CCC</td></tr><tr><td colspan="3" width="750" height="30"> </td></tr></table></div> </div> </div> </body>
- 締切済み
- HTML
お礼
kuzumiHK 様 判りづらいタイトルに、ご回答頂きありがとうございます。 アドバイスを試した所、希望通りになりました。 ちなみに、Mac OS X の環境で確認しましたが、問題ありませんでした。 実は、position の使い方を良く理解出来ていませんでした。 position を利用する際に、何処が起点になるのか良く理解出来ておらず、今まで殆ど利用したことがありませんでしたが、今回のアドバイスで今後積極的に、position が利用出来ると思います。 勉強になりました。ありがとうございます。