[HTML/CSS] héritage???
Résolu
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
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
10 réponses
-
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! -
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 -
Merci c'est gentil. La page n'est pas en ligne... :-(
-
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 ?
-
Non les deux ne fonctionne pas! Je ne comprends pas!
Mais merci pour ton aide! Si tu as une autre idée.. -
Etrange, mais ça arrive parfois ! ^^
Essaye en mettant juste .navig_choisie {}
ou encore en mettant a.navig_choisie {}
-
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.... -
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 ? ^^ -
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! -
Tu dois surcharger tes déclarations avec une classe et "remettre à zéro" les propriétés déclarée dans ton navigation li.
