Menu en ligne de taille variable

JF Messian a écrit :

Bonjour,

Un dessin vaut mieux qu'un long discours :

http://www.idjinn.com/img/menus-ex.gif

Je cherche à créer une zone de menus de largeur fixe mais pouvant
accueillir un nombre variable de menus (1, 2, 3, 4...) et que chacun se
répartissent dans la largeur disponible. Contrairement à mon exemple,
les titres seront évidemment de largeurs différentes...

Des pistes ?

Non, je vois pas.

Si encore ils pouvaient être tous de même largeur ce serait facile.
Il n'y a qu'à varier le % de la largeur du LI en fonction du nombre.

#menu { width: 750px; height: 22px; list-style: none; padding: 0; }
#menu li { width: 25%; height: 100%; text-align: center;
margin: 0px; padding: 0px; float: left }
#menu a { display: block; margin: 0px 1%; height: 100%;
background: #999; color: white; text-decoration: none; }
#menu a:hover { color: gold; }


<ul id="menu">
<li><a href="1.htm">page 1</a></li>
<li><a href="2.htm">page 2</a></li>
<li><a href="3.htm">page 3</a></li>
<li><a href="4.htm">page 4</a></li>
</ul>

--
sm

Le Sun, 18 Nov 2007 18:39:32 +0100,
messian_nospam@hypermedia-europe.com (JF Messian) écrivait:

Des pistes ?

Compter le nombre de caractères de chaque menu et faire la répartition
de la place en % du total des caractères?

Ex:

Fichier -> 7 car
Edition -> 7 car
Affichage -> 9 car
Historique -> 10 car
Total -> 33
=>
Fichier -> 21.21%
Edition -> 21.21%
Affichage -> 27.27%
Historique -> 30.30%
ou éventuellement, Historique = 100% - déjà utilisé soit 30.31% pour
gérer les problèmes d'arrondis.

--
Michaël DENIS

Michael DENIS <news-mDEL@DEL2nis.net> wrote:

Le Sun, 18 Nov 2007 18:39:32 +0100,
messian_nospam@hypermedia-europe.com (JF Messian) écrivait:

>Des pistes ?

Compter le nombre de caractères de chaque menu et faire la répartition
de la place en % du total des caractères?

Même réponse que pour l'autre poste :

Le site sera intégré avec un C.M.S... du coup le nombre de rubriques
peut varier... et je ne vois pas comment faire le lien entre les CSS et
le nombre de rubriques.

--
Un moyen de garde pour vos enfants ?
http://www.easynounou.com

SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:

Si encore ils pouvaient être tous de même largeur ce serait facile.
Il n'y a qu'à varier le % de la largeur du LI en fonction du nombre.

Oui ça serait une solution... sauf que le site sera intégré avec un
C.M.S... du coup le nombre de rubriques peut varier... et je ne vois pas
comment faire le lien entre les CSS et le nombre de rubriques.


--
Un moyen de garde pour vos enfants ?
http://www.easynounou.com

Le 19/11/2007 08:59, JF Messian a écrit :

Si encore ils pouvaient être tous de même largeur ce serait facile.
Il n'y a qu'à varier le % de la largeur du LI en fonction du nombre.

Oui ça serait une solution... sauf que le site sera intégré avec un
C.M.S... du coup le nombre de rubriques peut varier... et je ne vois pas
comment faire le lien entre les CSS et le nombre de rubriques.

Au contraire, il serait possible de faire varier la largeur avec le
numéro d'ordre de la rubrique, mais ce n'est certainement pas ce que
tu veux :

#menu li { width: 50%; }
#menu li+li { width: 25%; }
#menu li+li+li { width: 12.5%; }
#menu li+li+li+li { width: 6.25%; }
#menu li+li+li+li+li { width: 3.125%; }
...

Dommage qu'il n'y ait pas un sélecteur « - » symétrique du « + », ce qui
permettrait de faire :
#menu li { width: 100%; }
#menu li+li, li+li-li { width: 50%; }
#menu li+li+li, li+li+li-li, li+li+li-li-li { width: 33%; }
...

Le 19/11/2007 09:48, je répondais à JF Messian :

Dommage qu'il n'y ait pas un sélecteur « - » symétrique du « + », ce qui
permettrait de faire :

Au risque de passer pour hérétique, il y a la solution d'une table avec
des largeurs proportionnelles (1* dans le HTML).
http://www.la-grange.net/w3c/html4.01/struct/tables.html#h-11.2.4.4

Olivier Miakinen <om+news@miakinen.net> wrote:

Au contraire, il serait possible de faire varier la largeur avec le
numéro d'ordre de la rubrique, mais ce n'est certainement pas ce que
tu veux :

#menu li { width: 50%; }
#menu li+li { width: 25%; }
#menu li+li+li { width: 12.5%; }
#menu li+li+li+li { width: 6.25%; }
#menu li+li+li+li+li { width: 3.125%; }

Jamais vu ça encore !

Ca fonctionne sur quel navigateur ?

Je viens d'essayé :

li {
display: block ;
float: left ;
text-align: center ;
}

#menu li { width: 100%; }
#menu li+li { width: 50%; }
#menu li+li+li { width: 33%; }
#menu li+li+li+li { width: 25%; }
#menu li+li+li+li+li { width: 20%; }

Aucun résultat... mais j'ai peut-être pas compris un truc !

--
Un moyen de garde pour vos enfants ?
http://www.easynounou.com

Le 19/11/2007 11:43, JF Messian a écrit :

Au contraire, il serait possible de faire varier la largeur avec le
numéro d'ordre de la rubrique, mais ce n'est certainement pas ce que
tu veux :

#menu li { width: 50%; }
#menu li+li { width: 25%; }
#menu li+li+li { width: 12.5%; }
#menu li+li+li+li { width: 6.25%; }
#menu li+li+li+li+li { width: 3.125%; }

Jamais vu ça encore !

Ca fonctionne sur quel navigateur ?

Ça fonctionne sur les navigateurs qui respectent CSS2 :
http://www.yoyodesign.org/doc/w3c/css2/selector.html#adjacent-selectors

Pour être plus précis, ça marche depuis longtemps sur les navigateurs
Gecko, mais pas avec IE6. Pour IE7 je crois que c'est bon (j'ai vérifié
récemment en répondant à Zouplaz que IE7 comprenait bien le sélecteur
d'enfant ">").

Mais ce n'est pas ce que tu veux puisque ça donnera :
<--------------- 50 % -------------><----- 25 % -----><- 12% -><6 %><->

Je viens d'essayer :

li {
display: block ;
float: left ;
text-align: center ;
}

#menu li { width: 100%; }
#menu li+li { width: 50%; }
#menu li+li+li { width: 33%; }
#menu li+li+li+li { width: 25%; }
#menu li+li+li+li+li { width: 20%; }

Aucun résultat... mais j'ai peut-être pas compris un truc !

Non, ça ne peut pas marcher comme ça puisqu'à partir de deux LI tu as
besoin d'une taille de 150 % (183 % pour trois LI, 208 % pour quatre
et 228 % pour cinq).

Olivier Miakinen wrote:

Le 19/11/2007 09:48, je répondais à JF Messian :

Dommage qu'il n'y ait pas un sélecteur « - » symétrique
du « + », ce qui permettrait de faire :

Au risque de passer pour hérétique, il y a la solution
d'une table avec des largeurs proportionnelles (1* dans
le HTML).

==>J'ai pas osé le dire (ici!!(;o))))
Mais ça, ça le fait, tu peux ajouter des menus, la table ne
bouge pas, tant que la typo a la place...

<table width="750" border="0" cellspacing="0"
cellpadding="0">
<tr align="center">
<td>petit menu </td>
<td>tr&egrave;s grand menu </td>
<td>menu</td>
<td>tr&egrave;s tr&egrave;s grand menu </td>
<td>pouf...</td>
</tr>
</table>

--
<|[;o)) METIS
http://www.graphM.com
Pour m'écrire en privé, mettez-moi des oranges...

JF Messian a écrit :

SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:

Si encore ils pouvaient être tous de même largeur ce serait facile.
Il n'y a qu'à varier le % de la largeur du LI en fonction du nombre.

Oui ça serait une solution... sauf que le site sera intégré avec un
C.M.S... du coup le nombre de rubriques peut varier... et je ne vois pas
comment faire le lien entre les CSS et le nombre de rubriques.

en JS :

function ajustMenu() {
var M = document.getElementById('menu').getElemenstByTagName('LI'),
prct = 100/M.length;
for(var i=0; i<M.length; i++) {
M[i].style.width = prct+'%';
}
}


adapter si besoin en code serveur ?

- analyse de l'array rubriques pour en obtenir le nombre
$nombre-de-rubriques = ...
- intégration du width corrigé
$li_width = 100/$nombre-de-rubriques+'%';
dans :
- une css dans la page ( #menu li { width: <?=$li_width ?> } )
- ou d'un style dans chaque LI du menu
<li style="<?=$li_width ?">


Bon, tout ça avec l'espoir que chaque item rentre dans son li sans
devoir s'afficher sur 2 lignes

--
sm