Forum d'entraide PHPFrance

Bonjour,

Je désirerai pouvoir centrer un menu sur ma page et je n'y parviens pas.
Si je met width:auto; dans la classe menu4, elle ne s'adapte pas au contenu mais à la classe parente (container4) ==> D'où le fait que le menu ne se centre pas !

J'ai essayé, encore et encore de multiples tentatives dont le fameux "w\idth" mais rien n'y fait !
Impossible que le menu se centre au milieu de la page !

Voici le code HTML du menu :

<div class="container4">
<div class="menu4">

<ul>
<li class="documents"><a href="#docs">Documents</a></li>
<li class="videos"><a href="#">Videos</a></li>
<li class="photos"><a href="#">Photos</a></li>
<li class="monitor"><a href="#">Options liées</a></li>
<li class="aide"><a href="#">Aide</a></li>
</ul>

</div>
</div>

Voici le code CSS des classes container4 et menu4 :
Avez-vous une suggestion pour m'aider ?

Merci,
raph

Salut (alors tu as avancé pour l'autre thread ? ),

A appliquer dans ta css :
EDIT : apparemment ta css contenait déjà tout ça, donc je te conseille d'incorporer des éléments de ta css dans celle-ci (qui est basique mais qui doit fonctionner), un par un, pour voir ce qui clochait.

Aussi, pour centrer des boites, c'est bête mais il est très utile de les voir. Tu peux donc, dans le contexte de ton développement, ajouter temporairement une bordure aux boites pour pouvoir mieux observer leur comportement (ça va créer des mini-décalages de quelques pixels à cause de la bordure dont il faut être conscient, mais ça se corrigera tout seul quand tu n'en auras plus besoin et que tu élimineras cette directive) :

Salut,

Merci pour ta réponse ...
J'ai rajouté le border:1px dotted red; dans la classe MENU4.

Malgré le fait que dans la classe MENU4 j'ai mis le width en auto, il prend la largeur de la classe CONTAINER4. C'est ça que je ne comprends pas et c'est à cause de ça que le menu ne se centre pas.

La largeur de la classe MENU4 doit etre liée à la largeur des éléments du menu (<ul><li>....</li></ul>).

Pour le centrage j'utilise le margin 0px auto; que j'utilise depuis longtemps et qui marche très bien ... sauf pour ce cas précis.

Pourquoi le width de la classe MENU4 (qui est en auto) prend la largeur de la classe CONTAINER4 (width:932px) ?

Je ne pige pas.


Pour vous aider à m'aider, je poste le code complet de ma feuille de style du menu dans l'espoir que vous lirez le code et que vous puissiez m'aider.
C'est certainement tout bête et j'ai beau chercher, essayer, je ne trouve pas comment centrer les éléments du menu dans le menu:

.container4 {
	background: url(../images/bandeautitre2.png) no-repeat;
	height:30px;
	width:932px;
	padding:0 0 50px 0;
	margin: 0px auto;
	text-align:center;
}
.menu4 {
	font-family: Arial, Helvetica, sans-serif;
	position:relative;
	font-size:1.10em;
	background:transparent;
	width:auto;
	height:30px; 
	margin:0px auto;
	text-align:center;
	border:1px dotted red;
}
.menu4 ul {
	padding:0;
	margin:0;
	list-style-type: none;
}
.menu4 ul li {
	float:left;
	position:relative;
}

.menu4 ul li.users {background:transparent url(../images/user.gif) 9px 6px no-repeat;}
.menu4 ul li.monitor {background:transparent url(../images/monitor.png) 9px 6px no-repeat;}
.menu4 ul li.documents {background:transparent url(../images/documents.gif) 9px 6px no-repeat;}
.menu4 ul li.photos {background:transparent url(../images/photos.png) 9px 6px no-repeat;}
.menu4 ul li.videos {background:transparent url(../images/videos.png) 9px 6px no-repeat;}
.menu4 ul li.aide {background:transparent url(../images/help.png) 9px 6px no-repeat;}
.menu4 ul li.subsubl {background-image:url(../images/next.gif);background-repeat: no-repeat;background-position: top right;}

.menu4 ul li a, .menu4 ul li a:visited {
	display:block;
	text-decoration:none;
	width:auto;
	height:30px;
	color:#fff;
	padding-left:30px;
	padding-right:30px;
	line-height:29px;
}
* html .menu4 ul li a, .menu4 ul li a:visited {
	width:100px;
	w\idth:auto;
	padding-right:30px;
}

.menu4 ul li ul {
	visibility:hidden;
	position:absolute;
	top:0;
	left:0;
	height:0;
	overflow:hidden;
}

/* La première ligne est pour le style pour IE7 et les autres navigateurs ET la seconde ligne est pour IE5.5 et IE 6 */
.menu4 ul li:hover a,
.menu4 ul li a:hover {
	color:#ff6600;
	text-decoration:none;
	border:0;
}
.menu4 ul li:hover ul,
.menu4 ul li a:hover ul {
	visibility:visible;
	width:230px;
	height:auto;
	position:absolute;
	top:30px;
	left:-1px;
	background:#484848;
	border:1px solid #757575;
	overflow:visible;
}
.menu4 ul li:hover ul li a,
.menu4 ul li a:hover ul li a {
	display:block;
	background:transparent; 
	text-decoration:none; 
	color:#ffffff; 
	height:auto; 
	line-height:1.5em; 
	padding:5px 10px 5px 35px; 
	width:230px; 
	w\idth:auto;
}
.menu4 ul li:hover ul li a.drop,
.menu4 ul li a:hover ul li a.drop {
	display:block; 
	color:#000; 
	height:auto; 
	line-height:1.5em; 
	padding:5px 10px 5px 35px; 
	width:230px;
	w\idth:auto;
}
.menu4 ul li:hover ul li ul,
.menu4 ul li a:hover ul li a ul {
	visibility:hidden;
	position:absolute;
	top:0;
	left:0; 
	height:0;
	overflow:hidden;
}
.menu4 ul li:hover ul li a:hover,
.menu4 ul li a:hover ul li a:hover {
	color:#ff6600;
	text-decoration:underline;
}
.menu4 ul li:hover ul li:hover ul,
.menu4 ul li a:hover ul li a:hover ul {
	visibility:visible;
	position:absolute;
	top:0;
	color:#000;
	left:166px;
	height:auto; 
	border:1px solid #909;
}
.menu4 ul li:hover ul li:hover ul.left,
.menu4 ul li a:hover ul li a:hover ul.left {
	left:-166px;
}
.menu4 ul li:hover ul li:hover ul li a,
.menu4 ul li a:hover ul li a:hover ul li a {
	display:block; 
	color:#00f; 
	height:auto; 
	line-height:1.5em;
	padding:5px 10px 4px 35px;
	width:170px; 
	w\idth:140px;
}
* html .menu4 ul li a:hover ul li a:hover ul li a {
	padding:4px 10px 4px 35px;
}

.menu4 ul li:hover ul li:hover ul li:hover a,
.menu4 ul li a:hover ul li a:hover ul li a:hover {
	color:#000; 
	text-decoration:underline;
}

merci pour vos renseignements,
raph

Re,

Cool, au moins tu sais maintenant que ton problème vient de la largeur de l'élément. On avance

Eh bien ton menu prend toute la largeur parcequ'un div est une balise de type block... Et c'est bien le comportement d'un block auquel on n'a pas donné de largeur (il prend toute la place horizontale disponible dans son conteneur), raison pour laquelle je t'ai préparé la propriété width plus haut.

C'est certainement tout bête et j'ai beau chercher, essayer, je ne trouve pas comment centrer les éléments du menu dans le menu:

Dis, je me trompe ou ce n'est pas ce que tu demandais au départ ? (on parlait de centrage du menu à la base, non ?)

Salut,

Oui, je me suis mal exprimé désolé ...

Oui, je suis d'accord, il faut un width, mais si on le met en auto, il doit quand même redimensionner le div par rapport à son contenu (me semble t'il) ?

Mon problème est que si je définis une largeur fixe et que je rajoute des éléments dynamiquement dans le menu, ça déconne et le menu explose.

N'y a t'il pas une autre solution type w\hidth:auto --force; ?

Merci,
raph

Oui, je suis d'accord, il faut un width, mais si on le met en auto, il doit quand même redimensionner le div par rapport à son contenu (me semble t'il) ?

Ben non justement, pas un block (pour un block, "auto" revient à "100%", autrement dit le max). Mais tu peux changer ça avec la propriété display :
Et voilà, ton menu n'est plus un block mais une boîte en ligne (comportement identique à une balise <a> par exemple, qui se dimensionne en fonction de son contenu textuel et ignore les propriétés width/height).

Mon problème est que si je définis une largeur fixe et que je rajoute des éléments dynamiquement dans le menu, ça déconne et le menu explose.

Tu te faciliterais sans doute la vie à tester tes propriétés css sur un menu chargé "à bloc" (petit jeu de mots...) statiquement (et c'est plus facile aussi pour copier/coller ici un exemple qui déclenche le problème, et également pour valider le html...). Ensuite quand tout est prêt et bien testé niveau CSS, tu pourras faire intervenir le dynamisme sereinement

Merci pour tes réponses Calimero.

J'ai mis le display:inline dans la classe MENU4 (qui est un DIV) mais ça ne marche pas.
En effet, la largeur de ce Div (MENU4) reste toujours à 100% de la valeur du Div (CONTAINER4) alors quelle est en AUTO.

J'ai tenté plusieurs classes avec le display Inline, mais le problème reste toujours le même.
Les éléments du menu ne se centrent pas dans le menu.

Ce que je tente de faire, grosso-modo, c'est de centrer le Div MENU4 grâce au Div CONTAINER4 car les éléments du menu s'affichent grâce à un float:left.
Il me faut donc centrer le MENU4 dans le CONTAINER4 ... MAIS pour ça il faudrait que la largeur du DIV MENU4 s'adapte à son au contenu.

Par contre, et c'est peut être important à signaler ...
Si, dans la classe MENU4, je mets :

- Diplay inline;
et
- border 1px dotted red

Voilà ce qui se passe :




Si vous avez des idées ...

Merci,
raph

Ok, trop galère ton truc (tu as des propriétés css de partout qui interfèrent les unes avec les autres, et ça donne le souk).

Il suffirait que tu acceptes de donner une width à ton menu pour que ça marche. Tu vas avoir bien du mal à obtenir ça avec une largeur automatique ET des flottants, pour moi ça va juste pas ensemble (et surtout pas avec display:inline d'ailleurs).

Trop de contraintes = grosse galère. Ou alors le mieux serait de repartir d'une base propre (par exemple la piste display:inline, ou la piste initiale) et y aller par étapes. Rappelle toi quand même qu'il s'agit d'une css, pas de code, et que le tout automatique n'est ni un objectif en soi, ni le mieux.

Oui, en effet

Même après avoir démantelé le code CSS à sa plus simple expression, je ne suis par parvenus à centrer les éléments du menu.
Pour cause, après renseignements, la valeur par défaut de width est de 100% quand elle est en auto. Il est donc impossible d'adapter une largeur à son contenu.
La seule solution est de définir une valeur width à (par exemple) 600px. De cette manière le DIV "container4" centre le DIV "menu4" (qui est à 600px) sur la page.

Il faudrait que je retravaille ce menu pour faire en sorte de ne plus utiliser de float left pour les éléments du menu.
Mais je ne vois pas comment je pourrais faire autrement sachant que les éléments du menu doivent être l'un à côté de l'autre.

Peut etre dois-je faire mon menu en tableau (<table>) ?
Ou une autre solution serait de faire un menu vertical ... J'y réfléchit.

Si quelqu'un à une autre solution à me proposer pour éviter un float:left pour un menu horizontal, je suis preneur.

Merci,
raph

J'ai trouvé et grâce à nouveau à Calimero.
En effet Calimero m'as dit d'utiliser un "display: inline" dans mon css sur le div classe :menu4

Et ça ne marchait pas car l'utilisation des display:inline permettait de centrer tes éléments comme du texte mais puisque mes sous-menu sont des blocs et que c'est impossible d'avoir des blocs dans des inlines, il faut utiliser le code css : display:inline-block;

Mais display:inline-block ne suffit pas. En effet, pour les versions antérieures de mozilla (ex.: firefox2) et pour internet explorer, il faut rajouter les éléments suivants :

/* Pour firefox version 2 */
display:-moz-inline-stack;

/* Pour les navigateurs récents */
display:inline-block;

/* Pour internet explorer */
zoom: 1;
*display: inline;

Et zou! ... Mon menu et désormais centré

Pour ceux que ça intéresse, voici un exemple complet qui vous permettra de vous mettre dans les circonstances si vous rencontrez le même problème.
Le problème étant le centrage de balises <ul><li> considérées comme des blocks en CSS.

Type de menu (liste à puce)

<div class="container4">
<div class="menu4">

<ul>
<li><a href="#">Mes documents</a></li>
<li><a href="#">Mes videos</a></li>
<li><a href="#">Mes photos</a></li>
<li><a href="#">Mes options</a>
    <ul>
        <li><a href="#">option 1</a></li>
        <li><a href="#">option 2</a></li>
        <li><a href="#">option 3</a></li>
        <li><a href="#">option 4</a></li>
    
     </ul>
        </li>
</ul>
</li>

</div>
</div>

CSS basique avec centrage du menu via => display:inline-block;
En effet, les éléments du menu dont en display:block; et float:left;

.container4 {
	height:30px;
	width:932px;
	margin: 0px auto;
	text-align:center;
}
.menu4 {
	font-family: Arial, Helvetica, sans-serif;
	font-size:1.10em;
	position:relative;
	background:transparent;
	height:30px; 
	width: auto;
	margin: 0px auto;
	text-align:left;
	display:-moz-inline-stack;
	display:inline-block;
	zoom: 1;
	*display: inline;
}
.menu4 ul {
	padding:0;
	margin:0;
	list-style-type: none;
}

.menu4 ul li {
	float:left;
	position:relative;
}

Et voilà

Merci,
raph

Content que tu aies trouvé par toi-même (c'est toujours plus gratifiant non ? ).

Bravo, et merci à toi de revenir toujours donner la solution détaillée, c'est sympa pour les autres

@++