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, 19h44
            Mon site de documentation sur Joomla et le CCK K2 : http://documentation.informaticien51.fr
            Une notice pour le CCK K2 ( mise à jour le 01/06/2015) :
            http://documentation.informaticien51...couverte-de-k2

            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
                Mon site de documentation sur Joomla et le CCK K2 : http://documentation.informaticien51.fr
                Une notice pour le CCK K2 ( mise à jour le 01/06/2015) :
                http://documentation.informaticien51...couverte-de-k2

                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

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

                  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 le nouveau service (en Beta) de la base de connaissance https://kb.joomla.fr

                  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......
                    Mon site de documentation sur Joomla et le CCK K2 : http://documentation.informaticien51.fr
                    Une notice pour le CCK K2 ( mise à jour le 01/06/2015) :
                    http://documentation.informaticien51...couverte-de-k2

                    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
                      1 sur 2 < >

                      C'est [Réglé] et on n'en parle plus ?

                      A quoi ça sert ?
                      La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                      Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                      Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                      Comment ajouter la mention [Réglé] à votre discussion ?
                      1 - Aller sur votre discussion et éditer votre premier message :


                      2 - Cliquer sur la liste déroulante Préfixe.

                      3 - Choisir le préfixe [Réglé].


                      4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                      2 sur 2 < >

                      Assistance au forum - Outil de publication d'infos de votre site

                      Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                      Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                      Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                      UTILISER À VOS PROPRES RISQUES :
                      L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                      Problèmes connus :
                      FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                      Installation :

                      1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                      Archive zip : https://github.com/AFUJ/FPA/zipball/master

                      2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                      3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                      4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                      5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                      6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                      et remplacer www. votresite .com par votre nom de domaine


                      Exemples:
                      Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                      Télécharger le script fpa-fr.php dans: /public_html/
                      Pour executer le script: http://www..com/fpa-fr.php

                      Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                      Télécharger le script fpa-fr.php dans: /public_html/cms/
                      Pour executer le script: http://www..com/cms/fpa-fr.php

                      En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                      Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                      Voir plus
                      Voir moins
                      Travaille ...
                      X