Pbme pour centrer un site en css
Pbme pour centrer un site en css - HTML/CSS - Programmation
Marsh Posté le 23-06-2005 à 17:06:27
1- ton div "centreconteneur" ne sert strictement à rien
2- ajoutes à ton CSS
dans #conteneur
margin: 0 auto; |
Ca va mettre les marges latérales en automatique, donc elles seront égales, donc elles vont centrer ton conteneur... sauf dans MSIE qui ne comprend pas trop
Donc on va ajouter dans le CSS de body:
text-align: center; |
Qui, pour une raison inconnue, amène MSIE à centrer le contenu.
Message édité par masklinn le 23-06-2005 à 17:06:59
---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
![[:aloy]](https://forum-images.hardware.fr/images/perso/aloy.gif "[:aloy]")
Marsh Posté le 23-06-2005 à 17:08:50
| FlorentG a écrit : Sauf IE5 et IE6 (en mode Quirks uniquement) |
---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Marsh Posté le 23-06-2005 à 17:21:10
| masklinn a écrit : 1- ton div "centreconteneur" ne sert strictement à rien
|
Pourquoi faire compliqué quand on peut faire simple !
Merci et je vais regarder du coté des marges...N'empeche que c'était quand même plus simple de faire la mise en forme avec des tableaux (pour les novices) ! 
Marsh Posté le 23-06-2005 à 17:29:07
tu rigoles ???
les tableaux c'est la pire chose qui puisse exister pour la mise en page
Marsh Posté le 23-06-2005 à 17:51:23
| Transistor a écrit : Pourquoi faire compliqué quand on peut faire simple ! |
Il n'y a pas de complexité, juste 2 règles dont il faut se souvenir, les marges automatiques pour presque tout le monde et text-align: center pour MSIE ![[:spamafote]](https://forum-images.hardware.fr/images/perso/spamafote.gif "[:spamafote]")
Et dans la mesure où on ne centre habituellement que le corps du document (quand on le centre), ça fait 2 lignes de CSS et 0 de HTML ![[:pingouino]](https://forum-images.hardware.fr/images/perso/pingouino.gif "[:pingouino]")
| gatsusat a écrit : tu rigoles ??? |
stfu
Message édité par masklinn le 23-06-2005 à 17:52:13
---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Marsh Posté le 23-06-2005 à 20:29:32
Reply
Marsh Posté le 23-06-2005 à 21:36:42
| FlorentG a écrit : IE6, avec un doctype Strict, gère le margin: 0 auto; |
Ahhh ok 
---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Sujets relatifs:
- Probleme dans le centrage de mon site
- Donnez moi vos avis sur mon site
- Une idée pour créer un site populaire?
- site elastique
- Besoin d'aides pour un site
- Qui veut m'aider a faire un site web ?
- Question bizarre : comment faire pour logger quelqu'un sur mon site ?
- [design+css] Besoin de conseils pour un 1er site perso
- site sur le xml en java
- je recherche un site pour apprendre le visual basic
Marsh Posté le 23-06-2005 à 16:47:11
Bonjour,
Histoire de vouloir bien faire, j'essaye de réaliser une mise
en page avec des div full css.
J'ai récupéré un modèle sur alsacreations.com que j'essaye d'adapter pour
centrer le contenu. J'ai rajouté un div (celui en rouge) permettant de centrer
tout le reste. Mais maintenant le div "partie centrale" s'est décalée vers le
bas (en fait s'aligne sous le div du menu de gauche). J'avoue que je suis un peu
perdu avec les positions absolutes et relatives, mais bon je désespère pas !
Si quelqu'un pouvait m'éclairé de ses lumières !
Merci à vous
voici le code html de la page :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Largeur fluide, header/menu gauche/contenu/footer.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* CSS issu des tutoriels css.alsacreations.com */
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#header {
height: 100px;
background-color: #99CCCC;
}
#CentreConteneur{
width:100%;
position: absolute;
background-color:red;
text-align:center;
}
#conteneur {
text-align:left;
width: 600px;
background-color:#CCCCFF;
}
#centre {
background-color:#9999CC;
margin-left: 150px;
margin-top:0px;
}
#gauche {
left:0;
width: 150px;
}
#pied {
height: 30px;
background-color: #99CC99;
}
.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
.menugauche li {
margin-bottom: 5px;
}
.menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menugauche a:hover {
text-decoration: none;
}
p {margin: 0 0 10px 0;}
</style>
</head>
<body>
<div id="CentreConteneur">le 1er div qui permet de centrer le "conteneur"
<div id="conteneur">
<div id="header">header <a href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">(voir tous les
modèles)</a>
</div>
<div id="gauche"><p>menu</p>
<p>largeur fixe : 150px</p>
<ul class="menugauche">
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 2</a></li>
<li><a href="">Menu 3</a></li>
<li><a href="">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 />
</div>
<div id="pied">pied de page</div>
</div>
</div>
</body>
</html>