personnalisation css > centrer block

[omzen]

bonjour les ami(e)s,

Je suis sur RapidWeaver (quel bonheur !) et je personnalise les modèles en fonction de mes besoins or là je ne parviens pas à centrer mon menu au milieu de la page.
Je ne comprends pas ce système de position relative. Quelqu'un pourrait-il m'y aider ?

margin:auto; ne marche pas

Merci

code de la page citée

#navcontainer {
	position: relative;
	top: 1px;
	left: 15px;
	width: 900px;
	font-size: 93%;
	margin: 0;
	line-height: normal;
	height: 41px;
	background: no-repeat;
	text-align: left;
	text-decoration: none;
}

#navcontainer #current {
	background: url(images/selected.gif) left no-repeat;
}

#navcontainer .currentAncestor {

}

/* Parent - Level 0 */

#navcontainer ul {
	margin: 0;
	padding: 0px 35px 0px 0px;
	list-style: none;
	text-decoration: none;
	background: url(images/selected.gif) left no-repeat;
}

#navcontainer li {
	display: inline;
	float: left;
	background: url(images/selected.gif) left no-repeat;
}

#navcontainer a {
	float: left;
	display: block;
	padding: 5px 15px 4px 6px;
	color: white;
	background: no-repeat left;
	text-decoration: none;
}

 

[[MGZ] Shralldam]

position: relative sert à décaler un élément de sa position de référence initiale, c'est à dire celle qui est définie par le flux (l'ordre dans lequel on écrit les balises HTML et la succession naturelle de ces éléments lors du rendu de la page). On se sert le plus souvent de position: relative pour pouvoir positionner un élément enfant avec la valeur absolute. En clair, on met position: relative sur l'élément parent, puis position:absolute sur l'élément enfant pour le positionner à partir des coordonnées de référence de l'élément parent.

Pour que le truc margin: 0 auto fonctionne, il faut que la largeur de l'élément soit définie avec la propriété width (en pixels, en %, en em…).

En outre, si j'ai bien compris, c'est #navcontainer que tu veux centrer ? Si c'est le cas, tes propriétés left et top empêchent probablement le centrage (puisque tu fixes des valeurs de décalage par rapport au flux de 1 pixel en haut et 15 pixels depuis la gauche).

Je n'ai pas vu ta page, mais bon si j'ai bien compris ce que tu veux (sinon honte sur moi :rateau: ) ton code pour #navcontainer devrait plutôt ressembler à ça :

#navcontainer {
        position: relative;
	width: 900px;
	font-size: 93%;
	margin: 0 auto;
	line-height: normal;
	height: 41px;
	background: no-repeat;
	text-align: left;
	text-decoration: none;
}

Essaie toujours pour voir...

 

[omzen]

Merci pour ta réponse, eh oui tu as bien raison sur le principe, je suis d'accord mais vois-tu ça ne fonctionne pas comme je le voudrais.

Le menu devrait être centrer en haut de la page OR il reste collé sur la gauche de la page malgré les modifications.

ça ne serait pas ça qui clocherait par hasard :

#navcontainer a {
float: left;
display: block;
padding: 5px 15px 4px 6px;
color: white;
background: no-repeat left;
text-decoration: none;

site en question http://www.pierrotbuto.Fr

 

[[MGZ] Shralldam]

Centrer le texte dans la DIV parente, et mettre #navcontainer ul en display: inline-block. IE7 ne connait pas cette valeur pour display, il faut donc ajouter une petite connerie pour que ça marche (source)...

#navcontainer {
        position: relative;
	width: 900px;
	font-size: 93%;
	margin: 0 auto;
	line-height: normal;
	height: 41px;
	background: no-repeat;
	text-align: center;
	text-decoration: none;
}

#navcontainer ul {
        display: inline-block;
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
	background: url(images/selected.gif) left no-repeat;
        /* Correctif IE */
        zoom:1;
        *display: inline;
}

Il faut aussi enlever la margin-left: 50px sur ton #wrapper, elle ne sert apparemment à rien.

 

[omzen]

ça marche du tonnerre, en effet !!

Merci [MGZ] Shralldam pour ton aide précieuse ;-)