Menu en ligne de taille variable

Le
messian_nospam
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 ?

--
Un moyen de garde pour vos enfants ?
http://www.easynounou.com
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 4
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
SAM
Le #22087511
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">
</ul>

--
sm
Michael DENIS
Le #22087491
Le Sun, 18 Nov 2007 18:39:32 +0100,
(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
messian_nospam
Le #22087471
Michael DENIS
Le Sun, 18 Nov 2007 18:39:32 +0100,
(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
messian_nospam
Le #22087481
SAM
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
Olivier Miakinen
Le #22087461
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%; }
...
Olivier Miakinen
Le #22087451
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
messian_nospam
Le #22087431
Olivier Miakinen

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
Olivier Miakinen
Le #22087421
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).
METIS
Le #22087411
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>
</tr>
</table>

--
<|[;o)) METIS
http://www.graphM.com
Pour m'écrire en privé, mettez-moi des oranges...
SAM
Le #22087401
JF Messian a écrit :
SAM
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
Publicité
Poster une réponse
Anonyme