- ベストアンサー
CSSでレイアウト崩れ、＃rightmenuが下がって余白ができるのはなぜ？
- CSSでレイアウト崩れ、＃rightmenuが下がって余白ができるのはなぜ？
- HTMLとCSSにどこかおかしなところがあればどうか教えてください。
- dreamweaverで作なっているのですが、便利なものでボックスにマウスを寄せると赤いラインでボックスの表示をしてくれます。それを右クリックしてどのdivがそうさせているのか調べたら#contensだとありました。しかし#contensのCSSをチェックしても何が原因なのか分かりません。これはどうしてでしょうか？
- toonie
- お礼率26% (55/210)
- ホームページ作成ソフト
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
そもそもセレクタrightrmenuの間違いはあるし、 全角スペースは入ってるし、 積み木状態のブロック要素。 メチャメチャ・・・ とりあえず、左サイドバーに、float left div#leftmenu { background:aqua; width:169px;float:left; } div#leftmenu a{ display:block;} div#rightrmenu { background:lime; width:630px; float:right; }
その他の回答 (1)
- appano
- ベストアンサー率38% (87/225)
よくわかんないけど 変だとおもうのは margin-left:auto; margin-right:auto; が3箇所もあること。 bodyに一括でするのが主流だとおもいます。 あと <div id="rightbox-top"> のCSSはどうなってますか。
補足
ご指摘ありがとうございます。 まず、#headerと#contens、#footerの margin-left:auto; margin-right:auto; ですが、#bodyに一括で試してみましたが、レイアウトが崩れて、#headerと#contensの内容が左揃えになってしまいました。 #bodyのbackground-imageが1500pxあるのが原因でしょうか？ 本題で下記が#rightbox-topと#rightbox-bottomのCSSです。 ご教授いただけたら幸いです。 #rightbox-top { width:639px; float:right; } #rightbox-top h3 { background-image:url(../image/rightbox_01.png); background-repeat:no-repeat; width:639px; height:30px; margin:0px; text-indent:-9999px; } #rightbox-top p { background-image:url(../image/rightbox_03.png); background-repeat:repeat-y; width:579px; margin:0px; height:auto; padding:0px 30px 0px 30px; float:right; } #rightbox-bottom { background-image:url(../image/rightbox_05.png); background-repeat:no-repeat; width:639px; height:30px; float:right; }
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
回答ありがとうございます。 ご指摘の点を修正したら解決しました! rightmenuがrightrmenuになっていたとは...! 凡ミスです、ありがとうございます!感謝です。 初心者なもので参考書見ながらやってると、どうしてもdivを多用してしまって... きれいなCSSを記述できるようがんばっていきたいと思います!!