みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

CSSで謎の空白ができてしまいます。

最近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>

※タイトル画像は消してあります。

投稿日時 - 2008-01-02 14:47:15

QNo.3644448

困ってます

質問者が選んだベストアンサー

こちらからでは、ご指摘の画像は見れません。

class="navi" と class="menu" の間ですよね?
「トップページ」のリンクと白色の間の灰色部分です。

.navi{/* サイト内のナビゲーション */
/*height: 40px;*/
ここを消すだけで間はなくなるのですが。

ソースの方で、「ここ」とか「この上」などの文字は入れれませんか?

投稿日時 - 2008-01-02 22:17:34

お礼

すいません、外部リンク無効のサーバーに画像を上げてました。

ご指摘の通りheightの要素を消したところ正常に表示されました。
こちらの無知で重ねてご迷惑おかけして申し訳ございません。
本当に、本当にありがとうございました。

投稿日時 - 2008-01-02 23:22:47

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

.navi{/* サイト内のナビゲーション */
height: 40px;
ご質問の位置が不明ですが、問題はここかな?

投稿日時 - 2008-01-02 16:09:03

補足

そのCSSを適用した下の背景色と同じ灰色になってる部分です。
わかりづらい説明で申し訳ございませんでした。
とりあえず問題の部分を青色で塗ってみました。どうでしょうか?

http://blog-imgs-16.fc2.com/t/e/s/testestes0101/test2.png

投稿日時 - 2008-01-02 16:29:17

あなたにオススメの質問