[RÉGLÉ] Insertion d'un "id" sur un element de menu

[Toldo171]

Bonjour,

Je suis en train d'integrer un site internet que j'ai developpe en HTML5/CSS3 sur Joomla, et je suis confronte a quelques problemes, notamment en ce qui concerne la mise en forme CSS.

J'ai cree un nouveau module "header_menu" pour recreer le menu en haut de mon site. Voila ce que ca donne :

<ul>
	<a href="index.php"><li id="hover_radius">Home</li></a>
	<a href="http://store.buglabs.net/index.php"><li>Store</li></a>
	<a href="/products"><li>Products</li></a>
	<a href="/services"><li>Services</li></a>
	<a href="/about_us"><li>About us</li></a>
	<a href="/support.php"><li id="no_separator">Support</li></a>
</ul>

a ete remplace, dans mon template, par :

<jdoc:include type="modules" name="header_menu" />

Jusque la rien de sorcier. Mais a l'implementation du menu sur Joomla, deux problemes surviennent :
- Les liens sont crees sur le texte, et non sur la balise <li>. Par exemple, on a :

<li><a href="/products">Products</a></li>

au lieu de

<a href="/products"><li>Products</li></a>

- les "id" ne sont pas prises en compte.

D'ou mes deux questions:
- Comment ajouter un "id" a un element de menu ?
- Comment indiquer a joomla que je souhaite que mes liens soient a l'exterieur des <li> ?

J'espere que j'ai ete assez clair,

Cordialement,

Toldo171

[shemzone]

Re : Insertion d'un &quot;id&quot; sur un element de menu

Bonjour
Rien à voir avec ton problème mais, si je peux me permettre, je sais que HTML5 est plutôt souple mais j'ai été interloqué par ta phrase "je souhaite que mes liens soient a l'exterieur des <li> ?".
Si envelopper des éléments dans un élément <a> ne me choque pas, perso et naturellement, je ferais :

<li><a href="mon-url" title="titre-du-lien">nom de mon lien</a></li>

et pas :

<a href="mon-url" title="titre-du-lien"><li>nom de mon lien</li></a>

C'est mon avis.
Un rapide coup d'oeil sur http://www.alsacreations.com/article...ouveautes.html ou http://html5doctor.com/nav-element/ ou encore http://dev.w3.org/html5/spec/Overvie...he-nav-element

[Toldo171]

Re : Insertion d'un &quot;id&quot; sur un element de menu

J'enveloppe la balise <li> dans la balise <a> car je veux que tout le cadre contenant le lien soit cliquable, et pas seulement le texte du lien lui-meme. De plus, j'ai un evenement :hover sur l'ensemble du cadre <li>. Bref, je pense utiliser la bonne methode en ce qui concerne ce point, mais merci pour tes liens.

[Toldo171]

Re : Insertion d'un &quot;id&quot; sur un element de menu

un petit up

[dmcleod69]

Re : Insertion d'un &quot;id&quot; sur un element de menu

bonjour,

juste pour compléter ce que dit shemzone, je ferais comme lui et si tu veux que tout le cadre soit cliquable je dirais passe tes balises <a> en display:block et indique largeur et hauteur.

cordialement.

[lefabdu51]

Re : Insertion d'un &quot;id&quot; sur un element de menu

<li><a href="/products">Products</a></li>

Et perso premiere fois que j entends parler d un :hover sur un li .
C est ca qui me choques deja.
Et rien ne t empeche de mettre un background sur le li pour voir ce que ca donnes....et tu t apercevras que tu n as qu as rajouter un padding pour l'agrandir comme tu veux ton li....

Sert toi de beez20 ... quand tu survoles un lien c est la balise li qui determines la zone cliquable... elle changes de couleur suivant ses dimensions....

[Grand Schtroumpf]

Re : Insertion d'un &quot;id&quot; sur un element de menu

Bonjour,
je serai encore plus radical : bricoler un menu en dur alors que le système de menu de Joomla permet un administration efficace, intégration de la gestion des droits, de l'id que tu cherches et plus si affinités, (sans parler des extensions de menu existantes) c'est comme disait Coluche utiliser son intelligence à ses dépents...
Regarde par exemple le menu du portail Joomla.fr : tu as l'illustration d'un menu avec une structure en ul li a et des onglets cliquables (comme dis plus haut avec des padding et des display:block. Je ne suis pas spécialiste W3C mais je pense en plus qu'un empilage ul a li n'est pas cachère.

[lefabdu51]

Re : Insertion d'un &quot;id&quot; sur un element de menu

je pense en plus qu'un empilage ul a li n'est pas cachère.

C est clair ul = conteneur a = contenu li contenant... ca reviens a mettre de l eau a l exterieur d une bouteille .... en esperant la remplir.

bricoler un menu en dur

j avais pas capté qu il le faisait en dur..... Oupss

[ghazal]

Re : Insertion d'un &quot;id&quot; sur un element de menu

@lefabdu51

li:hover
--> au moins depuis 2003
A List Apart: Articles: Suckerfish Dropdowns

http://www.alistapart.com/articles/dropdowns/

Mais comme ce n'était pas supporté par IE, il fallait contourner le pb avec du JS

[lefabdu51]

Re : Insertion d'un &quot;id&quot; sur un element de menu

merci pour le renseignement...mais comme je l ais dit premiere fois que je vois ca......

[Toldo171]

Re : Insertion d'un &quot;id&quot; sur un element de menu

Bonjour,

Tout d'abord, j'aimerais bien qu'on m'explique ou il est inscrit que j'avais code mon menu en dur... Je ne savais pas qu'ajouter un module avec un jdoc:include dans le template, puis l'administrer grace a Joomla etait du codage en dur. Je vois que les nouveaux membres sont accueillis chaleureusement dans ce forum, dans le sarcasme et la bonne humeur.

Bref, je tiens a remercier dmcleod69, qui a su me mener vers la solution. Apres une petite revue du code de mon header, pour l'adapter au HTML genere par Joomla!, j'ai en effet determine des padding a mes elements <a>, et supprime les padding des balises <li>, afin que ce soient les balises <a> qui determinent les dimensions des cadres. Je n'ai pas eu besoin de passer les balises <a> en block.

Pour repondre a mon autre question, en ce qui concerne les "id" sur les elements de menu, j'ai tout simplement utilises ceux generes par Joomla!

li:hover --> au moins depuis 2003

En effet, le hover sur la balise <li> est tout a fait autorise, je l'ai donc laisse, car dans mon cas c'est le moyen le plus efficace d'arriver a mes fins. Mais c'est vrai que ce n'est pas commun.

Enfin, en ce qui concerne le pattern <a><li></li><a>, je ne suis sur de rien. Je sais qu'il est interdit d'inclure une balise block dans une balise inline, mais ici le tag <li> est particulier, puisqu'il est de type list-item (ni block ni inline). Je crois que nous avons besoin d'un specialiste HTML5 pour repondre a cette question