[HTML/CSS] héritage???

Résolu
small-princess16 Messages postés 140 Date d'inscription   Statut Membre Dernière intervention   -  
small-princess16 Messages postés 140 Date d'inscription   Statut Membre Dernière intervention   - 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   Statut Membre Dernière intervention   131
 
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   Statut Membre Dernière intervention   48
 
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   Statut Membre Dernière intervention   131
 
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   Statut Membre Dernière intervention   48
 
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   Statut Membre Dernière intervention   131
 
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   Statut Membre Dernière intervention   48
 
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   Statut Membre Dernière intervention   131
 
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   Statut Membre Dernière intervention   48
 
Merci c'est gentil. La page n'est pas en ligne... :-(
0
monkey_monk Messages postés 641 Date d'inscription   Statut Membre Dernière intervention   131
 
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   Statut Membre Dernière intervention   48
 
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