galère avec un menu css

  • Auteur de la discussion Auteur de la discussion skyll
  • Date de début Date de début
WRInaute passionné
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 :

text-indent.jpg


le code source :
html :
Code:
<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:
#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 :mrgreen:
merci bien
 
WRInaute passionné
Euh... ben non...
avec ca, ca me décale tout les liens du menu (image comprise) ce que je ne souhaite pas :mrgreen:

en tout cas merci quand même :wink:
 
WRInaute passionné
ezzeo a dit:
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 :cry:
 
WRInaute passionné
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:
#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:
#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...
 
WRInaute passionné
ezzeo a dit:
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.... :evil:

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