[HTML/CSS] héritage???

Résolu/Fermé
small-princess16 Messages postés 140 Date d'inscription jeudi 28 septembre 2006 Statut Membre Dernière intervention 1 mars 2012 - 1 oct. 2009 à 13:51
small-princess16 Messages postés 140 Date d'inscription jeudi 28 septembre 2006 Statut Membre Dernière intervention 1 mars 2012 - 6 oct. 2009 à 08:27
Bonjour,


J'ai créé un menu vertical grâce à une liste à puce. J'ai mis un id a mon <ul> afin de lui attribuer un CSS.
Ensuite dessous, j'ai mes <li> auxquel qui ont eu aussi un CSS. Mais j'aimerais que certain <li> n'ai pas le même CSS! Je vous montre pour mieux comprendre.

Ma partie HTML concernée:

<div id="menu2">
<ul id="navigation2">
<li class="navig_choisie" ><a href="#"> Musée </a></li>

<li ><a href="#"> Histoire </a></li>
<li ><a href="#"> Lignes directrices </a></li>
<li ><a href="#"> Equipe </a></li>
<li > <a href="#"> Expositions temporaires </a></li>

<li > <a href="#"> Médiation culturelle </a></li>
<li class="espace"> <a href="#"> Collection </a></li>
<li ><a href="#"> Service </a></li>
<li > <a href="#"> Presse </a></li>

<li ><a href="#"> Infos pratiques</a> </li>
<li ><a href="#"> Amis du Musée</a> </li>
<li ><a href="#"> Liens </a></li>
<li class="espace" > <a href="#"> Shop</a> </li>

<li ><a href="#"> Fribourg en 1582</a> </li>
</ul>
</div>


CSS concerné:

#menu2 {
position:absolute;
width:225px;
margin-top:60px !important ;
margin-right: 0 !important ;
margin-left:-170px !important ;
margin-bottom: -10px !important ;
_margin-top:60px;
_margin-right: 0;
_margin-left:-190px ;
_margin-bottom: 0px ;
padding: 0;

}

#navigation2 {

width: 190px ;
list-style: none ;
margin: 0 ;
padding: 0 ;

}

#navigation2 li {
background-color:#ACAED6;
color: #fff ;
font-weight:bold;
margin-bottom: 1px ;

_height: 1px;
}


#navigation2 li a {
display: block ;
background-color:#ACAED6;
color: #000000 ;
font-size: 13px;
line-height: 1em ;
text-align: left ;
text-decoration: none ;
padding: 1px 0 2px 5px !important ;
_padding: 2px 0 0px 5px;
margin: 0 0 2px 0;

}

#navigation2 .espace {
margin: 0 0 10px 0;
}


#navigation2 a:hover {
color:#ffffff;

}

#navigation2 a:focus {
color:#ffffff;
background-color:#949699;
}


#navigation2 .espace {
margin: 0 0 10px 0;

}

J'aimerais attribuer la classe navig_choisie qu'à deux <li>, mais c'est le css de l'id navigation2 pour les <li> qui fait foi. Et si je change le css de l'id navigation2 <li>, tout mes <li> seront changé!

Avez-vous une solution? Merci
A voir également:

10 réponses

monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 129
1 oct. 2009 à 14:08
Tu dois surcharger tes déclarations avec une classe et "remettre à zéro" les propriétés déclarée dans ton navigation li.

0
small-princess16 Messages postés 140 Date d'inscription jeudi 28 septembre 2006 Statut Membre Dernière intervention 1 mars 2012 48
1 oct. 2009 à 14:47
Merci pour ta réponse Monkey Monk!

Donc je mets une classe à mes <li> qui seront différent? Par exemple si ma classe s'appelle navig_choisie, dans le css je mettrais simplement .navig_choisie ou je dois encore mettre ce qu'il y a avant, comme cela:

#menu2 #navigation2 .navig_choisie ?

Et qu'entends-tu par remettre à zéro les propriétés dans ma nouvelle classe?

Merci!
0
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 129
1 oct. 2009 à 15:13
C'est quasi-pareil... si tu mets sous cette forme #menu2 #navigation2 .navig_choisie tu ne pourras y accéder que dans ton #navigation2, alors que si tu mets .navig_choisie tu pourras accéder à ta classe de partout.

Avec la première façon, tu peux utiliser le même "nom" mais avec des propriété différentes en fonction de l'endroit où tu y fait appel ! ;)

ex:
#menu2 #navigation2 .navig_choisie {border-color:black;}
#menu1 #navigation1 .navig_choisie {border-color:red;}

Compris ? ^^
0
small-princess16 Messages postés 140 Date d'inscription jeudi 28 septembre 2006 Statut Membre Dernière intervention 1 mars 2012 48
1 oct. 2009 à 15:24
J'ai essayé de faire comme ceci:
#menu2 #navigation2 .navig_choisie avec mes propriétés et cela ne fonctionne pas...
Par exemple dans navigation 2 j'ai:

#navigation2 li a {
display: block ;
background-color:#ACAED6;
color: #000000;
}

et dans #menu2 #navigation2 .navig_choisie j'aimerais un background différent et une couleur différente..mais cela ne fonctionne pas! Il me garde les propriétés de #navigation2 li a....
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 129
1 oct. 2009 à 17:36
Etrange, mais ça arrive parfois ! ^^

Essaye en mettant juste .navig_choisie {}
ou encore en mettant a.navig_choisie {}

0
small-princess16 Messages postés 140 Date d'inscription jeudi 28 septembre 2006 Statut Membre Dernière intervention 1 mars 2012 48
2 oct. 2009 à 08:31
Non les deux ne fonctionne pas! Je ne comprends pas!
Mais merci pour ton aide! Si tu as une autre idée..
0
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 129
2 oct. 2009 à 10:13
Wow... bah là je suis paumé alors ! ^^

Je passerais plus de temps à l'occasion pour lire ton code et essayer des "trucs"... désolé pas trop le temps là ! ;)

Courage quand mm et pourrais-tu me donner le lien de la page ?

0
small-princess16 Messages postés 140 Date d'inscription jeudi 28 septembre 2006 Statut Membre Dernière intervention 1 mars 2012 48
2 oct. 2009 à 13:31
Merci c'est gentil. La page n'est pas en ligne... :-(
0
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 129
5 oct. 2009 à 20:56
Bonsoir,

je viens de relire ton code... je pense que le problème ne vient pas de ton <li class="navig_choisie"> mais de tes liens auquel tu mets ce css : #navigation2 li a.

Ce qui veut dire que tous les li a (les liens dans une balise li) ont ces propriétés ! Même si tu rajoutes une classe, il s'agit toujours d'un lien dans une balise li ! Pour changer cela, il te faut paramétrer les liens pour les li.nivig_choisie :

#navigation2 li a.navig_choisie { [bla bla] }

Essaye ça et tiens moi au courant ! :D
0
small-princess16 Messages postés 140 Date d'inscription jeudi 28 septembre 2006 Statut Membre Dernière intervention 1 mars 2012 48
6 oct. 2009 à 08:27
Coucou!

Merci pour ton aide mais j'ai résolu mon problème!
J'ai du bidouillé un peu mais sa marche :-)

Merci pour ton aide!
0