Menu CSS et icones... casse tete

[NextGeneration]

Bonjour à tous.

J'ai mis sur mon site un menu en CSS, qui ressemble vaguement a ce qu'on peut trouver avec les softs dotnet.



J'aurais voulu mettre a gauche des items du menu, des icones silk. Vu le CSS du menu, ça me parait pas facile...

Code: Tout sélectionner

.navlist
{
   padding: 0 1px 1px;
   margin: 0;
   font: Verdana, Sans-serif;
   filter:alpha(opacity=40);
   opacity: 0.4;
   -moz-opacity:0.4;
   background: #eeeeee;
   width: 177px;
}
.navlist li
{
   list-style: none;
   margin: 0;
   font-size: 0.9em;
   text-align: left;
}
.navlist li a
{
   display: block;
   padding: 0.25em 2em 0.25em 0.75em;
   border-left: 2em solid #dddddd;
   background: #eeeeee;
   text-decoration: none;
}
.navlist li a:link { color: #eeeeee; text-decoration: none;}
.navlist li a:visited { color: #eeeeee; text-decoration: none;}
.navlist li a:hover
{
   border-color: #ffffff;
   font-weight: bold;
   color: #000000;
   background: #ffffff;
   text-decoration: none;
}


Vu que c'est l'élément 'li' qui dessine en quelque sorte le carré a gauche , je vois pas trop comment ajouter une icone, a part en créant une classe supplémentaire pour chaque item avec un background-image: url('') left no-repeat; mais c'est pas vraiment très classe comme solution

[Lebleu]

Salut NextGeneration,

Vu que c'est l'élément 'li' qui dessine en quelque sorte le carré a gauche , je vois pas trop comment ajouter une icone, a part en créant une classe supplémentaire pour chaque item avec un background-image: url('') left no-repeat; mais c'est pas vraiment très classe comme solution

Si tu veux une icône différente pour chaque item, je crois que c'est tout ce qu'il te reste à faire

@micalement

[Dexenium]

Oui je dis comme le bleu.
Moi j'ai fais comme ça :

Code: Tout sélectionner


ul#pouet {
   margin: 0;
   padding: 0;   
   list-style-type: none;   
   line-height: 20px;   
}


ul#pouet li {

    background: url(images/puce.gif) no-repeat 0 8px;
   margin: 0;
   padding: 0 0 0 10px;
   padding-bottom: 10px;

}


Et ça marche plutôt pas mal mais là j'affiche toujours la même icone.
Avoir une classe pour chaque ligne va te faire perdre l'avantage de ta CSS, mais je ne vois pas d'autre solution, sinon il te reste la possibilité de faire un paragraphe avec un tableau dedans, c'est pas très W3C mais bon...

[NextGeneration]

Merci pour vos conseils

J'ai réussi a faire à peu pres ce que je voulais, j'ai par contre viré le carré plus sombre a gauche de chaque item. Si la solution intéresse, je peux poster, par contre c'est très crade niveau css...