Help!!! problème pour centrer mon menu

Bonjour,

Je n'arrive pas à centrer mon menu, voici l'exemple le type de menu que j'ai fais:

http://www.aaronbirchphotography.com/

#principal{
position: relative;
width:1024px;
height:469px;
margin-top: 80px; 
border: 1px solid green;
text-align: center;
overflow: hidden;
}

#image_menu {
position: relative;
width: 1024px;
height: 301px;
overflow: hidden;
margin: 0 auto;
}

#image_menu ul {
list-style: none;
margin: 0px;
display: block;
height: 301px;
width: 1024px;
}

#image_menu ul li {
float: left;
}

#image_menu ul li a {
text-indent: -1000px;
background:#FFFFFF none repeat scroll 0%;
border-right: 2px solid #fff;
cursor:pointer;
display:block;
overflow:hidden;
width:80px;
height: 301px;
}

#image_menu ul li.bague a {
background: url(../images/type_bijoux/bague.png) no-repeat scroll 0%;
}

#image_menu ul li.bracelet a {
background: url(../images/type_bijoux/bracelet.png) no-repeat scroll 0%;
}

#image_menu ul li.chapelet a {
background: url(../images/type_bijoux/chapelet.png) no-repeat scroll 0%;
}

#image_menu ul li.collier a {
background: url(../images/type_bijoux/collier.png) no-repeat scroll 0%;
}

#image_menu ul li.manchette a {
background: url(../images/type_bijoux/manchette.png) no-repeat scroll 0%;
width: 225px;
}

.clear {
clear: both;
}
[code=css]

[b]Voici la partie html (php: page dynamique):[/i]

$contenu .= '<div id="principal">';
$contenu .= '<div id="image_menu">';
$contenu .= '<ul>';
$contenu .= '<li class="bague"><a href="#">Bagues</a></li>';
$contenu .= '<li class="bracelet"><a href="#">Bracelet</a></li>';
$contenu .= '<li class="chapelet"><a href="#">Chapelet</a></li>';
$contenu .= '<li class="collier"><a href="#">Collier</a></li>';
$contenu .= '<li class="manchette"><a href="#">Manchette</a></li>';
$contenu .= '</ul>';
$contenu .= '</div>';
$contenu .= '</div>';

Voici mon menu mais je n'arive pas à le centrer.


Merci pour votre aide
Modifié par tipi75 (23 Jan 2010 - 10:58)

Salut,

tu donnes un lien vers un menu qui lui est centré mais l'image que tu donnes ne correspond pas.

Comme ton code nécessite du JavaScript et des images le plus simple serait de nous donner un lien vers une page en ligne car en l'état c'est une vraie galère pour tester.

Petites questions :

* à quoi sert le conteneur #image_menu ? Est-il utilisé par le script ?

* quel est l'intérêt du positionnement relatif ?

* autresinon tu fixes une largeur de 1024px à l'élément UL (ce qui au passage fait beaucoup puisqu'il est préconisé de ne pas dépasser 990px pour les largeurs fixes) et il contient 5 images de 80px de large donc je ne vois pas bien comment elles pourraient être centrées.

* par ailleurs il faut toujours préciser les margin et padding d'un UL
Modifié par Heyoan (23 Jan 2010 - 11:20)

1): Le conteneur #image_menu me sert plus à rien. J'ai modifié récemment, div#principal est le conteneur.

2): L'intérêt du positionnement relatif, je ne sais pas l'intérêt dans mon cas. J'ai simplement repris le code du lien que j'ai fourni.

3): Pourquoi tu ne vois pas comment cela pourrait être centré.

4): ok, je ne savais pas. Mais la difficulté c'est margin-left va changer à cause de mon menu dynamique.

Pour le lien que j'ai mis sur le forum est bon, je veux juste montrer mon bloc d'image (menu dynamique) qui n'est pas centrer par rapport à mon rectangle vert (div#principal).

Voilà...

Merci pour ton aide.
Modifié par tipi75 (23 Jan 2010 - 12:08)

tipi75 a écrit :
Pourquoi tu ne vois pas comment cela pourrait être centré.

Parce que le conteneur est correctement centré (width + margin:auto) mais que les éléments LI en float:left vont forcément se tasser sur la gauche. Pour que ça fonctionne il faudrait (outre les caractéristiques du slider JavaScript que je n'ai jamais utilisé) que la largeur de chaque LI multipliée par le nombre de LI corresponde à la largeur totale du conteneur.

tipi75 a écrit :
Mais la difficulté c'est margin-left va changer à cause de mon menu dynamique.

En l'occurrence je pensais plutôt à

ul { 
	margin: 0;
	padding: 0;
}

As tu une idée pour m'aider?? Aurais tu quelque chose de concret??


Merci de ton aide

tipi75 a écrit :
As tu une idée pour m'aider?? Aurais tu quelque chose de concret??

Eh bien oui :

Heyoan a écrit :
Pour que ça fonctionne il faudrait que la largeur de chaque LI multipliée par le nombre de LI corresponde à la largeur totale du conteneur.

et donc comment tu ferais cela???

tipi75 a écrit :
et donc comment tu ferais cela???

Je ne comprends pas ce que tu ne comprends pas.

Pour 5 images de 80px de large le conteneur devrait faire 5 x 80 = 400px de large.
Pour 6 -> 480px.

Si la question est de le faire de façon dynamique il suffit d'utiliser PHP : pour une page donnée tu alimentes ta variable $contenu et dans le foreach (ou while ou peu importe comment est faite ta boucle) tu comptes le nombre d'images.
Tu déclares ensuite dans ta page :

#principal{ 
	width:<?php echo $nb_LI * 80 ?>px; 
}

je ne sais pas utiliser le php dans le css.
Mais je ne vois pas comment ta façon de faire va régler le problème de centré mon menu:


Comme tu peux voir les images sont placées en haut à gauche du cadre vert. Mais moi je voudrais que le bloc soit centré.


Merci d'avance

Hem... bon je fais un dernier essai.

tipi75 a écrit :
je ne sais pas utiliser le php dans le css.

Maintenant tu sais puisque je viens de te montrer.

tipi75 a écrit :
Mais je ne vois pas comment ta façon de faire va régler le problème de centré mon menu

Essaie de mettre un width:400px au lieu de 1024 à #principal pour voir...