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

解決済

質問者：fgc4812
質問日時：2008/01/03 19:41
回答数：4件

前回の質問のときは縦幅の設定heightからpaddingの引き算を忘れて空白が出来ていました。
今回はそれに気をつけて横幅のweightを設定したのですがまたも空白が出来てしまいました。

こんな状態です↓
http://teatsite.ninja-x.jp/

1.この空白はどうすれば無くなるのか。
2.ついでによろしければメニュー部分の画像を隙間無く並べる方法

以上の2つ（片方だけでも良いです。）の御教授お願いします。

以下ソースです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">

</style>
</head>
<body>
<div class="layout">
<div class="header">
</div>
<div class="navi">
<a href="index.html">
トップページ
</a>
</div>
<div class="menu">
<div class="menu-category">
<a href="index.html"><img src="dummy_menu_category.png" border="0"></a>
<a href="index.html"><img src="dummy_menu_category.png" border="0"></a>
<a href="index.html"><img src="dummy_menu_category.png" border="0"></a>
</div>
</div>
<div class="main">
</div>
<div class="footer">
</div>
</div>
</body>
</html>

通報する

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

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： outbrave
回答日時：2008/01/05 10:37

.layout{/* 全体を決める要素 */

margin: 0px auto 0px auto;
width: 850px;
background-color: #FFFFFF; /*ここ追加*/
}

見かけ上、背景色が白ければいいのかな。

この回答への補足

真ん中の部分だけを白色にしたかったのですが、CSSだけでするのは難しいことなのかもしれませんね。
とりあえず白色の画像を真ん中に持ってくるという方法で解決しました。

これで回答を締め切らせてもらいます。
回答してくださった皆さん、大変ありがとうございました。

補足日時：2008/01/05 13:36

通報する

- 0
- 件

通報する

No.3

回答者： goldfox
回答日時：2008/01/04 13:29

> その下の背景色が表示されている部分です。

そこって要するに「メイン部分」ですよね？
footerがメニューリンクの「下」に出るようになっているため、
メインの中身がなければ、空白になってしまう部分。
（border付きのページでmain内に中身を書けば分かると思いますが…）
mainは「中身がなくても」menu-categoryからfooterまでの間に広がっていてほしいとか、そういうことなのでしょうか？
横の空白は関係ないんでしょうか？

この回答への補足

menuの部分が縦に広がったらmainもmenuと同じ高さに広がるようにしたいんです。

横の空白は関係はないです。

補足日時：2008/01/04 18:01

通報する

- 0
- 件

通報する

No.2

回答者： goldfox
回答日時：2008/01/04 02:16

えーと、mainのブロックの左に空白ができる、ということですか？

float: right;を外せば左にぴったり来ますが、そういうことですか？
もしそうならfloat: right;をfloat: left;にすればよいかと思いますが、これではだめですか？

この回答への補足

mainの下のほうです。

ただいま目印に「ここはメニュー部分」とつけてみました。
その下の背景色が表示されている部分です。

補足日時：2008/01/04 12:07

通報する

- 0
- 件

通報する

No.1

回答者： outbrave
回答日時：2008/01/03 22:36

>2.ついでによろしければメニュー部分の画像を隙間無く並べる方法

.menu{/* メニュー部分 */
/*padding: 0px 30px 0px 15px;*/
padding: 0;

>1.この空白はどうすれば無くなるのか。
.main{/* メイン部分 */
padding: 0px 30px 0px 15px;
background-color: #FFFFFF;
width: 590px; /*ここが大きいので下に落ちている*/
float: right;
}
しかしメニュー部分を padding: 0; にすることで、width: 631px; でもOKかな。

配置を確認するには、全てに border を入れるとよいです。
border: solid 1px #color;

この回答への補足

1
.menu{/* メニュー部分 */
padding: 0px 30px 0px 15px;

の部分をpadding 0;にしてみましたがだめみたいです。↓のようになってしまいました。
http://teatsite.ninja-x.jp/test3.html
この部分はメニュー画像の下にカテゴリー画像を設置するために意図的に書いたので、たぶん違うと思います。

2
borderで配置を確認したところ下に落ちているみたいではないみたいです。
http://teatsite.ninja-x.jp/test2.html
※solid 1px×2の分を左右のpaddingから引いてあります。

補足日時：2008/01/04 00:58

通報する