[Résolu] Menu horizontal avec des blocs de différentes tailles

Bonjour,

Sur ma page:
http://www.princessedunjour.com/test/indextest.htm

J'ai affecté un display block sur les liens du menu horizontal.

Chaque block du menu à une taille différente... exprimée en pixels.
J'utilise également des séparateurs (trait horizontal) à gauche et à droite des liens des menus. Pour ce faire, j'utilise à chaque fois des images de taille différente (puisque mes blocks ont des tailles différentes...)

Bref,

Mes questions:
- l'utilisation des pixels est-elle compatible si agrandissement du menu par l'internaute ?
- En agrandissant trop la taille de la police, mon menu passe sur 2 lignes, normal ?

Y a t'il un moyen de simplifier ce menu, en veillant à ce qu'il s'adapte bien à l'agrandissement de la taille de police ?

Merci pour vos lumières

<ul id="menu_haut">
    <li><a id="menu1" title="Accueil" href="#">ACCUEIL</a></li>
		<li><a id="menu2" title="Collections" href="#">COLLECTIONS</a></li>

		<li><a id="menu3" title="Points de vente" href="#">POINTS DE VENTE</a></li>
		<li><a id="menu4" title="Atelier de création" href="#">ATELIER DE CREATION</a></li>
		<li><a id="menu5" title="A propos" href="#">A PROPOS</a></li>
		<li><a id="menu6" title="Contact" href="#">CONTACT</a></li>
    </ul>

ul#menu_haut {
clear: both;
margin: 0 0 0 5px;
padding: 0 0 0 0;
letter-spacing: 3px;
list-style-type: none;
font-family: Arial, Times, serif;
font-size: 10px;
text-align: center;
}
#menu_haut li {
float: left;
}
#menu_haut a {
display: block;
color: #A6A5A5;
text-decoration: none;
text-align: center;
line-height: 20px;
}
#menu1 {
width: 100px;
background: url(menu1-off.png) no-repeat;
}
a#menu1 {
color: #6C3089;
}
a#menu1:hover {
background-color: #E8E8E8;
}
#menu2 {
width: 130px;
background: url(menu2-off.png) no-repeat;
}
a#menu2:hover {
background: url(menu2-on.png) no-repeat;
}
#menu3 {
width: 160px;
background: url(menu3-off.png) no-repeat;
}
a#menu3:hover {
background: url(menu3-on.png) no-repeat;
}
#menu4 {
width: 190px;
background: url(menu4-off.png) no-repeat;
}
a#menu4:hover {
background: url(menu4-on.png) no-repeat;
}
#menu5 {
width: 90px;
background: url(menu5-off.png) no-repeat;
}
a#menu5:hover {
background: url(menu5-on.png) no-repeat;
}
#menu6 {
width: 90px;
background: url(menu-off.png) no-repeat;
}
a#menu6:hover {
background: url(menu6-on.png) no-repeat;
}
#menu_haut a:hover {
color: #6C3089;
}

Modifié par pp51 (10 Aug 2006 - 11:46)

Bonjour !

a écrit :
- l'utilisation des pixels est-elle compatible si agrandissement du menu par l'internaute ?

Oui et non. Si on agrandit trop, ça finira toujours pas poser un problème vu que le conteneur à une taille fixe. Une solution serait de lui donner une taille relative (avec des em par exemple), pour qu'il se redimensionne en suivant la taille de texte.

a écrit :
- En agrandissant trop la taille de la police, mon menu passe sur 2 lignes, normal ?

Oui, bien sûr. Si le conteneur est trop petit pour le contenu, ce dernier passe à la ligne (ou déborde).

a écrit :
Y a t'il un moyen de simplifier ce menu, en veillant à ce qu'il s'adapte bien à l'agrandissement de la taille de police ?

Non, pas vraiment. On ne sait jamais à quel point les textes seront agrandis. Cela posera toujours un problème : le texte finira toujours pas déborder du conteneur ou passer à la ligne.
On peut toujours tenter de faire en sorte que ça se dégrade avec le plus d'élégance possible.

On peut aussi tenter de ruser et proposer des feuilles de styles alternatives avec des tailles de textes plus grande. En modifiant la taille de textes de celle par défaut, et les conteneurs associés, les visiteurs n'auront peut-être pas besoin de redimensionner le texte via les navigateurs.
Modifié par (25 Apr 2006 - 16:09)