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

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

締切り済みの質問

CSSを独学中です。が背景の設定がどうしてもうまくいきません。

CSSを使ってwebを作ろうとしている素人です。

header(見出しのロゴなど)
main
この中にコラムを2つ。左コラムに縦並びメニュー
 背景画像あり。
footer(copyright表記など)
 色はグレー。

いろいろ参考資料を見ながら、このような構成にしたのですが、
本文(main)のところが、footerと同じグレー1色になってしまい、
予定していた背景画像が表示されません。
とりあえず全体的なレイアウトは何とか大丈夫なようなのですが、
何か原因がお分かりでしたらご教示いただけると幸いです。
おそらく単純なミスなのかもしれませんが。

以下に、cssとhtmlファイルの抜粋を載せておきます。

-------
css
-------

body {
margin: 0;
padding: 0;
background-color: #999999;
color: #FFFFFF
}
.header {略}
.main {
padding: 0px;
background-color: #FFFFFF;
color: #000000;
background-image: url(images/background-check.gif);
}
.footer{
clear: both;
padding: 2px 0 2px 0;
border-top: solid 1px #333333;
color: #FFFFFF;
text-align: center;
}
p {
margin: 0 0 12px 20px;
padding: 0;
line-height: 130%;
color: #000000
}

ul {
list-style: none;
margin: 0;
padding: 0;
}


img {
border: none;
}

/*------ 左の縦メニュー------------ */

.menutate {
width: 120px;
margin: 0px;
border-style: solid solid none solid;
border-color: #000;
border-size: 1px;
border-width: 1px;
}

.menutate li a {
height: 32px;
text-decoration: none;
}

.menutate li a:link, .menutate li a:visited {
color: #FFFFFF;
display: block;
background: url(images/menutate.gif);
padding: 8px 0 0 5px;
}

.menutate li a:hover, .menutate li #current {
color: #990099;
background: url(images/menutate.gif) 0 -32px;
padding: 8px 0 0 5px;
}

/*-------- コラム分け---------------- */
.leftcolumn {
float: left;
width: 120px;
}
.rightcolumn {
float: left;
overflow: auto;
padding: 0 0 0 20px;
}

/*----- 本文-------------- */
h1{
padding: 6px 5px 6px 5px;
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
border-left: 15px solid #CC0099;
background-color: #FFFF99;
}

h2{
padding: 2px;
border-left: 15px solid #CC0099;
border-bottom: 1px solid #666666;
}

------
html
------
<body>

<div class="header">
(略)
</div>

<!-- メインパート -->
<div class="main">

<!-- 左のタテメニュー -->
<div class="leftcolumn">
<div class="menutate">
<ul>
<li><a id="current" href="index.html">home</a></li>
<li><a href="others.html">others</a></li>
<li><a href="aboutme.html">about me</a></li>
</ul>
</div>
</div>

<!-- 右のコラム -->
<div class="rightcolumn">
<h1>いろいろ</h1>
<h2>あれこれ</h2>
<p>などなど</p>
</div>
</div>


<div class="footer">
Copyright: 2007 xxx. All rights reserved.
</div>
</body>
</html>

投稿日時 - 2007-10-03 02:24:13

QNo.3396724

すぐに回答ほしいです

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

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

回答(3)

典型的な「floatしたオブジェクトの高さは0とする」パターンです
ね。ここでも何度も繰り返されています。

rightcolumnの後ろでfloatをclearするといいです。clearfixという
有名な手口がありますので、ググって見て下さい。

投稿日時 - 2007-10-03 09:10:21

ANo.2

おそらく.main内のdiv要素がfloatになっているために
そのdiv要素が.mainの高さを決定しなくなり、
.mainの高さが無い状態ですね。

.mainにheightを指定するか、もしくはテーブルを使うかですね。

投稿日時 - 2007-10-03 02:46:13

ANo.1

.mainにheightを指定すると背景が出てきますね。

もうちょっと見てみます。。

投稿日時 - 2007-10-03 02:38:21

あなたにオススメの質問