2012-05-12 15 views
0

私はhtmlとcssを使ってウェブサイトをコーディングしていますが、最近は背景色のdiv要素が必要になりました。私はbackground-color: gray;に入れましたが、それはうまくいきませんでした。私はGoogle Chromeのinspect要素の機能を使用しましたが、Chromeは要素を認識しないと言います。私はFirefoxで同じ機能を使いましたが、CSS要素を認識することができませんでした。 divには3つのフローティングセクションが含まれていますが、それは問題ありませんので、overflow: autoを使用しています。私のdivに背景色を追加できない理由を誰かに説明することはできますか?div background-colorが機能しない

HTML:

<div id="main"> 
     <header> 
     <h1>LOGO</h1> 
     <nav> 
      <a href="index.html" title="Home">Home</a> 
      <a href="about.html" title="About">About</a> 
      <a href="features.html" title="Features">Features</a> 
      <a href="specs.html" title="Specifications">Specs</a> 
      <a href="updates.html" title="Updates">Updates</a> 
      <a href="contact.html" title="Contact Us">Contact</a> 
     </nav> 
     </header> 

     <section class="left"> 
     <h2>NEWS</h2> 
     <p>Itate eaquid quodit, utem dolorenihit ullore ides est faccum simaiorrum accaerf erfercim voloremod ut volectem con cus, temoluptatur as disquatent.</p> 
     </section> 

     <section class="right"> 
     <h2>SOMETHING</h2> 
     <p>Itate eaquid quodit, utem dolorenihit ullore ides est faccum simaiorrum accaerf erfercim voloremod ut volectem con cus, temoluptatur as disquatent.</p> 
     </section> 

     <section class="right"> 
     <h2>SOMETHING</h2> 
     <p>Itate eaquid quodit, utem dolorenihit ullore ides est faccum 
simaiorrum accaerf erfercim voloremod ut volectem con cus, 
temoluptatur as disquatent.</p> 
     </section> 
    </div> 

はCSS:あなたのCSSのこの部分で

#main { 
    backgound: gray; 
    layer-background: gray; 
    overflow: auto; 
    border: 2px dashed black; 

    border-radius: 15px; 
    -moz-border-radius: 15px; 
} 

section { 
    background-color: green; 
    text-align: justify; 
    margin: 5px; 
    padding 10px; 

    border-radius: 10px; 
    -moz-border-radius: 10px; 
} 
+3

要素のHTMLとCSS(セレクタ付き)を投稿してください。 – Bojangles

答えて

4

#main { 
    backgound: gray; 
    layer-background: gray; 

    /* .. */ 
} 

backgoundbackgroundであるべきであり、layer-backgroundは、CSSのプロパティではありません。

これらの間違いを修正した場合はwhat you have worksとなります。

+0

ああ、そうです。私はとても恥ずかしいです。タイプミスは毎回私を得るでしょう。 'layer-background'はインターネット上で見つけたもので、それを修正すると言っていました。 – thePurpleMonkey

+0

タイプミスが発生することがあります。 [あなたのCSSを検証する](http://jigsaw.w3.org/css-validator/)は、あなたがそれを見つけ出すのを助けてくれました。 – thirtydot

+1

@thePurpleMonkey [背景色](http://www.w3.org/TR/CSS2/colors.html#propdef-background-color)は、[背景](http:// www。 w3.org/TR/CSS2/colors.html#propdef-background)にはより広い範囲があります。しかし、あなたが使っているのは個人的な好みの問題だと思います。 – bostaf

0

背景のスペルが間違っています。正しいスペルはの背景で、色名以外の16進コードを入力してみてください。

関連する問題