18073 sujets

Questions générales et questions de débutants

[résolu] Menu vertical - comment mettre en forme un lien spécifique ?

Bonjour,

J'ai crée un menu vertical avec des puces personnalisées (background-image).

Tout se passe bien mais je voudrais que le premier lien appelé id="menucollections" n'ai pas de puce" et un padding-left différent que le reste du menu

Cet id devrait me permettre d'avoir une mise en forme différente pour ce lien, j'ai bien essayé mais sans succès.

Voici mon xhtml


 <div id="menu_gauche">
	 <ul id="menu_left">
	 <li><a id="menucollections" title="Collections" href="">Collections</a></li>
	 <li><a id="menu1g" title="Collections" href="#">Parure 1</a></li>
	 <li><a id="menu2g" title="Collections" href="#">Parure 2</a></li>
	 <li><a id="menu3g" title="Collections" href="#">Parure 3</a></li>
	 <li><a id="menu4g" title="Collections" href="#">Parure 4</a></li>
	 <li><a id="menu5g" title="Collections" href="#">Parure 5</a></li>
	 <li><a id="menu6g" title="Collections" href="#">Parure 6</a></li>
	 <li><a id="menu7g" title="Collections" href="#">Parure 7</a></li>
	 <li><a id="menu8g" title="Collections" href="#">Parure 8</a></li>
	 <li><a id="menu9g" title="Collections" href="#">Parure 9</a></li>
	 <li><a id="menu10g" title="Collections" href="#">Parure 10</a></li>
	 <li><a id="menu11g" title="Collections" href="#">Parure 11</a></li>
	 <li><a id="menu12g" title="Collections" href="#">Parure 12</a></li>
	 <li><a id="menu13g" title="Collections" href="#">Parure 13</a></li>
	 <li><a id="menu14g" title="Collections" href="#">Parure 14</a></li>
	 <li><a id="menu15g" title="Collections" href="#">Parure 15</a></li>
	 </ul>
	 </div>


Et la CSS du menu en question


#menu_gauche {
float:left;
width: 130px;
}
#menu_left a{
padding-left: 20px;
text-decoration: none;
color: #666666;
line-height: 25px;
background: url(puce.png) left center no-repeat;
}
ul#menu_left {
margin: 0 0 0 12px;
padding: 10px 0 0 0;
letter-spacing: 2px;
font-family: Trebuchet MS, Times, serif;
list-style-type: none;
font-size: 80%;
text-align: left;
}
#menu_left a:hover {
color: #D26C86;
font-weight: bold;
}


Merci pour vos conseils.
Modifié par pp51 (05 Mar 2006 - 16:26)
un simple:

a#menucollections {
color: #99FF33;
background: none;
}

a résolu le problème...
Salut,

Je ne vois pas dans ton code css les propriétés se rapportant à l'élément menucollections. Il nous seras donc difficile de t'aidé.
En tout cas, je ne vois pas d'erreur dans le css que tu as donné Smiley thumpup .

1ère étape OK, nous attendons la suite... Smiley cligne


EDIT: j'ai posté quelques secondes trop tard. Je vois que tu as résolus ton problème tout seul. Bien joué. Smiley cligne
Modifié par ymhotepa (05 Mar 2006 - 12:58)
Re bonjour,

Bon, mon menu est preque OK mais j'ai un autre problème sur le id="menucollections".

J'ai donc réussi à lui donner les caractéristiques que je voulais mais j'ai un problème de puce.
J'ai réussi à supprimer la puceoff.png background par défaut, mais maintenant quand je survole le lien, j'ai la puceon.png qui apparait.

J'ai bien pensé mettre


#menucollections a:hover {
background: none;
text-decoration:none;
}


mais la puce apparait toujours...

Revoici ma CSS modifiée 


#menu_gauche {
float:left;
width: 130px;
}
#menu_left a{
padding-left: 15px;
text-decoration: none;
color: #666666;
line-height: 25px;
background: url(puceoff.png) left center no-repeat;
}
a#menucollections {
color: #99FF33;
background: none;
padding-left: 0px;
font-family: Trebuchet MS, Times, serif;
font-size: 95%;
color: #D26C86;
font-weight: bold;
font-variant: small-caps ;
}
#menucollections a {
color: #D26C86;
background: none;
}
#menucollections a:hover {
background: none;
text-decoration:none;
}
ul#menu_left {
margin: 0 0 0 12px;
padding: 10px 0 0 0;
letter-spacing: 2px;
font-family: Trebuchet MS, Times, serif;
list-style-type: none;
font-size: 75%;
text-align: left;
}
#menu_left a:hover {
color: #D26C86;
background: url(puceon.png) left center no-repeat;
}


Une solution ?

Merci.
Bonjour,

Mettre #menucollections a:hover après #menu_left a:hover.

(Ces deux sélecteurs concurrents ont le même degré de priorité dans la cascade CSS. C'est donc le dernier dans l'ordre du fichier CSS qui l'emporte...)
Sujet clos
Aller à