28234 sujets

CSS et mise en forme, CSS3

Pb de background-color ds conteneur [Résolu]

Bonjour,
J'ai un soucis de couleur d'arrière plan,
je souhaite que le fond du site soit blanc et le body orange.
Pour ce faire j'ai mis un background-color: #fff ; dans le conteneur.
Celui-ci ne s'applique pas à toute la hauteur du site, mais juste au niveau de la bannière au niveau du div "haut".
Je n'arrive pas à comprendre pourquoi !!
Merci de votre aide.

 HTML <body>
	<div id="conteneur">		
		<h1 id="haut"><a href="etape1.html" title="Colored Design - Accueil"><span>Colored Design</span></a></h1>

		<ul id="menu">
			<li><a href="etape1.html">Etape n°1</a></li>
		</ul>
		
		<div id="centre">
			<h2>Un titre</h2>
			<p>Un paragraphe</p>
		</div>
        
        <ul id="menuD">
			<li><a href="etape1.html">Etape n°1</a></li>
		</ul>
		
		<p id="footer">xxxx</p>
	</div>
    
	</body>
</html>




body
{	margin: 0 0 ;
	padding: 0 ;
	text-align: center ;
	background-color:#facc43;}
	
div#conteneur
{	width: 1000px ;
	margin: 0 auto ;
	background-color: #fff ;}	
		
	
/*HAUT*/

h1#haut
{	width: 1000px ;
	height:152px;
/*	background-image:url(../images/05_banniereAccueil.jpg);*/
	margin: 0 ;
	text-align: left ;}
h1#haut a
{	width: 287px ;
	height:94px;
	display: block ;
	background: url(../images/LogoHAC.png) no-repeat right;
	position: relative ;
	left: 680px ;
	top: 0px ;
	text-indent: -5000px ;}	
		
	
/*MENU GAUCHE*/
	
ul#menu 
{	float:left; 
	width:180px; 
	height:15px ;
	list-style-type:none;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align: left ;
	line-height:20px ;
	background-color:#d5cfc5;}
	
ul#menu li 
{	display:inline;
	padding : 0px 18px 0px 0px;
	text-decoration: none ;}

ul#menu li a
{	text-decoration: none ;
	font-size:12px;
	color:#af3929;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	letter-spacing: 1px ;}

ul#menu li a:hover
{	color:#2b2b2b;}	


/*MENU Droite*/
	
ul#menuD 
{	float:right; 
	width:180px; 
	height:15px ;
	list-style-type:none;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align: left ;
	line-height:20px ;
	background-color:#d5cfc5;}
	
ul#menu li 
{	display:inline;
	padding : 0px 18px 0px 0px;
	text-decoration: none ;}

ul#menu li a
{	text-decoration: none ;
	font-size:12px;
	color:#af3929;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	letter-spacing: 1px ;}

ul#menu li a:hover
{	color:#2b2b2b;}	


/*CONTENU*/	
	
div#centre
{	float:left;
	width:640px;
	padding: 0px 0px 0px 0px;
	text-align: left;
	background-color:#ffffff;}
	
	
/*PIED*/	
	
p#footer
{	float:left;
	width:1000px;
	margin: 0;
	line-height: 17px;
	background-image: url(../images/05_PiedTranche.png);
	background-repeat:repeat-x;}

Modifié par iinuma (13 Jan 2011 - 13:09)
Bonjour, c'est normal. Ton bloc #conteneur contient des blocs qui sont à peu près vide. Chaque bloc s'étend ou prend la place que son contenu occupe.

Bon, ceci étant dit tu peux faire en sorte que ton bloc prenne 100% de la hauteur en appliquant height: 100%; à html, body et conteneur.

Un peu de lecture: Appliquer une hauteur de 100% à un élément
Je suis d'accord que mes blocs son vident !
Mais je suis en pleine réalisation du template alors il n'y a pas de contenue.
Ceci dit, le bloc central <div id="centre"> contient un peu de texte et donc il agrandi en hauteur ce bloc. Les colonnes à gauche et à droite n'ont ps de couleur d'arrière plan, elles prennent celle du body, je pensais qu'elle auraient pris celle du conteneur qui lui est blanc comme de bloc "centre". C'est ce que je ne comprend pas. Le conteneur devrait normalement englober tout les blocs qui sont enfermé dans ces balise <div> </div> et donc son style devrait supplanter celui du body, non ?
En tout cas j'ai appris quelque chose !!
Je ne savais pas que l'on pouvez appliquer un style sur html Smiley biggol
J'ai essayé, alors c'est vrai que sa me met du blanc sur toute ma largeur de site, mais la sa dépasse le footer ! et moi je voudrais que sa ne s'applique que au élément qui son dans le conteneur...
Bonjour iinuma,

J'ai regardé rapidement ton code.

Tu utilises les propriétés FLOAT pour tes blocs ul#menu et ul#menuD.

Ceux-ci vont donc être partiellement déplacer du flux de ton document.

Pour rétablir ce flux il est nécessaire d'utiliser un élément séparateur utilisant la propriété CLEAR . Dans ton cas il faut le placer après la fermeture de ton bloc ul#menuD.


<hr class="separateur" />



.separateur {
border: none;
clear: both;
display: block;
height: 1px;
margin: 0;
padding: 0;
visibility: hidden;
}


Plus d'infos sur l'utilisation de la propriété FLOAT :
http://www.alsacreations.com/tuto/lire/608-initiation-positionnement-css.html#flottants

http://www.alsacreations.com/article/lire/53-guide-de-survie-du-positionnement-css.html

Tiens nous au courant Smiley smile
O top CoingPomme, sa marche carrément bien, c'est tout à fait le résultat que je recherchais !!
Donc si j'ai bien compris la propriété "float" casse ma hiérarchie et du coup le conteneur n'englobe que les blocs en amont qui n'utilisent pas cette propriété.

Je vais étudier de près cette propriété CLEAR.

Merci à tous les deux pour vos conseils.
ouai c'est à cause des floats ton pb
Tu peux simplements ajouter { clear: both } dans les css de ta div centrale.

Ou comme tu vas avoir plusieurs fois le cas sans doute.
Tu peux creer un class cleafix dans le css que tu appliques quand tu veux clear les floats

.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

Personnellement je préfère cette solution au <hr> qui est aussi une bonne solution mais qui t'oblige à intégrer un élément de design dans le html. Cela dit rien de bien grave.
Je vais tester ces deux solutions.
J'imagine que suivant la complexité du site, il vaut mieux utiliser la class clearfix pour l'appliquer qd c'est nécessaire.

En tout cas merci à tous, je vais pouvoir avancer dans mon travail Smiley ravi
Le hr fonctionne bien aussi c'est sans doute le markup html avec <br /> qui est le plus adapté.
Mais la 2ème tech est plus "propre". La dans ton cas tu appliques la class clearfix à l <ul> qui contient les <li> en float et c bon.
Sujet clos
Aller à