Des images à la place des puces de liste avec son texte centré.

Mon souhait était de lier une image différente à la place de la puce pour chaque action de mon menu tout en centrant le texte en face. Mon second challenge était de ne pas modifier le code « Joomla » mais juste paramétrer mon affichage grâce aux déclarations « css ».
Le code produit par « Joomla » est le suivant.

<div id="menu-activite-niveau1">
               <div class="moduletableactivity">                                                                       
                              <ul class="menu">
                                            <li class="item-480 parent">
                                                           <a href="/veloclub/ecole-de-vtt" >Ecole de VTT</a>
                                            </li>
                                            <li class="item-548 parent">
                                                           <a href="/veloclub/cyclo" >Cyclo</a>
                                            </li>
                                            <li class="item-481 parent">
                                                           <a href="/veloclub/vtt" >VTT</a>
                                            </li>
                                            <li class="item-482 parent">
                                                           <a href="/veloclub/route" >Route</a>
                                            </li>
                              </ul>
               </div>
</div>

Je n’ai rien trouvé sur la toile qui réponde à mon attente, juste des brins de solution par ci par là qui mon permis d’arriver à cette solution.

#menu-activite-niveau1
{
              position: fixed;
              left: 0;
              top: 25%;
              width: 190px;
              margin: 0px 0 0 0;
              z-index: 5;
              background: hsla(239, 100%, 22%, 0.7);
              color: white;
              font-weight: bold;
              font-size: large;
              text-align: left;
              border: solid hsla(239, 100%, 22%, 0.5);
              border-right: none;
              padding: 8px 20px 8px 40px;
              box-shadow: 0 1px 3px black;
              border-radius: 8px 48px 48px 8px;
}

#menu-activite-niveau1 ul
{ 
               margin: 0;
               list-style: none;
               margin-left: -35px;
}

#menu-activite-niveau1 ul li a
{
               float:left;
               display:block;
               height: 100px;
               color: white;
               text-indent: 110px;
               text-decoration: none;
               padding-top: 80px;
}

#menu-activite-niveau1 ul li:first-child a
{
               background: url(../images/local/ecole-vtt.png) no-repeat left center;       
               margin-top: -30px;
}

#menu-activite-niveau1 ul li:nth-child(2) a
{
               background: url(../images/local/cyclo.png) no-repeat left; 
               margin-top: -70px;
}

#menu-activite-niveau1 ul li:nth-child(3) a
{
               background: url(../images/local/vtt.png) no-repeat left; 
               margin-top: -70px;
}

#menu-activite-niveau1 ul li:last-child a
{
               background: url(../images/local/route.png) no-repeat left; 
               margin-top: -70px;
               margin-bottom: -30px;
}

#menu-activite-niveau1 ul li a:hover
{
               float:left;
               height: 100px;
               background: url(../images/local/selection.png) no-repeat left; 
               color: #dd5500;
}

/* Make menu absolute, not fixed, on IE 5 & 6 */
#menu-activite-niveau1
{
               position: absolute;
}

*>#menu-activite-niveau1
{
               position: fixed;
}

Voici l’image du résultat.

J’imagine qu’elle peut être améliorée. Si quelqu’un a mieux à proposer je le remercie par avance de l’ajouter à ce poste.
Bien forumement,
Gillou De Labas.

Hello et bienvenue

Je pense que tu as oublié l'image de rendu. Tu as pas une page en ligne, parce que là dur dur sans les images.

Sinon oui tu peux faire plus simple en CSS :

li {
list-style-image: url(..);
}

Par contre j'avoue que le mixe "/* Make menu absolute, not fixed, on IE 5 & 6 */" (tu supportes VRAIMENT IE5 ? ) VS li:nth-child(3) (support IE9) m'a fait sourire. S'il te faut du support IE8 tu peux aussi hacker le truc avec du sélecteur sibling li+li, li+li+li, etc. mais le nth-child est à mon avis plus propre