- 締切済み
CSS #containerについて
えっと、CSSについての質問です。 最近勉強をはじめたのですが、 #container を下まで伸ばすのに height: 100%; min-width: 100%; をいれても下まで伸びない現象がおきています。 最初は伸びていたのですが、 ヘッダーとフッターを横に１００％にしてから 様子がおかしくなりました。 減ったーフッターは横に全部伸ばしたくて、 コンテイナーは横は余白つけて下にのばしたいのです＞＜ どなたか原因がわかる方、対処法わかる方 いましたらお願いします＞＜ ------------------------------HTML--- <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="index3.css"> </head> <body> <div id="container"> <div id="headerbg"> <div id="header"> <h1>header</h1> </div><!-- header --> </div><!-- headerbg --> <div id="menu"> <ul> <li><a href="">めにゅー１</a></li> <li><a href="">めにゅー２</a></li> <li><a href="">めにゅー３</a></li> <li><a href="">めにゅー４</a></li> <li><a href="">めにゅー５</a></li> <li><a href="">めにゅー６</a></li> </ul> </div> <div id="main"> <div id="contents"> </div><!-- contens --> <div id="sidebar"> </div><!-- sidebar --> </div><!-- main --> <div id="footerbg"> <div id="footer">Footer</div><!-- footer --> </div><!-- footerbg --> </div><!-- container --> </body> </html> -------------------------CSS--- html { background-image: url('hana3.jpg'); background-attachment: fixed; } body { font-family: Verdana, Arial; font-size: 20px; margin: 0px; padding: 0px; } html,body,#main,#container{ height:100%; } #container { height: 100%; min-width: 100%; background-color: rgba(255,100,0,0.5); } #headerbg{ width: 100%; min-width: 100%; background-color: rgba(255,100,0,0.5); } #header { padding: 40px; width: 100%; } #menu { } #menu>ul>li { float: left; } #main { overflow: hidden; } #sidebar { } #footerbg{ background-color: rgba(255,100,0,0.5); width: 100%; min-width: 100%; } #footer { padding: 50px; width: 100%; }
- ayussy
- お礼率0% (0/1)
- CSS
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
スタイルシートに手をつける前にHTMLをきちんと学びなおしたほうが得策です。 DOCTYPEを<!DOCTYPE html>と書かれているところからHTML5を想定されているのだと思いますが、HTML5の目的は大きく二つあります。 ・セマンティクウェブ ・canvasやvideo、formの拡張などインタラクティブな部分 セマンティクウェブでは、文書構造をマークアップすることが強く求められます。これはHTML4.01の時代もそうだった 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 のですが、HTML5では、これでは抽象的過ぎて理解されなかったために、HTML5では、わざわざ新しい要素が追加されました。すなわち、header(文書のヘッダ),section(本文),footer(フッタ),nav(ナビゲーション),aside(本文と関係ないコラなど),figure(挿絵的要素),article(ヘッダー、本文、フッターを持ちうる独立した記事)。これは、HTML4.01の時代、それぞれ<div class="header"><div class="section"><div class="footer">・・・のように書くように推奨されていたものです。 これはHTML5だと <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="index3.css"> </head> <body> <header> <h1>header</h1> <nav> <ul> <li><a href="">めにゅー１</a></li> <li><a href="">めにゅー２</a></li> <li><a href="">めにゅー３</a></li> </ul> </nav> </header> <section> <h2>本文見出し<h2> <p>記事</p> <nav> <h3>目次<h3> <ul> <li><a href="">めにゅー１</a></li> <li><a href="">めにゅー２</a></li> <li><a href="">めにゅー３</a></li> </ul> </nav> </section> <footer> <h2>文書情報</h2> </footer> </body> </html> HTML4.01だと下記のようになります。 この様にHTMLも極めてシンプルになります。そして誰が見ても--検索エンジンのロボットが見ても、どこに何が書かれているか一目で判る。 その上でスタイルシートでデザインして行きますが、スタイルシートもこの文書構造に従いますから、とっても簡単になります。あとから誰が見ても理解できる。 HTML4.01とスタイルシートの実例(幅は640～900pxに制限してあります。) タブは＿に置換してあるので戻すこと こんなにシンプルでわかりやすくなるのですよ。(HTMLさえきちんと書けていたら) headerbg,sidebar,main,contentsmenueなど意味不明なclass名を付けたら後で見直してもわからないし、そもそも検索エンジンが理解してくれませんよ。HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )を参考にすると良いです。そのまま<div class="section">を<section>に変えればHTML5になります。 ★後は自分で工夫してみてください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=utf-8"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;} body{background: url('hana3.jpg') fixed;font-size: 20px; font-family: Verdana, Arial serif;/* 必ず総称ファミリ名をつける */ } div.header,div.section,div.footer{ background-color: rgba(255,100,0,0.5); max-width:900px;/*幅広ディスプレイ用 */ min-width:640px;/* スマホなど狭いディスプレイ用 */ margin:0 auto; } h1,h2{margin:0 40px;} div.header div.nav{width:100%;} div.header div.nav ul,div.header div ul li{list-style:none;margin:0;padding:0;text-align:center;} div.header div.nav ul li{display:inline-block;width:20%} div.section{position:relative;min-height:600px; /*判りやすくするため高さを指定しておく */ } div.section>*{margin-left:200px;} div.section div.nav{margin:0;position:absolute;width:200px;top:0;left:0; height:100%;background-color:white; } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>header</h1> ＿＿<div class="nav"> ＿＿＿<ul> ＿＿＿＿<li><a href="">めにゅー１</a></li> ＿＿＿＿<li><a href="">めにゅー２</a></li> ＿＿＿＿<li><a href="">めにゅー３</a></li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>本文見出し</h2> ＿＿<p>記事</p> ＿＿<div class="nav"> ＿＿＿<h3>目次</h3> ＿＿＿<ul> ＿＿＿＿<li><a href="">めにゅー１</a></li> ＿＿＿＿<li><a href="">めにゅー２</a></li> ＿＿＿＿<li><a href="">めにゅー３</a></li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿</div> </body> </html>
関連するQ&A
- CSSでの背景色の出し方でつまりました。
独学で学んでいる初心者です。 HTML <link rel="stylesheet" href="hp.css" type="text/css"> <div id="container"> <div id="header">ヘッダー</div> <div id="main">メイン</div> <div id="sidebar">サイドバー</div> <div id="footer">フッター</div> </div> CSS #container{ width:940px; overflow:hidden; } #main{ width:620px; float:left; color:black; } #sidebar{ width:320px; float:right; background:green; } #footer{ clear:both color:red; } 簡単なものにしてみても出なかったので、 なぜ出ないのか教えていただければと思います。 ブラウザはオペラです。 サイドバーのグリーンしかつきません。 過去の似たような質問をいくつかみて overflow:hidden; や .clearfix:after { content: ""; display: block; clear: both; } を入れてみてもダメでした。 お願い致します。
- ベストアンサー
- CSS
- CSSが悪いんでしょうか？
下記ソースをIE6で見ていただくとわかりますが、ナビ部分にカーソルをもっていくと、footerの背景が伸びたり縮んだりします。 IE6だけでこのような現象が出ています。 ※手元のデータは外部リンクです。 -----ソース----- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style type="text/css"> body {background: #EFEFEF;} #wrapper{background: #fff; padding: 0; width: 700px; line-height: 1.4em;} #header{border: 3px solid #333;} #nav{float: left; width: 150px;} #nav ul{margin:0; padding:0; list-style-type:none;} #nav li a{display:block; width:150px; margin:0 0 1px 0; background-color:#CCC;} #nav li a:hover{background-color:#FF9900; color:#000000;} #rightbox{padding:0 5px; width: 140px;} #main{border:4px solid #FF0000; float: right; width: 542px;} #footer{background-color:#CCC; clear: both;} </style> <title>test</title> </head> <body> <div id="wrapper"> <div id="header"> <h1>header</h1> </div> <div id="nav"> <ul> <li><a href="#">nav1</a></li> <li><a href="#">nav2</a></li> <li><a href="#">nav3</a></li> </ul> </div><!-- end nav --> <div id="main"> <h2>main</h2> <p>本文</p> <p>本文</p> <p>本文</p> <p>本文</p> <p>本文</p> <p>本文</p> <p>本文</p> </div><!-- end main --> <div id="footer"> footer </div><!-- end footer --> </div><!-- end wrapper --> </body> </html>
- ベストアンサー
- HTML
- IE でカラム落ちします。
CSS 初心者です。 pagebodyの中に ２カラム（mainContentとsidebar1）レイアウトをしたいのですが、 IE6だけ左のmainContentがカラム落ちしてしまいます。 検索して色々試したのですが、私には理解ができず。 教えていただけると助かります。 ーーーーーcssーーーーーーー #container { width: 800px; background: #FFFFFF; margin: 0 auto; text-align: left; } #pagebody{ width: 780px; background: #D6E3FF; } #mainContent { float: leftt; width:600px; padding:0; background: #fff; } #sidebar1 { float: right; width:170px; background: #D6E3FF; } -------html------------- <body> <div id="container"> <!--navi上--> <script src="../js/h_navi.js" type="text/javascript"></script> <div id="pagebody"> <div id="sidebar1"> <ul> <li id="menu1"><a href="#">専属プロヂュース</a></li> <li id="menu2"><a href="#">出演依頼</a></li> <li id="menu3"><a href="#">メンバー紹介</a></li> <li id="menu4"><a href="#">ニュース</a></li> <li id="menu5"><a href="#">最新ニュースはこちらから</a></li> </ul> </div> <!-- end #sidebar1 --> <div id="mainContent"> <h1> メインコンテンツ </h1> <p>テキスト</p> <p>テキスト.</p> <h2>見出し </h2> <p>テキスト</p> <!-- end #mainContent --></div><br class="clearfloat" /></div><script src="../js/footer.js" type="text/javascript"></script> </div> </body> よろしくお願いします。
- 締切済み
- CSS
- html、CSS共に初心者です。３段目の２列目の右に、４段目の右の内容
html、CSS共に初心者です。３段目の２列目の右に、４段目の右の内容を持っていきたいのですが、どうしてもうまくいきません！ 解決できる方がいましたら、どうかご教示願います！ <style type="text/css"> <!-- * { padding : 0 ; margin : 0 ; } #wrapper { width : 700px; margin-left : auto ; margin-right : auto ; background-color : #eeffff ; } #header { width : 700px; height : 150px ; background-color : #335555 ; } #navigation { /* background-color : #cceeee ; */ width : 300px; float : left ; } #navigation h2 { width : 150px; background-color : #99bbbb ; } #navigation ul { width : 150px ; } #navigation li { width : 150px ; height : 30px ; } #navigation a { width : 150px ; height : 30px ; background-color : #bbdddd ; display : block ; } #content { background-color : #eeeeee ; width : 350px; float : right ; } #subcontent { width:200 float : left ; clear :both ; } #subcontent h4 { width : 150px; background-color : #99bbbb ; } #subcontent ul { width : 150px ; } #subcontent li { width : 150px ; height : 30px ; } #subcontent a { width : 150px ; height : 30px ; background-color : #bbdddd ; display : block ; } #thirdcontent { background-color : #eeeeee ; width : 500px; float : right ; } #footer { background-color : #335555 ; width : 700px ; clear : both ; } //--> </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>pppppppppppppppppppppppppppp</h1> </div> <div id="navigation"> <h2>pppppppp</h2> <ul> <li><a href="#">pppppppp</a></li> <li><a href="#">pppppppp</a></li> <li><a href="#">pppppp</a></li> <li><a href="#">pppppppp</a></li> </ul> </div> <div id="content"> <h2>welcome to my hp</h2> <br> <h3>ppppppp</h3> <p>ppppppppppp</p> <h3>pppppppp</h3> <br> <p>pppppppp</p> </div> <div id="subcontent"> <h4>この横にカテゴリーを配置させたいのです</h4> <ul> <li><a href="#">pppppppp</a></li> <li><a href="#">pppppppp</a></li> <li><a href="#">pppppppp</a></li> <li><a href="#">ppppppppp</a></li> </ul> </div> <div id="thirdcontent"> <h4>カテゴリー(これを一段上に)</h4> <br> <h5>pppppppppp</h5> <p>ppppppppp</p> <h5>ppppppp</h5> </div> <div id="footer"> <br> </div> </div> </body> </html>
- ベストアンサー
- HTML
- HTML・CSSタグの書き方教えてください！
画像では見づらいのですが、HOMEの左側にボーダーがピンク色で表示されています。 このHOMEの左側のボーダーを消したい（又は見えなくする）タグを教えてください。 最初のリンクのところだけグループ化して, CSSに{border-left-style: none;}と加えてみたり、 .menu ul li a .first {border-left: none;}等してみたのですが、 変わらず…。 どういうタグを加えれば、左側のボーダーが見えなくなりますでしょうか？ よろしくお願いいたします。 ＜HTML＞ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv= "content-style-type" content= "text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link href="css/style.css"rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <h1> 作りかけページ </h1> <p>テストページ</p> </div><!-- header終わり --> <div class="menu"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">サービス概要</a></li> <li><a href="#">会社概要</a></li> <li><a href="#">お問い合わせ</a></li> <li><a href="#">サイトマップ</a></li> </ul> </div><!-- menu終わり --> <div id="main"> <div id="contents"> ***コンテンツ*** </div><!-- contents終わり --> <div id="leftsidebar"> ***左サイドバー*** </div><!-- sidebar終わり --> </div><!-- main終わり --> <div id="rightsidebar"> ***右サイドバー*** </div><!-- sidebar終わり --> <div id="footer"> ***フッター*** </div><!-- footer終わり --> </div><!-- wrapper終わり --> </body> </html> ＜CSS＞ <style type="text/css"> * { margin: 0; padding: 0; } #wrapper{ width: 760px; /*全体の幅（#wrapper）を760pxの固定幅とする。 */ position: absolute;/*絶対位置*/ left: 50%;/*左端から右方向の位置を指定する */ margin-left: -380px;/*はみ出た半分を戻す */ } /*ヘッダー*/ #header{ width: 758px;/*ヘッダー部分の幅（#content）を758pxとする。*/ height: 200px; background-color:#ffd700; background-repeat: no-repeat; background-position: -50px -70px; text-align: right; border: solid 1px gray; } #header h1{ margin: 0; font-size: 30px; padding: 20px 10px 0px 0px; font-family:arial unicode ms; } #header p{ margin: 0; font-size: 1em; padding-right: 10px; margin-top: 8px; } /*ヘッダー終わり*/ /*body*/ /*menu部分*/ .menu {font-size:20px; height:30px; background-color:#0c907c; text-align:center; } .menu ul{ margin: 0; padding: 0; 760px; } .menu ul li{ float: left; list-style: none; margin: 0; padding: 0; } .menu ul li a{ display:block; width: 151.2px; line-height: 30px; border-left: solid 1px #FF3366; color:#ffffff; text-align: center; text-decoration: none; } .menu ul li a:hover{background-color: #99cc00} /*menu部分終わり*/ #contents{ width: 388px;/*コンテンツ部分の幅（#content）を388pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #leftsidebar{ width: 166px; /*左サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: left;/* 左に配置 */ } #main{ width: 574px; float: left;/* 左に配置 */ } #rightsidebar{ width: 166px;/*右サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #footer{ width:760px; background-color:#FF3366; clear: both;/* float解除 */ height: 50px; }
- ベストアンサー
- HTML
- CSS、width100％でもできる余白
CSSに関する質問です。 上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。 どうすれば中央の背景を横一杯に広げることが出来るでしょうか？ また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。 コードは以下のとおりです。 HTML <html> <head><link rel="stylesheet" type="text/css" href="css.css" /></head> <body> <div id="header"> <div class="centerbox"> <div id="lang"><ul><li>EN</li><li>CZ</li></div> <div id="logo"></div> <div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div> </div> </div> <div id="contents"><div class="centerbox">contents</div></div> <div id="footer"><div class="centerbox">footer</div></div> </body> </html> CSS body{color:white; width:100%;} .centerbox{width:500px; height:100%;} a:hover{background-color:red;} /*base layout*/ #header{width:100%; height:auto; text-align:center; background-color:black;} #lang{text-align:right;} #lang li{list-style:none; display:inline; margin-left:10px} #logo{float:left; width:150px; height:80px; background-color:white;} #menu{text-aign:right; margin-top:50px;} #menu li{list-style:none; display:inline; margin-left:10px} #contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;} #footer{width:100%; height:100px; text-align:center; background-color:black;}
- ベストアンサー
- CSS
- htmlとcssの文章構造、これは正しいですか？
<h1>にテキストを入れることが必須で、 画像の上にマウスをどこに置いてもクリックすれば トップページに行く状態にしたくて下記コードを作りました。 下記コードはサンプルですが、 <!-- 質問の対象はここから --> <!-- ここまで --> の間でhtmlやcssの文書構造にしたがって正しく書かれているか心配です。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <style> #container #header { width: 900px; height: 300px; margin: 0px auto; padding: 0px; top: 0px; left: 0px; float: left; display: block; } #container #header #sample{ height: 170px; position: relative; background-color: #333; /* goo質問用で実際は入れません。画像が表示されないため代わりに。 */ } #container #header #sample h1{ position: absolute; top: 0px; left: 150px; color: #fff; font-size: 11px; font-weight: bold; line-height: 130%; /* h1内の大文字と下の小さい文字との間隔をあけるため */ } #container #header #sample h1 span{ font-size: 22px; line-height: 220%; } #container #header #sample h1 a:link, #container #header #sample h1 a:visited, #container #header #sample h1 a:hover, #container #header #sample h1 a:active{ color: #fff; /* 画像の範囲内は全てリンクさせたいので、マウスにのせたときに色を変える必要はないので変化無し */ text-decoration: none; } #container #header #navigat { width: 900px; height: 40px; float: left; margin: 0px; padding: 0px; list-style-type: none; } #container #header #navigat li { width: 225px; float: left; } </style> </head> <body> <div id="container"> <div id="header"> <!-- 質問の対象はここから --> <div id="sample"> <h1><a href=""><span>サンプル</span><br /><span>サンプルサンプル</span><br />サンプルサンプルサンプルサンプルサンプルサンプル<br />サンプルサンプルサンプルサンプルサンプルサンプル</a></h1> <a href=""><img src="" alt="" /></a> </div> <!-- ここまで --> <ul id="navigat"> <li id=""><a href="">メニュー１</a></li> <li id=""><a href="">メニュー２</a></li> <li id=""><a href="">メニュー３</a></li> <li id=""><a href="">メニュー４</a></li> </ul> </div> </div> </body> </html>
- ベストアンサー
- HTML
- htmlとcssについてなんですが、どうして理解できない部分があるのでどなたかご享受お願いします。
どうしても理解できないというか納得できないところがあってどうしても個人では解決できなかったのでここに来させていただきました。当方まだ勉強し始めたばかりなので、もしかしたら初歩的な事かもしれませんが、よろしくおねがいします。まずはソースを貼ります。 <body> <div id="back"> <div id="content"> <div id="header"> <!--headerEND--> </div> <div id="navi"> <ul> <li class="navi_current"><a class="tub_size" href="#">test1</a></li> <li class="navi_tub"><a href="#">test2</a></li> <li class="navi_tub"><a href="#">test3</a></li> <li class="navi_tub"><a href="#">test4</a></li> <li class="navi_tub"><a href="#">test5</a></li> <li class="navi_tub"><a href="#">test6</a></li> <li class="navi_tub"><a href="#">test7</a></li> </ul> <!--navitEND--> </div> <div id="sidebar"> <div id="image_head1"> <!--image_headEND--> </div> <div id="image_bottom1"> <!--image_headEND--> </div> <!--sidebarEND--> </div> <div id="main"> <div id="image_head2"> <!--image_headEND--> </div> <div id="image_bottom2"> <!--image_headEND--> </div> <!--mainEND--> </div> <div id="footer"> <!--footerEND--> </div> <!--contentEND--> </div> <!--backEND--> </div> </body> </html> ---------css------- /*スタイルの初期化*/ *{ margin:0; padding:0; } /*メイングループのスタイル*/ body { background:#e5e5e5; } #back{ background-color: #000000; width:1024px; height: 100%; } #content{ width:800px; /*↓仮の高さ*/ height:900px; margin-left:auto; margin-right:auto; /*↓仮の背景色*/ background:#4876FF; } #header{ width:800px; height:240px; /*↓仮の背景色*/ background:transparent; } #navi{ width:800px; height:100px; /*↓仮の背景色*/ background:white; } #sidebar{ width:250px; /*↓仮の高さ*/ height:520px; /*↓仮の背景色*/ background:#FF69B4; clear:both; float:left; } #main{ width:550px; /*↓仮の高さ*/ height:520px; /*↓仮の背景色*/ background:#8B8878; float:right; } #footer{ clear:both; width:800px; height:100px; /*↓仮の背景色*/ background:#FFB90F; } /*sidebarとmainの画像headとbottomのスタイル*/ /*ナビゲーション詳細設定*/ #navi ul{ list-style-type:none; width:798px; height:80px; margin-left:auto; margin-right:auto; /*↓仮の背景色*/ background:red; } #navi ul li{ width:114px; height:70px; /*↓仮の背景色*/ background:blue; float:left; } #navi .navi_current{ width:114px; height:70px; display:block; /*↓仮の背景色*/ background:url("images/tub_current.jpg"); } #navi .navi_current a{ width:114px; height:70px; display:block; text-align:center; text-decoration:none; line-height:2em; font-size:20px; font-weight:bold; color:#fff; /*↓仮の背景色*/ background:url("images/tub_current.jpg"); } #navi .navi_tub a{ width:114px; height:70px; display:block; text-align:center; text-decoration:none; line-height:2em; font-size:20px; font-weight:bold; color:#fff; /*↓仮の背景色*/ background:url("images/tabu_base.jpg"); } #navi .navi_tub a:hover{ width:114px; height:70px; display:block; /*↓仮の背景色*/ background:url("images/tabu_hover.jpg"); } ------------- 以上がソースなんですが、このソースでは<div id="back"></div>の高さが、フッター(id名footerのdiv)よりも短くなってしまいます。heightでフッターよりも長く指定すれば問題ないのですが、ちゃんと入れ子になってるはずですし、何故なのかまったくわからずにこのままではすっきりしません。単なる私のミスなのか、それともブラウザのバグか私自身では解決できませんでした。ちなみにすべてタグは手打ちで、確認したブラウザはfirefox3.5.3です。どなたかよろしくおねがいします。
- ベストアンサー
- その他([技術者向] コンピューター)
- ブロック表示すると重なってしまいます！！
下記のｃｓｓとHTMLでWEBサイトを昔作りました 上部に■いねずみ色のブロックを並べて表示しその下に左に 縦にリスト形式でメニューが並び右にピンクのブロックで項目を並べる 形式にしたのですが、右のブロックの項目の下にテキストで文章を入れたり 何かブロックを足そうとするとブロックが重なってしまい、 上手くできませんでした。 どのようにすればうまく行きますか？教えて下さいよろしくお願いします。 /* mycss.css */ html { background-color: aqua; height: 100%; } body{ height: 100%; font-family: Verdana, Arial; font-size: 14px; } body > #container{ height: auto; } #container { min-height: 100%; height: 100%; width: 90%; margin: 0 auto; padding: 0 10px; background-color: #fff; box-shadow: 0 0 3px rgba(0,0,0,0.5); } #header { width: 100%; height: 80px; background: skyblue; border-radius: 20px; } #menu{ margin-bottom: 15px; overflow: hidden; } #main{ overflow: hidden; margin-bottom: 15px; } #contents{ float: left; width: 25%; font-size: 14px; } #contents ul { margin-bottom: 15px; padding: 10px; } #contents dl{ border-bottom: 10px; border-top: 2px solid #ccc; } #contents dd{ border-top: 2px solid #ccc; } #contents ul>li>a{ text-decoration: none; } #contents ul>li:hover { background: orange; } #sidebar { float: right; width: 70%; } #sidebar ul>li { float: left; width: 230px; height: 25px; font-size: 13px; text-align: center; padding: 4px; background: #ffd8ff; margin-right: 10px; margin-bottom: 10px; border-radius: 4px; text-shadow: 0 1px 0 #fff; } #sidebar ul>li:hover { background: #ddd; } #sidebar ul>li>a{ text-decoration: none; display: block; } #footer{ font-size: 12px; color: #ccc; text-align: center; border-top: 1px solid #ccc; padding: 10px 0 20px; } #menu ul>li { float: left; width: 120px; height: 25px; font-size: 13px; text-align: center; padding: 2px; background: #ccc; margin-right: 10px; margin-bottom: 10px; border-radius: 4px; text-shadow: 0 1px 0 #fff; } #menu ul>li:hover { background: #ddd; } #menu ul>li>a{ text-decoration: none; display: block; } ----------以下HTML------------------------------------------------------------------- <!DOCTYPE html> <html lang="ja"> <head> <meta chraset="shift-jis"> <title>ああああ</title> <link rel="stylesheet" href="mycss.css"> </head> <body> <div id="container"> <div id="header"> <h1>テストページ<A></h1> </div> <div id="menu"> <h2>便利リンク</h2> <ul> <li><a href="">Google</a></li> <li><a href="">Youtube</a></li> <li><a href="">【amazon】</a></li> </ul> </div> <div id="main"> <div id="contents"> <dl> <dt>検索エンジン・リアルタイム</dt> <dd> <ul> <li><a href="">CEEK.JP</a></li> <li><a href="">Google</a></li> <li><a href="">buzztter</a></li> </ul> </dd> </dl> <dl> <dt>SNS/検索エンジン/メール/質問サイト</dt> <dd> <ul> <li><a href="">Facebook</a></li> <li><a href=""">Excite</a></li> <li><a href="">Baidu</a></li> </ul> </dd> </dl> </div><!-- #contents --> <div id="sidebar"> <ul> <li><a href=""_blank">BOOK・OFF Online</a></li> <li><a href="" target="_blank">イーブックオフ</a></li> <li><a href="">infoseekニュース</a></li> </ul> </div><!-- #sidebar --> </div><!-- #main --> <div id="footer">Copyright 2018</div> </div><!-- #container --> </body></html>
- ベストアンサー
- CSS
- htmlとcssについてなんですが、どうして理解できない部分があるのでどなたかご享受お願いします。
どうしても理解できないというか納得できないところがあってどうしても個人では解決できなかったのでここに来させていただきました。当方まだ勉強し始めたばかりなので、もしかしたら初歩的な事かもしれませんが、よろしくおねがいします。まずはソースを貼ります。 <body> <div id="back"> <div id="content"> <div id="header"> <!--headerEND--> </div> <div id="navi"> <ul> <li class="navi_current"><a class="tub_size" href="#">test1</a></li> <li class="navi_tub"><a href="#">test2</a></li> <li class="navi_tub"><a href="#">test3</a></li> <li class="navi_tub"><a href="#">test4</a></li> <li class="navi_tub"><a href="#">test5</a></li> <li class="navi_tub"><a href="#">test6</a></li> <li class="navi_tub"><a href="#">test7</a></li> </ul> <!--navitEND--> </div> <div id="sidebar"> <div id="image_head1"> <!--image_headEND--> </div> <div id="image_bottom1"> <!--image_headEND--> </div> <!--sidebarEND--> </div> <div id="main"> <div id="image_head2"> <!--image_headEND--> </div> <div id="image_bottom2"> <!--image_headEND--> </div> <!--mainEND--> </div> <div id="footer"> <!--footerEND--> </div> <!--contentEND--> </div> <!--backEND--> </div> </body> </html> ---------css------- /*スタイルの初期化*/ *{ margin:0; padding:0; } /*メイングループのスタイル*/ body { background:#e5e5e5; } #back{ background-color: #000000; width:1024px; height: 100%; } #content{ width:800px; /*↓仮の高さ*/ height:900px; margin-left:auto; margin-right:auto; /*↓仮の背景色*/ background:#4876FF; } #header{ width:800px; height:240px; /*↓仮の背景色*/ background:transparent; } #navi{ width:800px; height:100px; /*↓仮の背景色*/ background:white; } #sidebar{ width:250px; /*↓仮の高さ*/ height:520px; /*↓仮の背景色*/ background:#FF69B4; clear:both; float:left; } #main{ width:550px; /*↓仮の高さ*/ height:520px; /*↓仮の背景色*/ background:#8B8878; float:right; } #footer{ clear:both; width:800px; height:100px; /*↓仮の背景色*/ background:#FFB90F; } /*sidebarとmainの画像headとbottomのスタイル*/ /*ナビゲーション詳細設定*/ #navi ul{ list-style-type:none; width:798px; height:80px; margin-left:auto; margin-right:auto; /*↓仮の背景色*/ background:red; } #navi ul li{ width:114px; height:70px; /*↓仮の背景色*/ background:blue; float:left; } #navi .navi_current{ width:114px; height:70px; display:block; /*↓仮の背景色*/ background:url("images/tub_current.jpg"); } #navi .navi_current a{ width:114px; height:70px; display:block; text-align:center; text-decoration:none; line-height:2em; font-size:20px; font-weight:bold; color:#fff; /*↓仮の背景色*/ background:url("images/tub_current.jpg"); } #navi .navi_tub a{ width:114px; height:70px; display:block; text-align:center; text-decoration:none; line-height:2em; font-size:20px; font-weight:bold; color:#fff; /*↓仮の背景色*/ background:url("images/tabu_base.jpg"); } #navi .navi_tub a:hover{ width:114px; height:70px; display:block; /*↓仮の背景色*/ background:url("images/tabu_hover.jpg"); } ------------- 以上がソースなんですが、このソースでは<div id="back"></div>の高さが、フッター(id名footerのdiv)よりも短くなってしまいます。heightでフッターよりも長く指定すれば問題ないのですが、ちゃんと入れ子になってるはずですし、何故なのかまったくわからずにこのままではすっきりしません。単なる私のミスなのか、それともブラウザのバグか私自身では解決できませんでした。ちなみにすべてタグは手打ちで、確認したブラウザはfirefox3.5.3です。どなたかよろしくおねがいします。
- ベストアンサー
- HTML
