締切済み

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

2007/10/03 02:24

CSSを使ってwebを作ろうとしている素人です。 header（見出しのロゴなど） main この中にコラムを２つ。左コラムに縦並びメニュー　背景画像あり。 footer（copyright表記など）　色はグレー。いろいろ参考資料を見ながら、このような構成にしたのですが、本文(main)のところが、footerと同じグレー１色になってしまい、予定していた背景画像が表示されません。とりあえず全体的なレイアウトは何とか大丈夫なようなのですが、何か原因がお分かりでしたらご教示いただけると幸いです。おそらく単純なミスなのかもしれませんが。以下に、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>