※ ChatGPTを利用し、要約された質問です(原文:CSSで謎の空白ができてしまいます。)
CSSで謎の空白ができてしまいます
このQ&Aのポイント
CSSでサイトの構築をしている際に、naviとmenu&mainの間に謎の空白が生じています。marginやpaddingの調整などを試しましたが解決できません。どうすれば良いかご指導ください。
CSSでサイトを作成中に、naviとmenu&mainの間に予期しない空白ができます。marginやpaddingの値を調整しても解決できない場合、どのような対処法があるのか教えてください。
CSSを使用してウェブサイトを作っている際、naviとmenu&mainの間に不正な空白が生じてしまいます。marginやpaddingを0に設定しても解消されず、困っています。どうすればこの問題を解決できるでしょうか?
最近CSSでサイトの構築をしているのですが↓のように途中で
navi(パンくずリンク)とmenu&main(メニューとメイン記事)の間に空白が出来てしまいます。
menuとmainにmargin: 0px;とpadding 0px;をしても駄目でした。
どうすれば良いかご指導お願いします。
http://blog-imgs-16.fc2.com/t/e/s/testestes0101/test.png
以下ソースです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
<!--
body{/* 全体の要素 */
margin: 0px;
color: #555555;
background-color: #E3E5E6;
}
.layout{/* 全体を決める要素 */
margin: 0px auto 0px auto;
width: 850px;
}
.header{/* ヘッダー部分 */
padding: 35px 0px 0px 50px;
height: 65px;
background: url("title_bg.png");
background-repeat: no-repeat;
}
.navi{/* サイト内のナビゲーション */
height: 40px;
padding: 13px 0px 0px 60px;
font-size: 14px;
background: url("menu_bg.png");
background-repeat: no-repeat;
}
.navi a:link{/* ナビゲーション内のリンクの色 */
color: #555555;
}
.navi a:visited{/* ナビゲーション内の訪問済みリンクの色 */
color: #555555;
}
.menu{/* メニュー部分 */
background-color: #FFFFFF;
width: 215px;
float: right;
}
.main{/* メイン部分 */
background-color: #FFFFFF;
width: 635px;
float: right;
}
.footer{/* フッター部分 */
background-color: #FFFFFF;
clear: right;
height: 40px;
}
-->
</style>
</head>
<body>
<div class="layout">
<div class="header">
<a href="index.html"><img src="title.png" border="0"></a>
</div>
<div class="navi">
<a href="index.html">
トップページ
</a>
</div>
<div class="menu">
</div>
<div class="main">
</div>
<div class="footer">
</div>
</div>
</body>
</html>
※タイトル画像は消してあります。
お礼
すいません、外部リンク無効のサーバーに画像を上げてました。 ご指摘の通りheightの要素を消したところ正常に表示されました。 こちらの無知で重ねてご迷惑おかけして申し訳ございません。 本当に、本当にありがとうございました。