hover擬似要素でfloatした段組が崩れる
- 以下の様なHTMLとCSSで、hover擬似要素でボタン押下を表現したリストのリンクが、IE6でマウスを乗せると、floatした段組が崩れる問題が発生しています。
- この問題の原因を知りたいです。
- どなたかご指摘いただけると助かります。
- ベストアンサー
hover擬似要素をかけるとfloatでの段組が崩れる
宜しくお願い致します。 以下の様なHTMLとCSSで、hover擬似要素でボタン押下を表現したリストのリンクが、IE6（他ブラウザは現在確認出来ていません）でマウスを乗せると、floatした段組が崩れそのリストメニューの高さまで段組の親要素が縮んでしまいます。 原因にお気付きの方は、どうかご指摘頂けます様、お願い致します。 <!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=Shift-JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- /* 全体 -------------------------------------------------- */ body { background-color: ivory; width: 800px; margin: auto; font-size: small;} /* コンテナ -------------------------------------------------- */ div#container { width: 948px; border-left: 1px solid maroon; border-right: 1px solid maroon; background-color: white;} /* 段組 -------------------------------------------------- */ div#main { width: 700px; padding: 10px; float: right; border-left: dashed 1px maroon;} div#navigation { padding: 10px;} /* clearfix */ div#contents:after { content: "."; display: block; clear: both; height: 0px; font-size: 0px; visibility: hidden;} div#contents { display: inline-block; min-height: 1%;} /* Mac版IE用ハック開始 \*/ * html div#contents {height: 1%;} div#contents {display: block;} /* Mac版IE用ハック終了 */ /* 見出し -------------------------------------------------- */ h1 { background-color: maroon; font-size: xx-large; color: #ff9999; margin: -10px -10px 0px -10px; padding: 13px 13px 3px 13px; text-align: center;} /* ナビゲーション -------------------------------------------------- */ div#navigation ul { margin: 0px 0px 0px -10px;} div#navigation li { list-style-type: none; margin: 10px auto; width: 160px;} div#navigation a { text-decoration: none; display: block; width: 100%; font-weight: bold; color: #ff9999; padding: 3px; text-align: center; background-color: maroon; border: outset 3px maroon;} div#navigation a:hover { border: inset 3px maroon;} /* フッター -------------------------------------------------- */ address#footer { margin: 0px -10px -10px -10px; padding: 3px 13px 13px 13px; background-color: maroon; color: #ff9999; text-align: right;} --> </style> </head> <body> <div id="container"> <h1>ページタイトル</h1> <div id="contents"> <div id="main"> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> </div> <div id="navigation"> <ul> <li><a href="" title="">Home</a></li> <li><a href="" title="">abc</a></li> <li><a href="" title="">def</a></li> <li><a href="" title="">ghi</a></li> <li><a href="" title="">jkl</a></li> <li><a href="" title="">mno</a></li> <li><a href="" title="">pqr</a></li> </ul> </div> </div> <address id="footer">フッター</address> </div> </body> </html>
- prussianblue
- お礼率85% (46/54)
- CSS
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
今IEが見れない環境なので、IEで実際どの様にご覧になっているのかわからないのですが、Safariで見た結果「マウスを乗せ」ても、「floatした段組が崩れそのリストメニューの高さまで段組の親要素が縮んで」しまうという現象は起こりません。CSSでの設定通り、マウスオーバーで起こる変化は、ボーダーのスタイル変更のみです。 ただし…多分、質問者様が意図している様な（IEで見えているだろう）レイアウトからは程遠いレイアウト崩れが最初から起きている様に思います。私が今見ている状態を簡単に説明すると： (1)div#navigationがdiv#containerの中央に (2)div#mainがdiv#navigationの左側の領域にセンタリング状態で配置 (3)div#navigation a を含む<li><a href="" title="">Home</a></li>の背景色がdiv#mainの中の<p>段落</p>の数の分だけ上にびょーんと伸び、次の<li><a href="" title="">abc</a></li>は<p>段落</p>が終了（＝#mainの中の要素が終了）した時点からようやく始まり、それ以後のメニューは正常 という状態になっています。 body、div#container、h1、div#navigation ul、div#navigation li 、div#navigation a、div#navigation a:hover、address#footerだけで構成したHTMLを表示させてみたところ、少なくとも(3)の症状だけは見られなくなりました。質問者様も一度、その状態でIEの表示結果を確認してみて下さい。もしそれでマウスオーバーの際の結果が問題なかった場合は、不具合の原因はfloat絡みのコンテナブロックの設定にありますね。 ※もしも私が見ている状態が「それでいいんじゃ」という事でしたら、ご容赦を。
関連するQ&A
- 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
- floatしたdiv内の要素について
下記のようなHTML、CSSで、 floatしたdiv「leftside」内にp要素を配置すると p要素の上下に空間が発生します。 このp要素の上下の空間はなんでしょうか？ どうすれば消えますか？ ちなみに、スタイルシートから「leftside」の「float: left;」を削除するとp要素の上下空間はなくなります。 または、pタグで囲まなくても空間は消えます。 よろしくお願いいたします。 ■Html <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="test_style.css" media="all"> </head> <body> <div id="warapper"> <!-- ヘッダ --> <div id="head"> </div> <!-- 左サイト --> <div id="leftside"> <p class="test">leftside</p> </div> <!-- コンテンツ --> <div id="contents"> contents </div> <!-- フッター --> <div id="footer"> <p>fotter</p> </div> </div> </body> </html> ■Css @charset "utf-8"; body{ /*font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/ font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-size: 90%; text-align:center; padding: 0; margin: 0; background-color: #fff; } #warapper{ text-align: left; width: 800px; margin:0 auto; /*ページ全体をセンタリングする指定*/ padding: 0; background-color: #ffffcc; } #head{ background-color: #000; height: 160px; margin: 0 0 20px 0; padding: 0; position: relative; /*ロゴ画像を右下に配置するため*/ } #topbar{ background-color: #dcdcdc; height: 50px; margin: 0 0 20px 0; padding: 0; } #leftside{ background-color: #ccc; width: 180px; float: left; padding: 0; margin: 0 0 20px 0; /*下方向に余白を設ける*/ overflow:hidden; } #contents{ background-color: pink; width:600px; float: right; padding: 0; margin: 0 0 20px 0; /*下方向に余白を設ける*/ } #contents_all{ background-color: pink; margin: 0 0 20px 0; /*下方向に余白を設ける*/ padding: 0 0 0 0; } #footer{ background-color:#666; text-align: center; clear: both; margin: 0; padding: 0.5em 0; } .test { background-color: red; }
- 締切済み
- CSS
- 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
- 直接書き込むCSSを外部ファイルに設定したい
CSS初心者です。下記の携帯テンプレートを使ってサイトを作りたいです。 タグに直接書き込むタイプのCSSが多いのですが、 このソースの一部を外部ファイルに設定するには、どういう書き方をしたら良いでしょうか？ 【外部に設定したい項目】 ★タイトル下線のMARGIN-RIGHT: 47% ★真ん中の線(画像位置)BACKGROUND-POSITION: 53% ★一番下線のMARGIN-LEFT: 53%; 外部にしたい理由は携帯とパソコンで見た時にそれぞれ線の位置を変えたいと思って いるからです。出来ますでしょうか？CSSに詳しい方、どうかお願いします(>_<) 【全タグ】 <html> <HEAD> <TITLE>TITLE</TITLE> </HEAD> タイトル <H1 style="PADDING-LEFT: 7px; MARGIN: 0px; PADDING-TOP: 10px; BACKGROUND-COLOR: #ffffff"></H1> <DIV style="BACKGROUND-POSITION: 53% 40%; BACKGROUND-IMAGE: url(http://deai.mokuren.ne.jp/up/src/up3891.gif); BACKGROUND-REPEAT: repeat-y"> <DIV style="BORDER-TOP: #000000 1px solid; MARGIN-RIGHT: 47%"> <P style="PADDING-RIGHT: 0px; PADDING-LEFT: 15px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 7px"></P></DIV> <DIV style="MARGIN-LEFT: 40%; PADDING-TOP: 17px"> <DIV style="WIDTH: 300px; MARGIN-RIGHT: 20px"> <H2 style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 13px; PADDING-BOTTOM: 2px; MARGIN: 0px 0px 3px; PADDING-TOP: 3px; BACKGROUND-COLOR: #000000"> <font color="#ffffff">コンテンツ</font></H2></font> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説２</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">その他</a></div> </DIV></DIV> <DIV style="MARGIN-LEFT: 53%; BORDER-BOTTOM: #000000 1px solid"> <P style="PADDING-RIGHT: 5px; MARGIN: 0px; PADDING-TOP: 17px" align=right></DIV></DIV> <P style="PADDING-RIGHT: 5px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px; MARGIN: 0px; PADDING-TOP: 5px" align=right> </HTML>
- 締切済み
- CSS
- IE7のfloatの回り込みがうまくきません
お疲れ様です。いつもお世話になっております。 FF2、Opera、IE7という3つのブラウザでコーディングしたHTMLをチェックしている状態です。 下記に問題のHTMLとCSSを記述します。 <div id="common_border"> <div id="common_border_side"> <div id="common_border_top"></div> <div id="l_navi"> <ul> <li id="l_navi_1"><a href="">ナビ1</a></li> <li id="l_navi_2"><a href="">ナビ2</a></li> <li id="l_navi_3"><a href="">ナビ3</a></li> </ul> </div> <div id="explain"> <h1>説明</h1> <dl> <dt>内容1</dt> <dd>説明が入ります。</dd> </dl> <dl> <dt>内容2</dt> <dd>説明が入ります。</dd> </dl> </div> <div id="common_border_bottom"></div> </div> </div> </div> common_borderのtop,bottomは丸角の枠画像です。 sideには1pxの背景画像が入ります。 /*---------丸角の枠線を表示するCSS--------------*/ #wrapper #common_border{ width:736px; margin:10px 82px; padding:0; } #wrapper #common_border_top{ background:url(../img/common_border_top.jpg) no-repeat; height:10px; padding:0; margin:0; } #wrapper #common_border_side{ background:url(../img/common_border_back.jpg) repeat-y; margin:0; padding:0; } #wrapper #common_border_bottom{ background:url(../img/common_border_bottom.jpg) no-repeat; height:20px; padding:0; margin:0; } /*----------------左のナビゲーション------------------*/ #wrapper #l_navi{ float:left; margin:0; padding:0; width:200px; } #wrapper #l_navi ul{ list-style:none; padding:0 20px; margin:25px 0; } #wrapper #l_navi ul li{ margin:0 0 5px; } /*-------------説明部分-----------------*/ h1{ text-indent:-9999px; background:url(../img/productexplain.jpg) no-repeat; margin:20px 0 10px 180px; } p{ margin:0; padding:0; } #explain{ text-align:left; width:506px; margin:0 35px 30px 15px; padding:0; } #explain dl dt{ color:#8E2E00; } 差し障りのないようところどころ端折ってます。 出来上がりは適当ですが、下記のようになります 丸角の枠線画像（上） ナビ1 h1の説明 ナビ2 説明1 ナビ3 説明2 丸角の枠線画像（下） ナビをfloat:leftにしていて、explainにはfloatをかけていません。 explainをfloatすると、なぜか丸角の枠線画像（下）の下にナビ、explainともに表示されてしまうためです。 なので、ナビにfloatをかけた状態で、そのナビを内包するかたちでexplainに左のmarginを210pxとり、 explainのwidthを680pxほどにすることで、OperaとFFはきれいに表示されました。 ボーダーを表示させると 丸角枠線画像（上） ┏━━━━━━━━━━━ ┃┏━━━┓ h1 ┃┃ナビ１┃ 説明 と、強制的な感じです。 ところが、IE7だとこれがうまくいかず、つまり、floatされたナビを内包できずに、widthが足りず、 丸角の枠736px-（ナビ200px+説明680px）でマイナスになり、説明がナビの下に来てしまうような状態です。 なんとか足りるようにピクセルを合わせると、IE7ではきれいに見えるが、Opera,FFで崩れてしまいます。 IE7だけのハックなどがあるようなのですが、何分まだ慣れてなくて、自力で解決するのは難しそうです。 上記のソースを見て何か助言いただくことができたら、お願いします。
- ベストアンサー
- HTML
- 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
- IE9でa:hoverが効かない
IE9でa:hoverが効かなくて困っています。 droppy.jsというJavaScriptを使ってドロップメニューにしているのが原因でしょうか？ 以下ソースです。 html <div id="navi"> <div class="inner"> <ul> <li><a href="サイトトップのURL">トップ</a></li><!-- ←ここのa:hoverは正常に動作する --> <li> <a href="メニュー1のURL">メニュー1</a><!-- ←ここのa:hoverは正常に動作する --> <ul> <li><a href="メニュー1-1のURL">メニュー1-1</a></li><!-- ←ここのa:hoverが効かない --> <li><a href="メニュー1-2のURL">メニュー1-2</a></li><!-- ←ここのa:hoverが効かない --> </ul> </li> </ul> </div> </div> ｃｓｓ #navi { background: url(naviの背景画像のURL) repeat-x left top #000000; border-bottom: 1px solid #000000; -moz-box-shadow: 0 0 3px #484848;/* Firefox用 */ -webkit-box-shadow: 0 0 3px #484848;/* Safari,Google Chrome用 */ box-shadow: 0px 0px 3px rgba(0,0,0,0.5); } #navi .inner { margin: 0 auto; width: 940px; } #navi .inner ul li { float: left; margin: 15px 0; padding: 0 10px; position: relative; } #navi .inner ul li a { padding: 5px 11px; color: #ffffff; text-decoration: none; } #navi .inner ul li a:hover { border: 1px solid #ffffff; padding: 5px 10px; color: #333333; background: #ffffff; background:linear-gradient(#eaeeee, #e2e3e3); background: -moz-linear-gradient(top, #eaeeee, #e2e3e3);/* Firefox用 */ background: -webkit-gradient(linear, left top, left bottom, from(#eaeeee), to(#e2e3e3));/* Safari,Google Chrome用 */ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#eaeeee, endcolorstr=#e2e3e3);/* IE6,7 */ -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#eaeeee, endcolorstr=#e2e3e3)";/* IE8 */ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; behavior: url(/PIE.htc); } #navi .inner ul li ul { position: absolute; top: 39px; left: 0; zoom: 1; display: none; background: #dae4d7; border: 1px solid #8db0a0; border-top: none; border-bottom: none; font-size: 85%; width: 150px; } #navi .inner ul li ul li { float: none; padding: 0; margin: 0; background: none; } #navi .inner ul li ul li:hover { background: none; } #navi .inner ul li ul li a { color: #2d595f; text-align: left; display: block; background: url(icon画像のURL) no-repeat 5px center; border-top: 1px solid #ffffff; border-bottom: 1px solid #8db0a0; padding: 5px 5px 5px 20px; } #navi .inner ul li ul li a:hover { background: url(hoer用icon画像のURL) no-repeat 5px center #2d595f; color: #ffffff; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; border-top: 1px solid #2d595f; border-bottom: 1px solid #2d595f; border-left: none; border-right: none; padding: 5px 5px 5px 20px; margin: 0; } どこがおかしいのかわからないのでnaviv部分全体を載せます。 宜しくお願いします。
- ベストアンサー
- CSS
- floatを使ったレイアウトのくずれについて
Dreamweaver8で2カラムレイアウトのサイトを制作しています。 一番上からheader、トップ画像、ナビゲーションが続き、その下に2カラムのボックスがあります。 ボックスの左をコンテンツのAボックス(main02)、ボックスの右側をメニューのBボックス(navcontainer)とします。 containerの幅は776px、Aボックスの幅510px、Bボックスの幅230pxとし（各々width,paddingの合計）containerの幅に収まるように定めています。 しかし、Dreamweaverの作成画面では、Aボックスの文字は定めた幅510pxで折り返されるにもかかわらず、ボックス自体ははそれより100px以上も多い625pxまで広がり、Bボックスとの合計が766pxに収まりきれないのでメニューのBボックスは上、コンテンツのAボックスが下にずれてしまいます。 それでもプレビューすると、IE7、safari、firefox では正常に表示され、IE6だけが制作画面のとおりずれて表示されます。 どうしてこのようになるのでしょうか。 間違いを訂正いただけるとありがたいです。 /* CSS */ body { margin: 0; background-image:url(bg.gif); background-position:top; background-repeat:repeat-x; } #container { width:776px; margin:0px auto 0px auto; background-image:url(main.gif); background-repeat:repeat-y; } #header { width:776px; height:65px; margin :0px auto 0px auto; } #main02 { width:410px; float:left; font-size:13px; color:#333; text-align:left; line-height: 1.5em; padding: 20px 50px 20px 50px; } #navcontainer{ width: 200px; margin-bottom:15px; float:right; padding: 30px 30px 0 0; } #navcontainer ul{ list-style: none; margin: 0; padding: 0; border: none; line-height:120%; font-size:12px; font-weight:bold; } #navcontainer li{ margin-bottom: 5px; border-bottom:1px dashed #666; background:url(menu_list.gif) left center; background-repeat:no-repeat; padding-left:15px; } #navcontainer li a{ display: block; padding: 5px 5px 5px 7px; text-decoration: none; width: 100%; } .clear { clear: both; } -------------- /* html */ <html> <body> <div id="container"> <div id="header"><img src="○○" </div> <div id="top2_m"><img src="○○" /></div> <div id="navi"><a href=○○></div> <div id="navcontainer"> <ul id="navlist"> <li>○○</li> <li>○○</li> <li>○○</li> </ul> </div> <div id="main02">○○</div> <div class="clear"></div> <div id="main">○○</div>/*ここから1カラム*/ <div id="footer">○○</div> </div> </body> </html>
- ベストアンサー
- CSS
- レイアウト、フッターが崩れてしまいます。
横800pxの外枠にフッター部分を枠内の下に綺麗に収まるよう配置したいのですが、ブラウザーで確認するとフッター部が上に配置されてたり、mainのテキスト部分や外枠のレイアウトが表示されてなかったり、崩れてしまいます。またｓａｆａｒｉ、firefoxを使って確認してるのですが、同じように表示されません。どこが間違っているのか、教えて頂けると助かります。 ＊html <body> <div id="wrapper"> <div id="headir"> <h1>The highest hiphop design All group</h1> <div class="logo"><img src="＃”></div> </div> <span id="menu"><ul><li><img src="＃" alt="＃" width="200" height="100" /></li><li><img src="＃" alt="＃" width="200" height="100" /></li><li><img src＝”＃" alt="＃" width="200" height="100" /></li><li><img src="＃" alt="＃" width="200" height="100" /></li></ul></span> <h2><img src="＃" alt="＃" /></h2> <span id="sidemenu"> <ul> <li><a href="#">TOP</a></li> <br /> <li><a href="#">NEW</a></li> <br /> <li><a href="#">Line</a></li> <br /> <li><a href="#">Fine</a></li> <br /> <li><a href="#">Mail</a></li> <br /> <li><a href="#">TOP02</a></li> <br /> <li><a href="#">NEW02</a></li> <br /> <li><a href="#">Line02</a></li> <br /> <li><a href="#">Fine02</a></li> <br /> <li><a href="#">Mail02</a></li> </ul> </span> <div id="main"> ～～ ～～ </div> <div id="footer"> <span align="center">©＃</span> </div> </div> </body> </html> ＊css body { font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; margin:0px; padding:0px; } #wrapper { margin: auto; padding:auto; height: 100%; width: 800px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-left-color: #000000; border-bottom-style: solid; border-bottom-color: #000000; } #headir { padding: 0px; margin:0px; height: 220px; width: 800px; } #headir h1{ margin: 0px; padding: 0px; height:20px; font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; font-size:small; text-align: left; } .logo{ padding-bottom:20px;} #menu ul { padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width:800px; height:100px; list-style-type : none; } #menu li{ display:inline; padding-bottom:20px; } span#sidemenu { height: 300px; width: 50px; float:left; margin-top: -19px; margin-right: 8px; margin-bottom: 0px; margin-left: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; font-size: smaller; } span#sidemenu li{ list-style-type:none; text-indent: -30px; } span#sidemenu{ padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; } div#main { margin-top: 20px; margin-right: 40px; margin-left:30px; margin-bottom:20px; font-size: small; text-align: left; left: 150px; light: 50px; height: 400px; width: 600px; } div#main p { padding-left:10px; padding-light:20px; padding-top:10px; padding-bottom:20px; } #footer{ height:３0px; width:100%; background-color: #CC9933; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border: 1; border-left-width: 1px; border-left: 1; z-index: 2; position: relative; margin: 0; padding: 20px 0 0 20px; }
- 締切済み
- その他([技術者向] コンピューター)
- カラムの高さを合わせる
ソース記述の為、長いですがお付き合いください。 http://okwave.jp/qa/q7547642.htmlでした質問を変えたものです。 html5で以下の様に記述しました <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="author" content="へのへのもへじ"> <meta name="keywords" content="へのへのもへじ"> <meta name="description" content="へのへのもへじ"> <link rel="stylesheet" href="style.css"> <title>へのへのもへじ</title> </head> <body> <div id="head"> <h1>へのへのもへじのサイト</h1> </div> <div id="container"> <div id="header"><img src="title.png" alt="へのへのもへじ" width="100%" height="120"></div> <div id="menu"> <ul style="list-style-type: none"> <li><a href="index.html">1</a></li> <ul style="list-style-type: none"> <li><a href="index.html">2</a></li> <li class="sub"><a href="index.html">2-1</a></li> <li class="sub"><a href="index.html">2-2</a></li> <ul style="list-style-type: none"> <li><a href="index.html">3</a></li> <li class="sub"><a href="index.html">3-1</a></li> <li class="sub"><a href="index.html">3-2</a></li> <ul style="list-style-type: none"> <li><a href="index.html">4</a></li> <li class="sub"><a href="index.html">4-1</a></li> <li class="sub"><a href="index.html">4-2</a></li> <ul style="list-style-type: none"> <li><a href="index.html">5</a></li> <li class="sub"><a href="index.html">5-1</a></li> <li class="sub"><a href="index.html">5-2</a></li> </ul> </div> <div id="contents"> <p> 本文<br> 本文<br> 本文<br> 本文<br> </p> <p>★</p> <p>本文<br> 本文<br> 本文<br> 本文<br> </p> </div> </div> <div id="footer">フッター</div> </div> </div> </body></html> そしてcssに @charset "UTF-8"; * { margin:0; padding:0; } body { line-height:150% } #head { width:100%; padding:22px; text-align:center; margin:0 auto; font-size:10px; text-decoration:none; } #container { width:900px; margin:0 auto; min-height:1000px; } #header { width:898px; height:120px; margin:0 auto; border-top:solid 1px #000000; border-left:solid 1px #000000; border-right:solid 1px #000000; border-bottom:solid 8px #0000ff; } #menu { float:left; width:148px; min-height:1018px; background-color:#aaffdd; border-top:dotted 1px #666666; border-left:solid 1px #666666; border-right:solid 1px #666666; } #menu a{ display:block; height:100%; padding:11px 9px 11px 9px; margin:0 auto; text-decoration:none; border-top:dotted 1px #666666; background-color:#aaffdd; list-style:none; } #menu li.sub a{ display:block; height:100%; padding:9px 3px 9px 22px; text-decoration:none; font-size:small; font-color:red; border-top:dotted 1px #666666; background-color:#aaffdd; list-style:none; } #menu a:hover{ background-color:#FFE4E1; } #menu li.sub a:hover{ background-color:#FFE4E1; } #contents { float:left; width:731px; min-height:1000px; margin:0 auto; padding:9px 9px 9px 9px; border-top:solid 1px #000000; border-right:solid 1px #000000; text-align:center; background-color:#fce5fd; } #contents p{ margin-top:2em } #footer { clear:both; width:900px; height:100%; margin:0 auto; padding-top:10px; padding-bottom:10px; font-size:small; color:#ffffff; text-align:center; background-color:#555555; } と書きました。 ここで現在のカラムの高さだと本文領域とメニュー領域が合ってるのですが、 本文領域がグーッと延びて、、、 例えば<p>★</p>の部分が「<p>★</p><p>★</p><p>★</p><p>★</p><p>★</p><p>★</p><p>★</p> <p>★</p><p>★</p><p>★</p><p>★</p><p>★</p><p>★</p><p>★</p> <p>★</p><p>★</p><p>★</p><p>★</p><p>★</p><p>★</p><p>★</p>」みたいになったら、 メニュー領域のmin-heightを追い越して長くなります。 この時にメニュー領域が寸足らずになって、 今回で言うと緑の部分が千切れて白い背景の部分になります。 右の本文領域が長くなってもメニュー領域がその長さに付き合って同じ高さに揃えるにはどうしたらいいでしょうか？ また、メニューの5-2の下にborderを引きたいのですが、 現状だとメニュー全体の下に入ってしまいます。 他の各メニューと同じような位置でborderを引くにはどうしたらよいでしょうか？ 宜しくお願いします。
- 締切済み
- CSS
お礼
本当は、こう（以下の修正ソース）したかったんです（汗）。 おっしゃって頂いたfloat周辺の問題でした。floatされた左右カラムの要素と、displayをblockにしていたa要素周辺のwidthの問題みたいでした。 本当に、有難う御座いました。そして、お騒がせ致しました。 safari環境は無いのですが、火狐で確認したら、今回は大丈夫みたいです（汗）。 /* 全体 */ body { background-color: ivory; width: 950px; margin: auto; font-size: small;} /* コンテナ */ div#container { width: 948px; border-left: 1px solid maroon; border-right: 1px solid maroon; background-color: white;} /* 段組 */ div#main { width: 707px; padding: 10px; float: right; border-left: dashed 1px maroon;} div#navigation { width: 200px; padding: 10px; float: left;} /* clearfix */ div#contents:after { content: "."; display: block; clear: both; height: 0px; font-size: 0px; visibility: hidden;} div#contents { display: inline-block; min-height: 1%;} /* Mac版IE用ハック開始 \*/ * html div#contents {height: 1%;} div#contents {display: block;} /* Mac版IE用ハック終了 */ /* 見出し */ h1 { background-color: maroon; font-size: xx-large; color: #ff9999; margin: 0px; padding: 3px; text-align: center;} /* ナビゲーション */ div#navigation ul { margin: 0px; padding: 0px;} div#navigation li { list-style-type: none;} div#navigation a { text-decoration: none; display: block; width: 160px; margin: 10px auto; font-weight: bold; color: #ff9999; padding: 3px; text-align: center; background-color: maroon; border: outset 3px maroon;} div#navigation a:hover { border: inset 3px maroon;} /* フッター */ address#footer { padding: 3px; background-color: maroon; color: #ff9999; text-align: right;}