galère avec un menu css

[skyll]

Hello

J'essaie de créer un menu css (jusque la, basique)....
avec une image en fond (classique)... la "puce" seras intégrée dans l'image de fond (mais à droite)...
impossible de caler les texte (alignée a droite à 5mm de la puce sur l'image)
je sais pas si je m'exprime bien....
donc un petit dessin :



le code source :
html :

Code: Tout sélectionner

<div id="menuposition">
<ul id="menu">
   <li><a href="#">Mon beau menu 1</a></li>
   <li><a href="#">menu 2</a></li>
   <li><a href="#">etc...</a></li>
</ul>
</div>


css :

Code: Tout sélectionner


#menuposition{
                margin-top: 310px;
}

ul#menu{
   margin: 0 ;
   padding: 0 ;
   list-style-type: none ;
}

ul#menu li{
   margin: 0 0 2px 0 ;
   padding: 0 ;
}

ul#menu li a{
                text-align:right;
   display: block;
   width: 270px;
   line-height: 30px;
   color: #666666;
   text-indent: -25px; /* Avec ça, ça devrais marcher pourtant... et non...*/
   font-family: Arial, Helvetica, sans-serif;
   font-weight: normal;
   font-size: 13px;
   text-decoration: none;
   background: url(monimage.jpg) no-repeat 0 0;
}

ul#menu li a:hover{
   background: url(monimage.jpg) no-repeat 0 -30px;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: normal;
   color: #666666;
   font-size: 13px;
}


avec le "text-indent: -25px;" ça devrais marcher et pourtant... et non...
à l'envers ca marche (aligné à gauche...) mais pas à droite...

si quelqu'un à une idée, une piste ou une solution, je suis preneur
merci bien

[ezzeo]

J'ajouterai :

Code: Tout sélectionner

ul#menu li a{
padding-right:20px;
}

[skyll]

Euh... ben non...
avec ca, ca me décale tout les liens du menu (image comprise) ce que je ne souhaite pas

en tout cas merci quand même

[ezzeo]

Il faut que tu mettes l'image background sur le li et pas sur le a

[skyll]

Il faut que tu mettes l'image background sur le li et pas sur le a

mais à ce moment la, l'image ne changeras pas au survol ???

ce que je comprends pas c'est qu'avec "text-indent" qui est fait pour ça, ça ne fonctionne pas

[ezzeo]

C'est vrai...
Pour que l'image change au survol, tu as les événements js onmouseover et onmouseout.

[skyll]

sinon, encore plus simple :

Là ca marche nickel : text-align left et text-indent 25....
avec le texte-indent négatif, ca marche aussi....

Code: Tout sélectionner

#menu
{
   display: block;
   width: 250px;
   color: #000000;
   background-color:#cccccc;
   text-align:left;
   text-indent: 25px;  /*On décale le texte de 25px du bord gauche */
}

<div id="menu">Mon joli test</div>


Là ca marche plus : text-align right et text-indent -25....
avec le texte-indent positif, ca marche pas non plus....

Code: Tout sélectionner

#menu
{
   display: block;
   width: 250px;
   color: #000000;
   background-color:#cccccc;
   text-align:right;
   text-indent: -25px;  /*On décale le texte de 25px du bord gauche */
}

<div id="menu">Mon joli test</div>


Donc là... je sèche...

[skyll]

C'est vrai...
Pour que l'image change au survol, tu as les événements js onmouseover et onmouseout.

ouaip.. c'est sur, mais je voulais éviter le JS dans la mesure du possible...

mais sur text-align + text-indent, je comprends pas le soucis...
ca fontionne dans tous les cas sauf dans celui qui m'interesse....

en tout cas, si y'à un super héro du css qui traine dans coin...