Insertion d'un "id" sur un element de menu

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

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

    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 :

    Code HTML:
    <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 :

    Code HTML:
    <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 :
    Code HTML:
    <li><a href="/products">Products</a></li>
    au lieu de
    Code HTML:
    <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

  • #2
    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 :
    Code HTML:
    <li><a href="mon-url" title="titre-du-lien">nom de mon lien</a></li>
    et pas :
    Code HTML:
    <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
    Téléchargez ma conférence sur l'accessibilité du web au JoomlaDay 2012 sur
    http://fr.slideshare.net/Shemzone/la...mladay-fr-2012

    Commentaire


    • #3
      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.

      Commentaire


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

        un petit up

        Commentaire


        • #5
          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.

          Commentaire


          • #6
            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....
            Dernière édition par lefabdu51 à 24/01/2012, 20h44

            Commentaire


            • #7
              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.
              Schtroumpfe toi le Schtroumpf t'aidera.
              Je ne schtroumpfe pas aux demandes de schtroumpf par MP.

              Commentaire


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

                Envoyé par Grand Schtroumpf Voir le message
                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.

                Envoyé par Grand Schtroumpf Voir le message
                bricoler un menu en dur
                j avais pas capté qu il le faisait en dur..... Oupss

                Commentaire


                • #9
                  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

                  Teach your smart little menus to do the DHTML dropdown dance without sacrificing semantics, accessibility, or standards compliance or writing clunky code.


                  Mais comme ce n'était pas supporté par IE, il fallait contourner le pb avec du JS
                  Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

                  Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

                  Commentaire


                  • #10
                    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......

                    Commentaire


                    • #11
                      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

                      Commentaire

                      Annonce

                      Réduire
                      Aucune annonce pour le moment.

                      Partenaire de l'association

                      Réduire

                      Hébergeur Web PlanetHoster
                      Travaille ...
                      X