28221 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai adapté un modèle de mise en page CSS alsacréationS, par contre dès que je veut rajouter une couleur de fond dans le div gauche quand je visualise ma page le div centre passe en dessous du div gauche et je ne sais pour quoi.

Quelqu'un pourrait il m'aider

Voila le code CSS
BODY {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	FONT-SIZE: 0.8em;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	PADDING-TOP: 0px;
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
	}

#conteneur {
	LEFT: 50%;
	MARGIN-LEFT: -505px;
	MARGIN-TOP: 20px;	
	WIDTH: 1010px;
	HEIGHT: 710px;
	POSITION: absolute;
	BACKGROUND-COLOR: #ccccff
	}

#header {
	MARGIN-LEFT: 5px;
	MARGIN-RIGHT: 5px;
	MARGIN-TOP: 5px;
	HEIGHT: 100px;
	BACKGROUND-COLOR: #99cccc
	}

#centre {
	MARGIN-RIGHT: 5px;
	HEIGHT: 585px;
	MARGIN-LEFT: 200px;
	BACKGROUND-COLOR: #9999cc
	}

#gauche {
	MARGIN-LEFT: 5px;
	LEFT: 0px;
	HEIGHT: 585px;
	WIDTH: 200px;
	POSITION: absolute
	BACKGROUND-COLOR: #9999cc
	}

#pied {
	MARGIN-LEFT: 5px;
	MARGIN-RIGHT: 5px;
	MARGIN-BOTTOM: 5px;
	HEIGHT: 15px;
	BACKGROUND-COLOR: #99cc99
	}

.menugauche {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	PADDING-TOP: 0px;
	LIST-STYLE-TYPE: none
	}

.menugauche LI {
	MARGIN-BOTTOM: 5px
	}

.menugauche A {
	MARGIN: 0px 2px;
	COLOR: #000000;
	TEXT-DECORATION: underline
	}

.menugauche A:hover {
	TEXT-DECORATION: none
	}

P {
	MARGIN: 0px 0px 10px
	}


Voilà le code html

<BODY>
<DIV id=conteneur>
	<DIV id=header>header de largeur fixe : 1000px <A 
href="http://www.alsacreations.com/articles/modeles">(voir tous les modèles)</A> 
- <A 
href="Largeur fixe 750, header-menu gauche-contenu-footer_fichiers/g_fixe.css">(voir 
la feuille de style CSS)</A>
	</DIV>
	<DIV id=gauche>
		<P>menu</P>
		<P>largeur fixe : 150px</P>
			<UL class=menugauche>
				<LI><A href="http://www.alsacreations.com/articles/modeles/">Menu 1</A> 
				<LI><A href="http://www.alsacreations.com/articles/modeles/">Menu 2</A> 
				<LI><A href="http://www.alsacreations.com/articles/modeles/">Menu 3</A> 
				<LI><A href="http://www.alsacreations.com/articles/modeles/">Menu 4</A> 
		</LI>
		</UL>
	</DIV>
	<DIV id=centre>
		partie centrale qui "pousse" les colones vers le bas.<BR>partie 
avec du contenu occupant le reste de la largeur<BR>partie avec du contenu 
occupant le reste de la largeur<BR>partie avec du contenu occupant le reste de 
la largeur<BR>partie avec du contenu occupant le reste de la largeur<BR>partie 
avec du contenu occupant le reste de la largeur<BR>partie avec du contenu 
occupant le reste de la largeur<BR>partie avec du contenu occupant le reste de 
la largeur<BR>partie avec du contenu occupant le reste de la largeur<BR>partie 
avec du contenu occupant le reste de la largeur<BR>partie avec du contenu 
occupant le reste de la largeur<BR>partie avec du contenu occupant le reste de 
la largeur<BR>partie avec du contenu occupant le reste de la largeur<BR>partie 
avec du contenu occupant le reste de la largeur<BR>partie avec du contenu 
occupant le reste de la largeur<BR>partie 
avec du contenu occupant le reste de la largeur<BR>partie avec du contenu 
occupant le reste de la largeur<BR>partie 
avec du contenu occupant le reste de la largeur<BR>partie avec du contenu 
occupant le reste de la largeur<BR>partie 
avec du contenu occupant le reste de la largeur<BR>partie avec du contenu 
occupant le reste de la largeur<BR></DIV>
	<DIV id=pied>pied de page de largeur fixe : 1000px</DIV>
</DIV>
</BODY>


De même j'aimerais savoir comment faire pour que le div centre ne "pousse" pas les colones vers le bas.

Merci de votre aide Smiley cligne

upload/830-PblCSS.JPG
Modifié le 30 Jan 2005 - 23:42
je sais pas si c'est ce que tu voulais mais avant de te donner le résultat, la première constatation c'est que tes balise <li> ne sont pas fermés que dans ton css il manque partout des points-virgules..
Donc si j'ai un conseil à te donner c'est de bien vérifier si il n'y a pas de fautes dans ton code, ca peut résoudre beaucoup de problème:

Voilà les deux code.

CSS:


BODY {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	FONT-SIZE: 0.8em;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	PADDING-TOP: 0px;
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	}

#header {
	MARGIN-LEFT: 5px;
	MARGIN-RIGHT: 5px;
	MARGIN-TOP: 5px;
	HEIGHT: 100px;
	BACKGROUND-COLOR: #99cccc;
	}

#centre {
	MARGIN-RIGHT: 5px;
	HEIGHT: 585px;
	MARGIN-LEFT: 205px;
	BACKGROUND-COLOR: #9999cc;
	}

#gauche {
	MARGIN-LEFT: 5px;
	LEFT: 0px;
	HEIGHT: 585px;
	WIDTH: 200px;
	POSITION: absolute;
	BACKGROUND-COLOR: #0099cc;
	}

#pied {
	MARGIN-LEFT: 5px;
	MARGIN-RIGHT: 5px;
	MARGIN-BOTTOM: 5px;
	HEIGHT: 15px;
	BACKGROUND-COLOR: #99cc99;
	}

.menugauche {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	PADDING-TOP: 0px;
	LIST-STYLE-TYPE: none;
	}

.menugauche LI {
	MARGIN-BOTTOM: 5px;
	}

.menugauche A {
	MARGIN: 0px 2px;
	COLOR: #000000;
	TEXT-DECORATION: underline;
	}

.menugauche A:hover {
	TEXT-DECORATION: none;
	}

P {
	MARGIN: 0px 0px 10px;
	}


HTML:


<BODY>

	<DIV id=header>header de largeur fixe : 1000px <A 
href="http://www.alsacreations.com/articles/modeles">(voir tous les modèles)</A> 
- <A 
href="Largeur fixe 750, header-menu gauche-contenu-footer_fichiers/g_fixe.css">(voir 
la feuille de style CSS)</A>
	</DIV>
	
  
<DIV id=gauche> 
  <P>menu</P>
  <P>largeur fixe : 150px</P>
  <UL class=menugauche>
    <LI><A href="http://www.alsacreations.com/articles/modeles/">Menu 1</A></li>
    <LI><A href="http://www.alsacreations.com/articles/modeles/">Menu 2</A> </li>
    <LI><A href="http://www.alsacreations.com/articles/modeles/">Menu 3</A> </li>
    <LI><A href="http://www.alsacreations.com/articles/modeles/">Menu 4</A> </LI>
  </UL>
</DIV>
	
  <DIV id=centre>
		partie centrale qui "pousse" les colones vers le bas.<BR>partie 
avec du contenu occupant le reste de la largeur<BR>partie avec du contenu 
occupant le reste de la largeur<BR>partie avec du contenu occupant le reste de 
la largeur<BR>partie avec du contenu occupant le reste de la largeur<BR>partie 
avec du contenu occupant le reste de la largeur<BR>partie avec du contenu 
occupant le reste de la largeur<BR>partie avec du contenu occupant le reste de 
la largeur<BR>partie avec du contenu occupant le reste de la largeur<BR>partie 
avec du contenu occupant le reste de la largeur<BR>partie avec du contenu 
occupant le reste de la largeur<BR>partie avec du contenu occupant le reste de 
la largeur<BR>partie avec du contenu occupant le reste de la largeur<BR>partie 
avec du contenu occupant le reste de la largeur<BR>partie avec du contenu 
occupant le reste de la largeur<BR>partie 
avec du contenu occupant le reste de la largeur<BR>partie avec du contenu 
occupant le reste de la largeur<BR>partie 
avec du contenu occupant le reste de la largeur<BR>partie avec du contenu 
occupant le reste de la largeur<BR>partie 
avec du contenu occupant le reste de la largeur<BR>partie avec du contenu 
occupant le reste de la largeur<BR>
</DIV>

	<DIV id=pied>pied de page de largeur fixe : 1000px</DIV>

</BODY>


j'ai allégé un peu le code d'une div "conteneur" que je trouvé inutile.
Compare avec ton ancien.. J'ai testé que sous ie..
Si c'est pas le résultat que tu souhaitais fais le savoir. Smiley langue