隙間ができてしまいます。

解決済

質問者：fgc4812
質問日時：2008/02/05 13:48
回答数：3件

高さ7pxのボックスを作ったのに7px以上の大きさで表示され隙間ができてしまいます。
margin: 0px; padding: 0pxを追加しても解決しませんでした。

http://teatsite.ninja-x.jp/
↑のborderで囲んである部分です。

この隙間の部分を埋めるにはどうすればよいのかご指摘お願いいたします。

以下ソース

【html】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div class="all">
<div class="header">
</div>
<div class="menu">
<div class="font-menu">
<div class="menu-top"></div>
<div class="menu-center">テスト</div>
<div class="menu-bottom"></div>
</div>
</div>
<div class="main">
<div class="font-main">
<div class="main-top">
テスト
</div>
<div class="main-center">
本文テスト
</div>
<div class="main-bottom"></div>
</div>
</div>
<div class="footer">
<div class="font-footer">
テスト
</div>
</div>
</div>
</body>
</html>

【css】

body{
margin: 0px;
padding: 0px;
}
img{
border: 0;
vertical-align: top;
}
.all{
margin: 0px auto 0px auto;
width: 720px;
}
.font-menu{
color: #ffffff;
font-size: 12px;
line-height: 150%;
}
.font-menu a:link{
color: #ffffff;
text-decoration: none;
}
.font-menu a:visited{
color: #ffffff;
text-decoration: none;
}
.font-menu a:hover{
color: #ffffff;
text-decoration: underline;
}
.font-main{
font-size: 12px;
line-height: 150%;
}
.font-footer{
font-size: 12px;
}
.header{
padding: 44px 0px 0px 0px;
height: 56px;
}
.menu{
margin: 0px 20px 0px 0px;
width: 160px;
float: left;
}
.menu-top{/* 問題の部分 */
margin: 0px;
padding: 0px;
width: 158px;
height: 0px;
border: solid 1px #000000;
background-image: url(pic_menu_top.png);
background-repeat: no-repeat;
}
.menu-center{
width: 124px;
height: 22px;
padding: 4px 0px 0px 36px;
background-image: url(pic_menu_center.png);
background-repeat: no-repeat;
}
.menu-bottom{/* 問題の部分 */
margin: 0px;
padding: 0px;
width: 158px;
padding: 0px;
height: 5px;
border: solid 1px #000000;
background-image: url(pic_menu_bottom.png);
background-repeat: no-repeat;
}
.main{
margin: 0px 0px 0px 20px;
width: 520px;
float: left;
background-image: url(pic_main_wp.png);
}
.main-top{
margin: 0px;
padding: 11px 0px 0px 40px;
width: 480px;
height: 29px;
color: #ffffff;
font-size: 16px;
background-image: url(pic_main_top.png);
background-repeat: no-repeat;
}
.main-center{
padding: 40px 40px 40px 40px;
width: 440px;
float: left;
}
.main-bottom{/* 問題の部分 */
margin: 0px;
padding: 0px;
width: 518px;
height: 5px;
border: solid 1px #000000;
background-image: url(pic_main_bottom.png);
background-repeat: no-repeat;
}
.footer{
padding: 14px 0px 0px 200px;
width: 520px;
height: 26px;
text-align: center;
clear: left;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.3

回答者： goldfox
回答日時：2008/02/05 18:00

あ、幅が狭くならなくてもいい（上側の背景画像が下の要素にくっつけばいい）だけなら、

上側の背景画像を、左下配置にでもすればいいです。
background-position: left bottom;

しかし、div多いですね。
もう少し減らしたほうが、管理、編集しやすいと思いますが。
例えば、<div class="header"></div>にはタイトルが入るなら
<h1 class="header"></h1>にするとか。