Se connecter avec
S'enregistrer | Connectez-vous

CSS : Alignement de blocs

Dernière réponse : dans Programmation

Bonjour,
J'ai un petit problème d'alignement de mes blocs. Voici le code :
  1. <body>
    

  2.      <div id="bandeau">Ceci est le bandeau</div>
    

  3.      <div id="menu">Test</div>
    

  4.      <div id="contenu">Ceci est le contenu</div>
    

  5.      <div id="pied_page">Ceci est le pied de page</div>
    

  6. </body>

  1. div {
    

  2. 	text-align:center;
    

  3. 	}
    

  4. div#bandeau {
    

  5. 	width:600px;
    

  6. 	height:50px;
    

  7. 	background-color:#00CCFF;
    

  8. 	margin:0px auto;
    

  9. 	}
    

  10. div#menu {
    

  11.     float:left;
    

  12.     width:100px;
    

  13.     height:400px;
    

  14.     background-color:#FF6699;
    

  15. 	}
    

  16. div#contenu {
    

  17.     float:left;
    

  18. 	width:500px;
    

  19. 	height:400px;
    

  20. 	background-color:#FFCC00;
    

  21. 	}
    

  22. div#pied_page {
    

  23. 	clear:both;
    

  24. 	width:600px;
    

  25. 	height:50px;
    

  26. 	background-color:#33FF99;
    

  27. 	margin:0px auto;
    

  28. 	}

Je n'arrive tout simplement pas à aligner le bloc menu et contenu au centre de ma page comme le bandeau et le pied_page.
J'ai essayer de mettre "margin:0px auto;" dans le menu et contenu et j'ai essayer de jouer avec le float mais sans résultat.

Quelqu'un peut m'aider ? Merci :hello: 

Autres pages sur : css alignement blocs

Lassé par la pub ? Créez un compte

Salut,
Il reste seulement le bloc menu qui est encore à gauche. Le bloc contenu est à sa place. Voici ce que j'ai faite :
  1. div#conteneur {
    

  2.   width:600px
    

  3.   height:400px;
    

  4.   margin:auto;
    

  5.   }
    

  6. div#menu {
    

  7. 	float:left;
    

  8. 	width:100px;
    

  9. 	height:400px;
    

  10. 	background-color:#FF6699;
    

  11. 	}
    

  12. div#contenu {
    

  13. 	width:500px;
    

  14. 	height:400px;
    

  15. 	background-color:#FFCC00;
    

  16. 	}

  1. <body>
    

  2. 	<div id="bandeau">Ceci est le bandeau</div>
    

  3.   <div id="conteneur">
    

  4.      <div id="menu">Test</div>
    

  5. 	   <div id="contenu">Ceci est le contenu</div>
    

  6. 	</div>
    

  7. 	<div id="pied_page">Ceci est le pied de page</div>
    

  8. </body>
    

  9.  
  10. Une solution ?
    

  11.  
  12. Merci

Ça ne fonctionne toujours pas... Je vous remet le code complet jusquà maintenant.
  1. div {
    

  2. 	text-align:center;
    

  3. 	}
    

  4. div#bandeau {
    

  5. 	width:600px;
    

  6. 	height:50px;
    

  7. 	background-color:#00CCFF;
    

  8. 	margin:auto;
    

  9. 	}
    

  10. div#conteneur {
    

  11.     width:600px
    

  12.     height:400px;
    

  13.     margin:auto;
    

  14.     text-align:center;
    

  15.   }
    

  16. div#menu {
    

  17. 	float:left;
    

  18. 	width:100px;
    

  19. 	height:400px;
    

  20. 	background-color:#FF6699;
    

  21. 	}
    

  22. div#contenu {
    

  23. 	width:500px;
    

  24. 	height:400px;
    

  25. 	background-color:#FFCC00;
    

  26. 	}
    

  27. div#pied_page {
    

  28. 	clear:both;
    

  29. 	width:600px;
    

  30. 	height:50px;
    

  31. 	background-color:#33FF99;
    

  32. 	margin:auto;
    

  33. 	}

  1. <body>
    

  2.     <div id="bandeau">Ceci est le bandeau</div>
    

  3.     <div id="conteneur">
    

  4.         <div id="menu">Test</div>
    

  5.         <div id="contenu">Ceci est le contenu</div>
    

  6.     </div>
    

  7.     <div id="pied_page">Ceci est le pied de page</div>
    

  8. </body>

Je continu a faire des tests, quelqu'un à une autre solution?
Merci de votre aide!

je comprends pas là.
Tu veux qu'il soit centré sur la page mais à gauche du bloc contenu ? ca veut dire que ton bloc contenu se retrouve entre le menu centré et le bord droit de ta page ? pas tres logque ton truc. t'as pas un lien qu'on puisse voir de quoi ca a l'air ??

J'ai finalement trouvé... Pour les intéressés, voici le code.
  1. div {
    

  2. 	text-align:center;
    

  3. 	margin-left: auto;
    

  4. 	margin-right: auto;
    

  5. 	}
    

  6. div#bandeau {
    

  7. 	width:600px;
    

  8. 	height:50px;
    

  9. 	background-color:#00CCFF;
    

  10. 	}
    

  11. div#conteneur {
    

  12. 	width: 600px;
    

  13. 	height: 400px;
    

  14. }
    

  15. div#menu {
    

  16. 	float:left;
    

  17. 	width:100px;
    

  18. 	height:400px;
    

  19. 	background-color:#FF6699;
    

  20. 	}
    

  21. div#contenu {
    

  22. 	float:left;
    

  23. 	width:500px;
    

  24. 	height:400px;
    

  25. 	background-color:#FFCC00;
    

  26. 	}
    

  27. div#pied_page {
    

  28. 	clear:both;
    

  29. 	width:600px;
    

  30. 	height:50px;
    

  31. 	background-color:#33FF99;
    

  32. 	}

  1. <body>
    

  2. 	<div id="bandeau">Bandeau</div>
    

  3. 	<div id="conteneur">
    

  4. 		<div id="menu">Menu</div>
    

  5. 		<div id="contenu">Contenu</div>
    

  6. 	</div>
    

  7. 	<div id="pied_page">Pied de page</div>
    

  8. </body>

Merci à tous pour votre aide! :hello: 
Lassé par la pub ? Créez un compte

Créer un nouveau sujet