[Résolu] Mettre un background color sur une section de mon bloc_page

Question

marie_65

18 Nov 2015 à 18:35

Bonsoir à tous, et merci d'essayer de voir ce qui cloche:

Alors voilà: j'ai une page html composée d'un body qui comprend un div "bloc page", lui meme découpé en trois partie, le header, une section et un footer.

J'ai une couleur de fond sur le body, et j'aimerai avoir deux couleurs différentes sur le bloc page: une couleur pour le header et footer, et la section qui serait blanche.

Simple vous allez me dire, et bé non, quelquefois ça marche, et quelquefois ça marche pas, et je ne comprend pas pourquoi; il doit y avoir une erreur quelque part, mais je ne sais pas où. La section apparaît des fois blanches (et là, je suis contente..), mais quand je navigue dans mes pages et que je reviens sur celle-ci, des fois elle prend la couleur du body.

Je vous donne les codes pour voir si vous trouvez quelque chose et encore merci de prendre le temps Smiley smile


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
		<link rel="stylesheet" href="contact.css"/>
		
		<!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
	   <!--[if lte IE 7]>
        <link rel="stylesheet" href="accueil_ie.css" />
        <![endif]-->
		<meta name="robots" content="index, follow, all" /> 
        <title>Chambre d'hôtes proche La Barthe de Neste, Hautes-Pyrénées :</title>	
		<meta name="description" content="Au coeur des Pyrénées, cette chambre d'hôtes vous permettra de profiter de toutes les activités liées à la montagne, au thermalisme, aux sites touristiques "/>
		<meta name="keywords" content="chambres d'hôtes, week-end, piemont, pyrenées, hautes pyrénées, gite, chambre, chambres, hotes, hôtes, chambre hotes, haute pyrenees, hautes pyrenees, pyrenees, cœur des pyrénées,"/>
		<meta name="identifier-url" content="lestivere.fr"/>
		<meta name="category" content="voyage"/>
		<meta name="content-language" content="fr"/>
	</head>

    <body> 	
		<div id="bloc_page">	
		
		
<header>
		<div class="titre_principal">
				<h1>Chambres d'hôtes "L'estivère"</h1><h2>Hautes Pyrénées <img src="logo/cercle.png" alt="icone"> La Barthe de Neste <img src="logo/cercle.png" alt="icone"> Saint Arroman  </h2>
		</div>

		<p class="flotte2"><img src="logo/croix1.png" class="croix1" alt="croix1" title="croix-occitane"/></p>	
			<nav>
			<ul><!--liste non ordonnée-->
					<li><a href="index1.html">accueil</a></li> 
					<li><a href="maison.html"> maison</a></li>
					<li><a href="tourisme.html">tourisme</a></li>
					<li id="en-cours"><a href="contact.html">contact &amp; tarifs</a></li>
					<li><a href="acces.html">accès</a></li>	
			</ul>
			</nav>
</header>

<section>	
		<div class="introduction">
				<p class="flotte"><a href="imgtourisme/lever.jpg" ><img src="imgtourisme/lever_mini.jpg" alt="lever" class="lever" title="Lever sur pouy louby"/></a></p>
				<img src="imgtourisme/laneste.jpg" class="laneste" alt="laneste" title="sur les bords de la neste"/><img src= "imgtourisme/barroude.jpg" class="barroude" alt="barroude" title="Sur la route de barroude"/><img src="imgtourisme/color3.jpg" alt="couleur" class="color3" /><img src="imgtourisme/champignon.jpg" alt="champignon" class="champignon" title="champignon"/>
				<h3>Tourisme au coeur du Piémont</h3>
				<p class="float"><a href="http://www.pays-des-nestes.fr/index.php?page=vie-culturelle"> <img src="logo/of.png" class="logo1" alt="logo pays des nestes"/></a></p><hr>	
		</div>
		
	
		<article>
				<h3>Demande de renseignements</h3>
				<form id="contact" method="post" action="envoi.php">
					<fieldset><legend>Vos coordonnées</legend>
					<p><label for="nom">Nom :</label><input type="text" id="nom" name="nom" tabindex="1" /></p>
					<p><label for="email">Email :</label><input type="text" id="email" name="email" tabindex="2" /></p>
					</fieldset>
     
					<fieldset><legend>Votre message :</legend>
					<p><label for="objet">Objet :</label><input type="text" id="objet" name="objet" tabindex="3" /></p>
					<p><label for="message">Message :</label><textarea id="message" name="message" tabindex="4" cols="30" rows="8"></textarea></p>
					</fieldset>
					<div style="text-align:center;"><input type="submit" name="envoi" value="Envoyer le formulaire !" /></div>
				</form>	
		</article>	

		<aside>
					<h3>Tarifs:</h3>
						<p> Une nuit pour deux personnes: 50€, petit-déjeuner inclus;<br >20€ par personne supplémentaire;<br >15€ par enfants;<br >Tarif dégressif selon le nombre de nuits.</p>
					<h3>Contact</h3>
					<p>Marie-<br >"La Poutge"<br >Saint A<br >Tel: 09 <br ></p>
		</aside>		
</section>
	
	
<footer>
		<img src="image/feuille1.jpg" alt="feuille" class="feuille"/>
		<img src="image/adresse.png" alt="adresse" class="adresse"/>		
</footer>
				
		</div>	
	</body>	
</html>


* { margin:0; padding:0; }
body{
font-family:"Trebuchet MS", sans-serif;
width:100%;
text-align:center;
background-position:top;
background-color:#666;
}

#bloc_page{
width:1000px;
margin:auto;
border:3px solid #FFFFFF;
margin-top:4px;
margin-bottom:4px;
}	

header{
display:inline-block;
background-color:#B39a84;
width:100%;
}

h1{
font-size:25px;
color:#FFFFFF;
margin-right:50px;
display:inline;
line-height:80px;
}

h2{
font-size:17px;
color:#FFFFFF;
padding-left:45px;
display:inline;
}

h3{
margin-top:45px;
}

h4{
font-size:20px;
}

.flotte2 img{
margin-left:100px;
margin-bottom:10px;
}

.flotte2{
float:left;
margin:0 0 0 90px;
}

p {
	font-size:18px;}
		

nav ul {
    margin-top:20px;
	float:left;
	margin-left: 100px;
	margin-bottom:30px;}
	
nav li{
display:inline-block;
padding:1px;}
	
nav a:hover{
box-shadow:0 2px 5px #1c1a19;}
	
nav a{
font-weight:400;
text-transform:uppercase;
font-size:14px;
color:#FFFFFF;
padding:5px;
text-decoration:none;
margin:2px;}

#en-cours a {
box-shadow:0 2px 5px #1c1a19; }
 
.flotte{
float:left;
margin:0;
padding:0;
margin-right: 2px;}	

.lever{
vertical-align:top;
margin-top:2px;
margin-right:2px;}	

.barroude{
vertical-align:top;
margin-top:2px;
margin-right:4px;}

.laneste{
vertical-align:top;
margin-top:2px;
margin-right:4px;}	

.champignon{
vertical-align:top;
margin-top:2px;}
		
.color3{
vertical-align:top;
margin-top:2px;
margin-right:4px;}	

.float{
float:right;}
		
.logo1{
margin-top:35px; 
margin-right:200px;}	
	
	
hr{
width:40%;
margin-left:180px;
margin-top:110px;}
	
.introduction{
float:left;} 

 section{
 background-color:FFFFFF;
 color:#493727;}
 
  
article {
 text-align: jutify;
 display: inline-block;
 width: 40%;
 vertical-align: top;
margin-left:5px;
 font-family:serif;
 font-size:15px;
 margin-top:16px;}
 
article h3{
font-size:22px;
text-align:left;
margin-bottom:20px;}

article p{
text-align:left;
width:100%;
margin-top:30px; }

aside {
display: inline-block;
width: 45%;
vertical-align: top;
margin-top: 60px;
margin-left: 45px;
margin-bottom:60px;
font-family:serif;
font-size:20px;
border-radius: 5px;
box-shadow: 0 2px 5px #493727;}

aside p{
font-size:18px;
font-weight:normal;
margin-top:45px;
width:100%;
line-height:180%;}

.adresse{
padding-left:250px;
vertical-align:top;
padding-top:34px;}

.feuille{
margin-left:5px;
margin-top:16px;
margin-bottom:15px;
border-radius: 5px;
box-shadow: 0 2px 5px #666;}

footer{
background-color:#B39a84;}

6l20

19 Nov 2015 à 07:14

Bonjour,

Ce qui est étrange, c'est que cela puisse fonctionner parfois (ils sont forts ces navigateurs ) Smiley cligne

Tu as au moins deux erreurs dans ta feuille de styles :

section{
 background-color:FFFFFF;
 color:#493727;}

Ne pas oublier le signe dièse sur le code couleur : #FFFFFF (ou #FFF dans sa forme raccourcie).

Juste en dessous tu as un text-align jutify sur article (au lieu de justify avec un s après le u).

Voilà, ça devrait fonctionner plus souvent Smiley cligne

marie_65

19 Nov 2015 à 19:36

Bonsoir 6120, Smiley biggrin

Alors là, je marque le sujet comme résolu sans avoir essayé!!
Tu m'étonnes que le navigateur ne comprennes pas... je pouvais chercher, je n'aurai pas trouvé le dièse car je croyais que sur le blanc on n'était pas obligé de mettre le dièse; ché pas pourquoi.. une idée comme ça...
Je pensais plutôt que l'erreur venait de la structure de ma page HTML...

Et bé bravo, et merci encore.... je reviendrai certainement car je suis en train de revoir toutes mes pages et ça m'étonnerait bien qu'il n'y ait pas un petit détail qui me chiffonne..

Marie

Sujet clos

Questions générales et questions de débutants

[Résolu] Mettre un background color sur une section de mon bloc_page