28220 sujets

CSS et mise en forme, CSS3

[Résolu] Méthodologie de centrage dans la page

Bonjour à tous,
Je me pose un problème de méthodologie pour centrer des boites <div> dans la page du navigateur, sachant qu'elles sont contenues dans un <div> #conteneur.
Pour moi, il existe deux solutions :
1) la boite <div> #conteneur est en position absolue, avec left à 50% et margin-left à -(largeur de la boite)/2 pixels. Comme le montre les exemple dans les tutaux.
2) la boite <div> #conteneur à des marges verticales à 0px et des marges horizontale à auto.
Celon vous qu'elle est la meilleure solution, s'il y en a une ?
Mon manque d'expérience et de recul dans le domaine me font hésiter.
Merci pour votre aide.
Modifié par krakkos (30 Dec 2005 - 16:32)
Bonjour,


Si #conteneur a une largeur fixe (non exprimée en pourcentage pour être plus précis)
Alors si #conteneur est bien enfant direct de body le mieux c'est sans doute :

css

body {
text-align:center; /* ça c'est pour IE */
}

#conteneur {
text-align:left;/* pour rétablir l'alignement du texte à gauche */
margin:0 auto;/* ça c'est pour pas IE  [cligne] */
}


si la largeur de #conteneur est souhaitée en pourcentage, alors même technique que précédemment ou bien inversion complète de l'approche :
on met en marge gauche/droite de #conteneur ou bien en padding gauche/droite de body la valeur =

(100% - largeur_souhaitée_#conteneur) que divise 2.
Modifié par clb56 (30 Dec 2005 - 13:04)
Effectivement dans mon approche, la boite <div> #conteneur à une largeur fixe exprimée en pixels.
Pour toi la meilleur solution pour ma boite #conteneur est donc margin: 0px auto ?
En quoi est-elle préférable à l'autre ?
Le problème avec les marges négatives, c'est qu'une partie du site disparait lorsqu'on réduit la taille de la fenêtre, ce qui n'arrive pas avec l'autre méthode.

Et puis, 

margin: 0 auto ;


ne demande pas de calcul Smiley cligne
En plus Internet Explorer Mac n'aime pas les marges négatives.
La technique des marges négatives est surtout utile pour le centrage vertical, en fait.

<provoc gratuite>
Attention avec le centrage vertical, il provoque des allergies chez certain modérateur de ce forum Smiley lol .
</>
Lanza a écrit :

<provoc gratuite>
Attention avec le centrage vertical, il provoque des allergies chez certain modérateur de ce forum Smiley lol .
</>


Huuum ? Smiley zzzz
Tant qu'à faire, mets plutôt 

margin: 0 auto ;


les unités sont inutiles (uniquement pour la valeur 0, hein !), c'est aussi joli/clair, sinon plus, & c'est toujours ça de pris sur le poids de la page/feuille de style.

Oui je sais, ça change pas grand chose, mais vu le nombre de 0 que je mets dans un fichier CSS, au final ça doit se voir Smiley ravi
clb56 a écrit :



margin:0 auto;/* ça c'est pour pas IE  [cligne] */
}


sur le raphael Goetter CSS2, il met margin est pris partiellement par IE.
ça suffit à IE pour centrer ?
Modifié par joxp (31 Dec 2005 - 10:18)
Bonjour,

IE6.0 en mode strict implémente ce qu'il faut pour centrer de cette manière. Mais pas en mode Quirks. D'autre part, IE5.x ne n'implémente pas.
Laurent Denis a écrit :
Bonjour,

IE6.0 en mode strict implémente ce qu'il faut pour centrer de cette manière.


Ah mais oui effectivement...

Merci pour l'info, j'avais à peu près percuté sur le respect du modèle de boite standard par IE6 en mode strict mais pas sur cet aspect particulier des propriétés css.
Modifié par clb56 (31 Dec 2005 - 11:08)
Laurent Denis a écrit :


Interrogation écrite demain au petit matin



Par petit matin tu entends 13 ou 14 heures si c'est demain je pense ?
Smiley lol

Et pas la peine de prévoir le café, l'aspirine suffira amplement Smiley confused
Modifié par clb56 (31 Dec 2005 - 11:24)
Sujet clos
Aller à