couleur de fond pour div

Idéalement, <div id="main"> devrait être 560px de large avec une hauteur de 100% et la couleur de fond # 333333. Cependant, ce n'est pas le cas. Brièvement, juste après avoir rafraîchi la page, je peux voir que la couleur de fond est là mais une fois que la page a fini de charger, elle disparaît. Cela me fait penser qu'il y a un conflit quelque part dans mon CSS, je ne suis pas sûr où. Comment puis-je obtenir <div id="main"> pour avoir l'arrière-plan? Voici ce que je travaille:couleur de fond pour div

HTML 
<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Parlour</title> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 

<body> 
<div id="container"> 
    <header> 
    <nav> 
     <ul> 
     <li><a href="#">ABOUT</a></li> 
     <li><a href="#">SERVICES</a></li> 
     <li><a href="#">GALLERY</a></li> 
     <li><a href="#">PRODUCTS</a></li> 
     <li><a href="#">GET IN TOUCH</a></li> 
     </ul> 
    </nav> 
    </header> 

    <div id="logo"> 
    <a href="#"><img src="img/parlour_side.png" alt="Parlour Salon logo" /></a> 
    </div><!-- end logo --> 

    <div id="main"> 
    <div class="brief"> 
     <h2><a href="#"><span>ABOUT PARLOUR</span></a></h2> 
     <p>Parlour is blah blah blah.</p>  
     </div><!-- end brief --> 
    <div class="brief"> 
     <h2><a href="#"><span>SERVICES</span></a></h2> 
     <p>Parlour offers blah blah blah.</p> 
    </div><!-- end brief --> 
    <div class="brief"> 
     <h2><a href="#"><span>PRODUCTS</span></a></h2> 
     <p>At Parlour, we believe blah blah blah.</p> 
    </div><!-- end brief --> 
    <div class="brief"> 
     <h2><a href="#"><span>GET IN TOUCH</span></a></h2> 
     <p>1522 U Street NW<br/>Washington DC<br/>202-986-0080</p> 
     <div class="social"> 
      <a href="#"><img src="img/facebook.png" alt="Parlour Facebook" /></a> 
      <a href="#"><img src="img/twitter.png" alt="Parlour Twitter" /></a> 
      <a href="#"><img src="img/youtube.png" alt="Parlour YouTube" /></a> 
      <a href="#"><img src="img/yelp.png" alt="Parlour Yelp" /></a> 
     </div><!-- end social --> 
    </div><!-- end brief --> 


    </div><!-- end main --> 
</div><!-- end container --> 
</body>

CSS

/* Reset */ 

html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, address, code, img, 
small, strong, dl, dt, dd, ol, ul, li 
fieldset, form, label { 
    background: url(img/background.jpg) no-repeat center center fixed; 
    background-size: cover; 
    border: 0; 
    font-size: 100%; 
    margin: 0; 
    outline: 0; 
    padding: 0; 
    vertical-align: baseline; 
} 

body { 
    background: url('img/background.jpg'); 
    font-family: nevis-webfont; 
    color: #ffffff; 
} 

ol, ul { 
    list-style-type: none; 
} 

/* Type */ 

@font-face { 
    font-family: nevis-webfont; 
    src: url('type/nevis-webfont.eot'); 
    src: url('type/nevis-webfont.eot?#iefix') format('embedded-opentype'), 
     url('type/nevis-webfont.woff') format('woff'), 
     url('type/nevis-webfont.ttf') format('truetype'), 
     url('type/nevis-webfont.svg#') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

h1 { 
    font-family: Didot, "Bodoni MT", "Century Schoolbook", "Niagara Solid", Utopia, Georgia, Times, "Times New Roman", serif; 
    font-size: 125%; 
    font-weight: normal; 
    letter-spacing: 1px; 
    line-height: 1.5; 
    text-transform: uppercase; 
} 

h2 { 
    font-family: Didot, "Bodoni MT", "Century Schoolbook", "Niagara Solid", Utopia, Georgia, Times, "Times New Roman", serif; 
    font-size: 125%; 
    font-weight: normal; 
    line-height: 1.5; 
} 

h3 { 
    font-family: nevis-webfont; 
    font-size: 75%; 
    font-weight: normal; 
    letter-spacing: 1px; 
    line-height: 1.5; 
    text-transform: uppercase; 
} 

p { 
    font-family: nevis-webfont; 
    font-size: 75%; 
    line-height: 1.5; 
} 

a { 
    text-decoration: none; 
} 

a:hover { 
    text-decoration: underline; 
} 

/* Basic */ 

#container { 
    width: 100%; 
} 

#logo { 
    float: left; 
    margin-left: 100px; 
    margin-top: 200px; 
} 

/* Header */ 

nav { 
    background: #333333; 
    height: 35px; 
    width: 100%; 
} 

nav ul { 
    background: #333333; 
    margin-left: 220px; 
    padding-bottom: 5px; 
    padding-top: 5px; 
} 

nav ul li { 
    background: #333333; 
    display: inline; 
} 

nav ul li a { 
    background: #333333; 
    color: #ffffff; 
    font-family: nevis-webfont; 
    font-size: 75%; 
    letter-spacing: 1px; 
    text-decoration: none; 
    margin: 0 16px; 
} 

/* Main */ 

#main { 
    background-color: #333333; 
    height: 100%; 
    width: 560px; 
    margin-left: 230px; 
    margin-top: 200px; 
    overflow: hidden; 
} 

#main .brief h2 span { 
    color: #ffffff; 
    text-decoration: none; 
}

JSFiddle bien que ce soit pas tout à fait ce que je vois, voici donc un plafond d'écran du site local ..

Source

2012-08-11 AMC

Votre réinitialisation CSS n'est pas correcte. Une réinitialisation CSS ne doit être utilisée que pour supprimer un style par défaut pour les éléments sélectionnés, mais vous appliquez également l'image d'arrière-plan que vous souhaitez uniquement ajouter au code HTML (et non à chaque div etc.). Supprimez simplement les propriétés d'arrière-plan du CSS et déplacez-le pour n'utiliser que votre code HTML et vous êtes prêt à partir.

html { background: url(img/background.jpg) no-repeat center center fixed; 
     background-size: cover; } 

html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, address, code, img, 
small, strong, dl, dt, dd, ol, ul, li 
fieldset, form, label { 
    /* Other reset properties */ 
}

Here's the Fiddle (another background image used).

Source

2012-08-11 18:34:00 MarcoK

merci pour votre suggestion, il est certainement un peu plus de ce que je cherche. comment puis-je obtenir la hauteur de '# main' pour étendre à partir du haut de la page vers le bas, 100%? – AMC

C'est en fait une question différente, [mais ici vous allez] (http://jsfiddle.net/dA2EY/3/). #main a supprimé les marges et ajouté un remplissage. – MarcoK

Encore une fois, merci pour votre aide. – AMC

couleur de fond pour div

Répondre

Questions connexes