※ ChatGPTを利用し、要約された質問です(原文:CSSでレイアウト崩れ、#rightmenuが下がって余白ができるのは)
CSSでレイアウト崩れ、#rightmenuが下がって余白ができるのはなぜ?
このQ&Aのポイント
CSSでレイアウト崩れ、#rightmenuが下がって余白ができるのはなぜ?
HTMLとCSSにどこかおかしなところがあればどうか教えてください。
dreamweaverで作なっているのですが、便利なものでボックスにマウスを寄せると赤いラインでボックスの表示をしてくれます。それを右クリックしてどのdivがそうさせているのか調べたら#contensだとありました。しかし#contensのCSSをチェックしても何が原因なのか分かりません。これはどうしてでしょうか?
CSSでレイアウト崩れ、#rightmenuが下がって余白ができるのは
CSSでレイアウト崩れ、#rightmenuが下がって余白ができるのはなぜ?
あまりCSSに詳しくないものです。どうかご教授ください。
添付画像のようにに、div分けして全体のデザインを制作しています。
#headerの下に#contensがあり、その中に#leftmenuと#rightmenuと区分けしています。
#leftmenuがメニューボタン部分で#rightmenuが情報を表示するコンテンツ部分です。
#contensはそれで閉じ、最後に#footerがあります。
ところが、#rightmenu部分に望んでいない余白ができます。
#leftmenuと頭で揃えたいのですが、何故か220pxほど下がって表示してしまうのです。(paddingやmarginの設定はしていません)
作業はdreamweaverで作なっているのですが、便利なものでボックスにマウスを寄せると赤いラインでボックスの表示をしてくれます。それを右クリックしてどのdivがそうさせているのか調べたら#contensだとありました。
しかし#contensのCSSをチェックしても何が原因なのか分かりません。
これはどうしてでしょうか?
私個人の知識ではどうしても分かりかね質問させていただきました。
HTMLとCSSにどこかおかしなところがあればどうか教えてください。
よろしくお願いします。
HTML-----------------
<body>
<div id="header">
<h1>タイトル</h1>
</div>
<div id="contens">
<div id="leftmenu">
<a href="" id="ボタン1"></a>
<a href="" id="ボタン2"></a>
<a href="" id="ボタン3"></a>
<a href="" id="ボタン4"></a>
<a href="" id="ボタン5"></a>
<a href="" id="ボタン6"></a>
<a href="" id="ボタン7"></a>
</div>
<div id="rightrmenu">
<div id="rightbox-top">
<h3>本文</h3>
<p>挨拶文</p>
</div>
<div id="rightbox-bottom">
</div>
</div>
</div>
<div id="footer">
<p class="copyright">Copyrightうんぬん</p>
</div>
</body>
CSS-----------------
body {
background-image:url(../image/top.jpg);
background-position:top center;
background-repeat:no-repeat;
background-color:rgb(237,232,195);
}
div#header {
width:800px;
height:139px;
margin-left:auto;
margin-right:auto;
}
div#contens {
width:800px;
height:auto;
min-height:520px;
margin-left:auto;
margin-right:auto;
}
div#leftmenu {
width:161px;
}
div#rightmenu {
width:639px;
float:right;
}
div#footer {
clear:both;
height:100px;
background-image:url(../image/top-bottom.jpg);
background-position:top center;
background-repeat:no-repeat;
background-color:rgb(237,232,195);
margin-left:auto;
margin-right:auto;
}
お礼
回答ありがとうございます。 ご指摘の点を修正したら解決しました! rightmenuがrightrmenuになっていたとは...! 凡ミスです、ありがとうございます!感謝です。 初心者なもので参考書見ながらやってると、どうしてもdivを多用してしまって... きれいなCSSを記述できるようがんばっていきたいと思います!!