Problem z dziedziczeniem stylu Opcje

[kiepski96]

Mam taki div:

[HTML] pobierz, plaintext 
        <div id="download">            
            <h1>DOWNLOAD FILE</h1>
            <h4>It's easy!</h4>    
        </div>
[HTML] pobierz, plaintext 

Chcę, aby TYLKO w tym divie znaczniki h1 i h4 miały dany kolor. Próbuję zrobić to tak:

[HTML] pobierz, plaintext 
#download h1{
    color: #4b4b4b;
}
[HTML] pobierz, plaintext 

Ale nawet samego h1 nie koloruje...
Co jest źle ?

[kiepski96]

CSS:

[HTML] pobierz, plaintext 
/* TYPOGRAPHY */
 
@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato-Bold.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato-Bold.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato-Bold.ttf') format('truetype'); 
    font-style: normal;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}
 
@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato-Regular.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato-Regular.ttf') format('truetype'); 
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}
 
* {
margin: 0px;
padding: 0px;
}
 
h1, h2, h3, h4, h5, h6{
    font-family: Lato;
    font-weight: normal;
}
 
h1{font-size: 4.5em;} h2{font-size: 4em;} h3{font-size: 3.5em;} h4{ font-size:3em;} h5{ font-size:2em;} h6{ font-size:1em;}
 
body{
    font-size: .625em; /* 10px */
    margin: 0;
    padding: 0;
 
}
 
header{
    width: 100% ;
    height: 60px;
    background-color:  #272d35;
 
}
 
.logo{
    width: 10%;
    min-width: 100px;
    height: 60px;
    float: left;
    background-color: #25a6d9;
}
 
div p{
    font-size: 3em;
    color: #fff;
    text-align: center;
    font-family: Lato;
    font-weight: bold;
    margin-top: 10px;
}
 
 
 
/* MENU STYLE*/
 
#menu{
 
}
 
#menu ul{
    list-style: none;
}
 
#menu li{
    float: right;
    font-size: 1.5em;
    color: #fff;
    margin-right: 2%;
    font-family: Lato;
    font-weight: normal;
    margin-top: 18px;
 
}
 
 
 
/* DOWNLOAD INSTRUCTION */
 
.line{
    width: 100%;
    height: 4px;
    background-color: #25a6d9;
}
 
#download-instruction h1{
    color: #4b4b4b;
    text-align: center;
}
[HTML] pobierz, plaintext 

A tutaj HTML:

[HTML] pobierz, plaintext 
        <header>
            <div class="logo">
                <p>LOGO</p>
            </div>
            <div id="menu">
                <ul>
                    <li>HOME</li>
                    <li>GAMES</li>
                    <li>ONLINE</li>
                    <li>PC GAMES</li>
                    <li>HOW TO DOWNLOAD</li>
                </ul>                
            </div>                
        </header>
 
        <div class="fluid_container">
           <div class="camera_wrap camera_azure_skin" id="camera_wrap_1">
                <div data-thumb="images/slides/thumbs/bridge.jpg" data-src="images/slides/bridge.jpg"></div>
           </div>
        </div>
 
        <div style="clear:both; display:block;"></div>            
 
        <div class="line"></div>
 
        <div id="download-instruction">            
            <h1>DOWNLOAD</h1>
            <h4>It's easy!</h4>    
        </div>
[HTML] pobierz, plaintext 

Dodam, że normalnie w codepen działa, a w chromie nie chce (IMG:style_emoticons/default/tongue.gif)

Ten post edytował kiepski96 15.03.2014, 15:45:47