Problème alignement d'un div en css

mahdivitche · 26 Juin 2008

Bonjour,

Je veux réalisé un page qui contient des div et je veux aligner tous les div en centre pour sorte comme des frame
J’ai aligner tous les div seulement Menu haut et Menu bas qui reste toujours à gauche et si je change il affiche à place du la div principale :
code page css :

Code:

div {
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	}
#bandeau {
	width:600px;
	height:50px;
	background-color:#00CCFF;
	}
#menu {
  
	float:left;
	width:100px;
	height:400px;
	background-color:#FF6699;
	  
	}
#menu_haut {
    
	width:100px;
	height:200px;
	background-color:#66CC33;
	}
#menu_bas {
   
	width:100px;
	height:200px;
	background-color:#CC99CC;
	}
#contenu {
   
	
	width:500px;
	height:400px;
	background-color:#FFCC00;
	}
#bloc_news {
   
	
	width:150px;
	height:150px;
	background-color:#FF3300;
	}
#pied_page {
    
	clear:both;
	width:600px;
	height:50px;
	background-color:#33FF99;
	}

et code page html

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Positionnement CSS</title>
</head>
<body>
	<div id="bandeau">Ceci est le bandeau</div>
	<div id="menu" align="center">
		<div id="menu_haut">Menu haut</div>
		<div id="menu_bas">Menu bas</div>
	</div>
<div id="contenu">
		<div id="bloc_news">Bloc News</div>
		<p>&nbsp;</p>
		<p>Principe
	    </p>
</div>
	<div id="pied_page">Ceci est le pied de page</div>
</body>
</html>

merci d'avance
.

allignol · 26 Juin 2008

Bonjour,
tu peux englober toutes tes div dans une autre que tu centres (tu lui donnes une largeur en px et margin left et right: auto

mahdivitche · 26 Juin 2008

allignol a dit:
Bonjour,
tu peux englober toutes tes div dans une autre que tu centres (tu lui donnes une largeur en px et margin left et right: auto

merci mais je suis débutant en css

si tu peux me donné le code stp !

allignol · 26 Juin 2008

pour le html:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Positionnement CSS</title>
</head>
<body>

<div id="page">

   <div id="bandeau">Ceci est le bandeau</div>
   <div id="menu" align="center">
      <div id="menu_haut">Menu haut</div>
      <div id="menu_bas">Menu bas</div>
   </div>
<div id="contenu">
      <div id="bloc_news">Bloc News</div>
      <p>&nbsp;</p>
      <p>Principe
       </p>
</div>
   <div id="pied_page">Ceci est le pied de page</div>

</div>

</body>
</html>

et pour les css:

Code:

div  #page{
   text-align:center;
   margin-left:auto;
   margin-right:auto;
   }
#bandeau {
   width:600px;
   height:50px;
   background-color:#00CCFF;
   }
#menu {
 
   float:left;
   width:100px;
   height:400px;
   background-color:#FF6699;
    
   }
#menu_haut {
   
   width:100px;
   height:200px;
   background-color:#66CC33;
   }
#menu_bas {
   
   width:100px;
   height:200px;
   background-color:#CC99CC;
   }
#contenu {
   
   
   width:500px;
   height:400px;
   background-color:#FFCC00;
   }
#bloc_news {
   
   
   width:150px;
   height:150px;
   background-color:#FF3300;
   }
#pied_page {
   
   clear:both;
   width:600px;
   height:50px;
   background-color:#33FF99;
   }

mahdivitche · 26 Juin 2008

merci allignol

mais le code que tu as donné affiche les div à guache

et moi je veux centrer les div :cry:

merci d'avance

allignol · 26 Juin 2008

Pardon, j'ai oublié: il faut préciser une largeur en px pour div #page:

Code:

#page {
width:***px;
margin:0 auto;}

pour ton cas, ce sera apparement 600px, la même que pour le bandeau.

mahdivitche · 26 Juin 2008

allignol a dit:
Pardon, j'ai oublié: il faut préciser une largeur en px pour div #page:

Code:

#page { width:***px; margin:0 auto;}

pour ton cas, ce sera apparement 600px, la même que pour le bandeau.

non
toujours le même résultat

il affiche tous les div ç gauche de la page :cry:

allignol · 26 Juin 2008

si tu utilises ie5, je crois qu'il t'affichera toujours ton contenu à gauche.

Le code html que tu m'as donné est toujours le même maintenant?

Sinon, refais un copier-coller.

mahdivitche · 26 Juin 2008

allignol a dit:
si tu utilises ie5, je crois qu'il t'affichera toujours ton contenu à gauche.

Le code html que tu m'as donné est toujours le même maintenant?

Sinon, refais un copier-coller.

j'utilisé IE6

et j'ai copier le code mais les div est toujours à guache

allignol · 26 Juin 2008

Autant pour moi, dans ta feuille de styles CSS, déclare

Code:

#page{...}

et non

Code:

div #page{...}

Ca doit marcher normalement.

mahdivitche · 26 Juin 2008

Code:

#page { 
   text-align:center; 
   margin-left:auto; 
   margin-right:auto; 
width:600px; 

}

#bandeau { 
   width:600px; 
   height:50px; 
   background-color:#00CCFF; 
   } 
#menu { 
  
   float:left; 
   width:100px; 
   height:400px; 
   background-color:#FF6699; 
    
   } 
#menu_haut { 
    
   width:100px; 
   height:200px; 
   background-color:#66CC33; 
   } 
#menu_bas { 
    
   width:100px; 
   height:200px; 
   background-color:#CC99CC; 
   } 
#contenu { 
    
    
   width:500px; 
   height:400px; 
   background-color:#FFCC00; 
   } 
#bloc_news { 
    
    
   width:150px; 
   height:150px; 
   background-color:#FF3300; 
   } 
#pied_page { 
    
   clear:both; 
   width:600px; 
   height:50px; 
   background-color:#33FF99; 
   }

oui il centrer les div mais "Menu haut" et "Menu bas" est en haut de "div principe"

allignol · 26 Juin 2008

Ca doit être un problème de margin ou padding;
insère au début de ta CSS

Code:

body{
margin:0;
padding:0;}

mahdivitche · 26 Juin 2008

allignol a dit:
Ca doit être un problème de margin ou padding;
insère au début de ta CSS

Code:

body{ margin:0; padding:0;}

toujour même résultat les div sont centré mais "div Menu haut" , "div Menu bas" en haut de "div principale" :cry:

romualb · 26 Juin 2008

et comme ca

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Positionnement CSS</title>
<style>
#page {
   text-align:center;
   margin-left:auto;
   margin-right:auto;
width:600px;

}

#bandeau {
   width:600px;
   height:50px;
   background-color:#00CCFF;
   }
#menu {
 
   float:left;
   width:100px;
   height:400px;
   background-color:#FF6699;
   
   }
#menu_haut {
   
   width:100px;
   height:200px;
   background-color:#66CC33;
   }
#menu_bas {
   
   width:100px;
   height:200px;
   background-color:#CC99CC;
   }
#contenu {
   margin-left:100px;
   width:500px;
   height:400px;
   background-color:#FFCC00;
   text-align:center;
   }
#bloc_news {
   width:150px;
   height:150px;
   background-color:#FF3300;
   margin-left:175px;
   }
#pied_page {
   
   clear:both;
   width:600px;
   height:50px;
   background-color:#33FF99;
   }
</style>
</head>
<body>

<div id="page">

   <div id="bandeau">Ceci est le bandeau</div>
   <div id="menu" align="center">
      <div id="menu_haut">Menu haut</div>
      <div id="menu_bas">Menu bas</div>
   </div>
<div id="contenu">
      <div id="bloc_news">Bloc News</div>
      <p>&nbsp;</p>
      <p>Principe
       </p>
</div>
   <div id="pied_page">Ceci est le pied de page</div>

</div>

</body>
</html>

mahdivitche · 26 Juin 2008

merci romualb

mais toujour même résultat

peut être impossible :cry: