[Résolu] Comment faire des blocks de différentes tailles dans un menu ?

Bonjour,

J’ai un menu horizontal et, comme le texte contenu dans chaque block est de longeur différente, je voudrais comprendre comment le mettre en place avec modx pour que chaque block ait sa propre taille.

Avec la css, normalement j’indique dans une class sa taille afin que les blocks du menu soient adaptés à la longeur du contenu

exemple : | Accueil | Faire un tour | Visiter toutes les pages | Contact | liens | (blocks de différentes tailles)

Seulement, là j’ai tout à la même taille ce qui crée des décalages... (accueil se retrouve dans un block de la taille de Visiter toutes les pages et c’est pas beau) l Donc je voudrais faire une class à la taille de chaque block du menu. Mais comment dire à modx que la class "category0" correspond à Accueil (id0) que la class "category1" correspond au menu Faire un tour (id1) etc... ?

J’ai trafiqué dans tous les sens pendant des heures...  mais il y a quelque chose qui m’échappe chez les chunks !

Merci pour vos réponses !!!

Bien cordialement.

Chris.

Je pense que si tu fais
<ul>
<li> <a href="#">| Accueil |</a> </li>
<li> <a href="#">Faire une tour |</a> </li>
<li> <a href="#">Visiter toutes les pages |</a> </li>
<li> <a href="#">Contact |</a> </li>
<li> <a href="#">Liens |</a> </li>
</ul>

et dans ton css tu mets
ul {list-style:none; display: inline;}
ul li a {color: blue; text-decoration: none; font-weight: bold;}

ça marche normalement
à moin que tu utilises wayfinder ... ou que je n’ai pas compris ce que tu veux

Je pense que ce que ixtenso veut dire c’est qu’il veut que les éléments individuels de sa liste aient une taille différente en fonction de leur contenu.

Visiblement on parle d’un menu horizontal, un peu plus délicat qu’un menu vertical.

Qu’il s’agisse de Wayfinder ou non pour faire ce que tu veux il faut affecter une taille en pixel basé sur l’espace pris par le texte (qui doit alors logiquement être défini en pixel) : classique, mais si on spécifie une hauteur (ce qui est souvent le cas) quand l’utilisateur a besoin d’augmenter la taille du texte, celui-ci peut être mangé en hauteur.

Ca veut dire qu’il faut affecter une id unique à tes éléments de liste.

Avec Wayfinder, la technique que j’utilise c’est

[tt]<li id="item[+wf.docid+] " [+wf.classes+] >[/tt] dans le template défini via &rowTpl. [+wf.docid+] retourne l’ID du document.

Après c’est du classique menu CSS tu utilises simplement l’id pour affecter un style spécifique à ton élément, ici l’item de menu avec l’ID 14 et l’ID7 :

Bonjour et merci à DavidM et HLB pour vos réponses

En fait c’est bien un menu horizontal que je souhaite afficher. J’ai essayé plusieurs choses mais cela ne m’a pas donné satifaction. Je vais essayer la solution proposée par David car, en effet, j’utilise WayFinder pour le menu (j’ai un petit faible pour le déroulement à la sauce ajax des sous-menus) et je n’arrivais pas à saisir vraiment le fonctionnement pour définir pour chaque item comment les lier à la css (je suis un newbie sur modx et je n’ai pas encore tout compris...).

Merci encore pour votre aide, je vais tester et je vous dirai si j’y suis parvenu.

Bonne soirée.

Bien cordialement.

Chris.

Si tu as des problèmes donne nous un lien ou le code qui pose problème, on pourra t’aider

Merci beaucoup David pour ta proposition !

Je ne manquerai pas de venir vous "embêter" avec mes "problèmes". Mais généralement je viens demander de l’aide à près des heures de (de façon à ne pas abuser et puis c’est en forgeant...)
Bon là ce soir, vous ne pouvez rien pour moi, mon serveur vient de planter... >:( j’espère que ce n’est pas modx (sécu ?) que j’ai installé sur ce serveur qui a tout planté !

@ Bientôt !

Bien cordialement.

Chris.

Bonsoir,

Big-up to David pour son aide, le menu marche nickel ! merci encore

Bien cordialement.

Chris.

Merci pour le feedback, content de voir que tout marche pour toi

Wayfinder, c’est de la balle !