Rebonjour à tous!
voila un autre problème que je n arrive pas a résoudre:

j ai un menu avec plusieurs onglets:

Citation : HTML

<ul class="sousmenus">
     <li>La Commune</li>
     <li><a href="presentation.php?id=2&sid=0">Présentation/<br/>Situation</a></li>
     <li><a href="galerie.php">Galerie de Photos</a></li>
     <li>Galerie de Photos</li>
     <li><a href="portraits.php">Portraits d'Ismérusiens</a></li>
     <li><a href="presentation.php?id=4&sid=0">Conseil des Enfants</a></li>
     <li><a href="presentation.php?id=3&sid=0">Jumelage</a></li>
     <li><a href="presentation.php?id=1&sid=0">In English</a></li>
     <li><a href="retro.php">Rétrospectives</a></li>
     <li><a href="cherchercommune.php">Rechercher</a></li>
</ul>

je voudrais que chaque onglet soit de la forme suivante:

Citation

> texte

le ">" representant une petite image gif, et le texte étant le titre du menu.
or je voudrais que si le texte est trop long, la 2ème ligne commence avec le meme retrait que la 1ere, et non pas comme ca:

Citation

> texte
suite

voici le passage de feuille de style concerné:

Citation : CSS

ul.sousmenus {
        font-weight: bold;
        list-style-type: none ;
        margin: 10;
        padding: 0;
/*      display: block;*/
}
ul.sousmenus li {
        font: 16px verdana, sans-serif;
        font-weight: bold;
        color: gold;
        background-color: blue;
        border: 1px solid #6c6;
}

.sousmenus li a {
        margin-left: 30px;
        font: 14px verdana, sans-serif;
        font-weight: bold;
/*      text-align: left;*/
        background-color:gold;
        color: gold;
/*      display: block;*/
        text-decoration: none;
        background:url(icones/sousmenu.gif) no-repeat;
        background-position: left;
}
.sousmenus a:hover {
        background-color:green;
        color: red;
}

j ai essayé avec des margin et padding et autres text-indent mais rien ne marche...
j ai aussi essayé d enlever le "list-style-type: none ;" et d utiliser les puces standard a la place de mes icones, avec "list-style-position: inside;" et "outside", mais mes puces etaient respectivement dans l onglet mais au-dessus (je ne sais pas si c est du au fait que le menu soit vertical, en tout cas ce n est pas une question de place pour les caracteres) et dehors de l onglet (normal avec outside mais ce n est pas ce que je veux).

donc voila, si vous pouviez m eclairer...
merci d avance!

Rajoute dans

Merci de ta réponse!

J ai fait ce que tu m as dit, et avec qq autres petites bricoles ca a réglé le problème de la puce qui n'était pas au bon endroit, mais ca ne règle pas le problème de l alignement du texte

salut

Pour faire ce que tu dis, il me semble qu'il faut utiliser la propriété list-style-position :

http://wiki.media-box.net/documentation/css/list-style-position

bon courage.

merci, mais j avais deja essayé (cf mon 1er message)... sans succès!

je crois que je vais finir par faire un tableau avec une colonne pour les icones et une autre pour le texte mais c est pas tres propre comme methode

Nan transforme ton text en block, et utilise les margin si besoin.

comment ca? en bloc?
en mettant des <p> tu veux dire?

Non tes liens, tu les transforme en block dans ton CSS.



Et si ça ne change pas, tu appliques à ce CSS, un margin-left négatif comme par exemple

ok, c est bon ca marche... presque!

le texte est bien aligné, mais l icone est sur la ligne en dessus, genre:

Citation

>
___texte

bien sur en vrai il n y a pas les " ___" mais je les ai mis pour montrer le décalage.

mais donc les "li a" ne s affichent pas correctement, par contre mon "li" tout court oui!

Citation : CSS

ul.sousmenus {
        font-weight: bold;
/*      list-style-type: none ;*/
        list-style-position: inside;
        margin: 10;
        padding: 0;
/*      display: block;*/
}
ul.sousmenus li {
        list-style-image: url("icones/sousmenu.gif");
/*      display: block;*/
        font: 16px verdana, sans-serif;
        font-weight: bold;
        color: gold;
        background-color: blue;
        border: 1px solid #6c6;
}

ul.sousmenus li a {
        margin-left: 30px;
        font: 14px verdana, sans-serif;
        font-weight: bold;
/*      text-align: left;
        background-color:gold;*/
        color: gold;
        display: block;
/*      text-decoration: none;
        background:url(icones/sousmenu.gif) no-repeat;
        background-position: left;*/
}
ul.sousmenus a:hover {
        background-color:green;
        color: red;
}

en fait mon <li> tout court ne s affiche pas bien non plus :S

si je mets display:block, ca met le texte une ligne en dessous de l icone.

et si je le mets pas, ca le met bien sur la meme ligne mais du coup si le texte fait 2 lignes, il ne sera pas aligné (la 2e ligne scommencera sous l icone au lieu de commencer sous le texte de la 1ere ligne)

bref, je ne vois pas comment avoir une icone + un block sur la meme ligne



sinon, j ai un tableau et je voudrais que les cases changent de couleur quand on passe la souris dessus. j arrive a changer la couleur du background mais pas de la case en entiere et je ne peux pas "tricher" avec les padding car certaines cases ont 2 lignes et d autres 1 seule, donc le padding des cases de 1 ligne n arrive jamais jusqu au bord de la case...
Voila ce que j ai fait:

<citation CSS></citation>

Merci encore de votre aide passée et future!