28172 sujets

CSS et mise en forme, CSS3

Menu horizontale à taille fixe

Bonjour tout le monde,

Je viens vers vous avec une petite problématique à laquelle je n'ai pas de trouver de solution avec notre ami commun (Google)


Sur un site, j'ai un menu horizontal avec des sous rubriques déroulantes. J'ai fais ceci grâce à du CSS pure (sans JS) et ca fonctionne très bien.

Mon soucis est le suivant: Mon Menu doit faire toute la largeur du site, les rubriques principales doivent donc être réparties sur toute la largeur. Le soucis, c'est que le texte de ces rubriques peut changer (d'une langue à l'autre, et même au fil du temps, ceci étant géré depuis un BO en PHP).

Dès lors, existe-il une solution en CSS pour que la taille de tous les UL composant les catégorie principales de mon menu s'adaptent automatiquement pour que la somme totale de leur largeurs respectives soit toujours la même ?

Voici le code de mon menu (Je vous donne le code généré, inutile de vous mette le code PHP)


   <style type="text/css">
    	body {behavior: url(csshover.htc);}
    
		div#menuHorizontal a {color:#FFFFFF; font-family:arial; font-size:13px; font-weight:bold;}
		
		div#menuHorizontal ul {padding: 0; margin:0px; background: white; text-align:center}

		div#menuHorizontal li.sousmenu {background:url(templates/Original/images/cdh_menu_bleu.gif) 0 -13px; height:30px; border-right:solid 1px #FFF;}
		div#menuHorizontal li.sousmenu2 a:hover {color:#d0396e;}
		div#menuHorizontal li.plop { background-color:#666666;}
		
		div#menuHorizontal ul.niveau2 {margin-top:6px; padding:5px; border-top:solid 1px #FFF; background:url(templates/Original/images/menuBg.png);}
		
		div#menuHorizontal ul li {position:relative; list-style: none; float:left;}
		div#menuHorizontal ul ul {position: absolute; display:none;width:200px;}
		div#menuHorizontal li a {text-decoration: none; padding: 4px 8px 4px 8px; display:block; text-align:left;}
		div#menuHorizontal li.sousmenu2 a {font-size:11px; font-family:arial; padding:0; font-weight:normal; width:200px;}
		div#menuHorizontal ul.niveau1 li.sousmenu:hover ul.niveau2 {display:block;} 
		
		div#SearchBar {width:100%; height:40px; padding-top:5px;}
		div#SearchBar label {font-family:arial; font-size:12px; font-weight:bold; color:#6E6E6E; background:url(templates/Original/images/french/loupe.gif) no-repeat; padding-left: 20px;}
		div#SearchBar a {color:6E6E6E;}
		.SearchText {width:120px; height:18px; font-size:10px; color:#000000;}
		.SearchSubmit {background-color:#4d5264; font-family:arial; font-weight:bold; font-size:10px; color:#FFF; padding:2px 2px 2px 2px; border:none;}
		.DropDown {height:18px; font-size:10px; color:#000000; width:250px;}
    </style>



	<div id="menuHorizontal">	
    	<ul class="niveau1">
   			<li class="sousmenu">
				<a href="#">Accueil</a>
			</li>
   			<li class='sousmenu' >
				<a href='http://preprod2.comptoirdelhomme.com/soin-visage-c-1.html'>Soin Visage</a>
				<ul class='niveau2'>
					<li class='sousmenu2'>
						<a href='http://preprod2.comptoirdelhomme.com/gel-nettoyant-visage-homme-c-1_9.html'>&nbsp;Nettoyant</a>
					</li>
					<li class='sousmenu2'>
						<a href='http://preprod2.comptoirdelhomme.com/gommage-exfoliant-visage-homme-c-1_10.html'>&nbsp;Gommage & exfoliant</a>
					</li>
					<li class='sousmenu2'>
						<a href='http://preprod2.comptoirdelhomme.com/masque-visage-homme-c-1_12.html'>&nbsp;Masque visage</a>
					</li>
					<li class='sousmenu2'>
						<a href='http://preprod2.comptoirdelhomme.com/creme-hydratante-visage-homme-c-1_11.html'>&nbsp;Creme hydratante</a>
					</li>
					<li class='sousmenu2'>
						<a href='http://preprod2.comptoirdelhomme.com/autobronzant-c-1_56.html'>&nbsp;Autobronzant</a>
					</li>	
				</ul>
			</li>
			<li class='sousmenu' >
				<a href='http://preprod2.comptoirdelhomme.com/rasage-c-2.html'>Rasage</a>
				<ul class='niveau2'>
					<li class='sousmenu2'>
						<a href='http://preprod2.comptoirdelhomme.com/soin-avant-rasage-c-2_16.html'>&nbsp;Soin avant rasage</a>
					</li>
					<li class='sousmenu2'>
						<a href='http://preprod2.comptoirdelhomme.com/produit-de-rasage-c-2_17.html'>&nbsp;Mousse & crème à raser</a>
					</li>
				</ul>
			<§li>
			<li class="sousmenu">
				<a href="http://preprod2.comptoirdelhomme.com/bestseller.php">Best Sellers</a>
			</li>
			<li class="sousmenu" style='border:none;'>
				<a href="http://preprod2.comptoirdelhomme.com/manufacturers.php" style='padding: 4px 9px 4px 8px;'>Marques</a>
			</li>
		</ul>
	</div>


Merci pour votre aide
Modifié par nihaoma (23 Jun 2009 - 13:26)
Bonjour,

Non désolé, je n'ai jamais réussi à trouver une solution propre à ce problème.
J'avais finalement décider de mettre des images, et du coup, c'était au graphiste de se débrouiller pour faire toutes les images avec les bonnes tailles réparties. cette méthode retirait la possibilité de changer le texte depuis le BO, mais dans le mesure ou ceci était pour un menu principal de site, le texte change finalement assez peu.

bon courage
Salut,

J'avais fait un menu comme cela pour un site il y a quelques années. Il n'est plus en l'état car la personne en charge du site l'a modifié, et n'a pas voulu refaire le travail de mise en forme que j'avais fait.
En gros, j'avais 8 liens dans le menu, donc je partais sur une largeur moyenne de 12.5% de la largeur pour chaque lien. Mais bien évidemment, certains liens étaient courts, d'autre longs. Au final j'avais fais la somme totale du nombre de lettre, ce qui m'a permis de faire un ratio selon les liens, et en attribuant des classes à chaque lien, j'avais pu leur donner une largeur entre 14 et 10% dans une largeur totale de 99% pour éviter les problèmes sur IE. Et ensuite j'avais ajusté un peu à l'oeil. J'en avais sué pour le faire !

Mais c'était il y a quelques années. Maintenant, il serait peut être intéressant de se pencher sur le display : inline-block, globalement plus utilisable qu'avant, qui permettrait ce genre de résultat sans pour autant faire des calculs scientifiques ni d'approximation visuelle. Smiley smile
Sujet clos
Aller à