question sur css

question sur css - Web design - Graphisme

Marsh Posté le 06-06-2007 à 21:17:43    

bonjour,  
j'utilise pour mon site un sous-menu en liste <li> et j'aimerais que les <li> de ce sous-menu affichent une image en background.  
mais comme il y a des listes ailleurs dans le site, l'image de fond s'y affiche aussi.  
j'utilise alors dans ma page html le code:

Citation :

<div id="sousmenu">
<li style="background-image:url(...); background-repeat=: no-repeat; height: 26px; width: 156px;">...</li>
</div>


 
j'aimerais savoir s'il y a moyen de selectionner dans ma feuille de style externe les <li> dans la div #sousmenu pour qu'elles soient les seules à avoir une image en background, et comment...
 
Merci!

Reply

Marsh Posté le 06-06-2007 à 21:17:43   

Reply

Marsh Posté le 06-06-2007 à 21:51:48    

au même titre que <div id="xx" -> <li id="yy">
 
C'est le id qui va definir le style propre à l'id des li... liid ?! arghhh... bref...


---------------
Rien est impossible, il suffit d'y croire !
Reply

Marsh Posté le 06-06-2007 à 21:58:08    

Attention, les listes sont les éléments "ul", et pas des div !!!
 
dans le HTML tu mets :
<ul id="sousmenu">
     <li>...</li>
     <li>...</li>
</ul>
 
dans le css tu mets (pour un fond sur chaque élément de liste) :
ul#sousmenu li {background:...;}

Reply

Marsh Posté le 06-06-2007 à 22:02:24    

+1 mais on peut aussi l'utiliser avec <ol>
 
Mais aussi lui attribuer l'id... <li id="yy">


---------------
Rien est impossible, il suffit d'y croire !
Reply

Marsh Posté le 06-06-2007 à 22:59:24    

Pyksel a écrit :

+1 mais on peut aussi l'utiliser avec <ol>
 
Mais aussi lui attribuer l'id... <li id="yy">


 
oui... mais si on veut un background identique pour chaque <li> il est plus judicieux d'utiliser la méthode précédente ou <li class="yy">...
voilou !

Reply

Marsh Posté le 06-06-2007 à 23:16:30    

bah en mettant une classe a l' ul ou ol, si dans le css elle met

Code :
  1. ul.nomdelaclasse>li

   
c'est mieux que de mettre une classe a chaque li ... justement la ca serait pour un background different ...


Message édité par athenaa le 06-06-2007 à 23:17:08
Reply

Marsh Posté le 07-06-2007 à 06:44:38    

Si ton menu est dans une div unique (donc avec un id de preférence) inutile de styler ton menu.
DIV#exemple{.le style de ton bloc.}
DIV#exemple UL{.mise en forme, mise en place.}
DIV#exemple UL LI{background:.....;}

 

Dans ce genre de cas, on style grâce à un "parent" (CSS = Cascading SS) c'est bien suffisant. On ne met des styles aux autres menus dans cette même div que si ils doivent être différents.


Message édité par Lactique le 07-06-2007 à 21:14:45

---------------
Studio CréeAll
Reply

Marsh Posté le 07-06-2007 à 19:11:33    

merci, j'ai fait comme vous avez dit et ça marche à part que j'ai quelques pb de décalement de ma div...

Reply

Marsh Posté le 08-06-2007 à 09:09:58    

On ne peut jamais faire confiance aux pneus qui ont des rustines partout.
Ca roule oui, mais de quelle façon...


---------------
Studio CréeAll
Reply

Marsh Posté le 08-06-2007 à 10:34:46    

tu peux creer un bloc Css comme suis
 
.mon_menu ul{
 
}
.mon_menu li{
 
}
 
Lors de la creation de ta liste il te suffit de definir la classe de la liste
 
<li class="mon_menu">
   <ul></ul>
</li>
 
les ul seront automatiquement impacté par "mon_menu ul". Et les autres listes du site ne changent pas

Reply

Marsh Posté le 08-06-2007 à 10:34:46   

Reply

Marsh Posté le 08-06-2007 à 18:50:12    

cinocks a écrit :

tu peux creer un bloc Css comme suis
 
.mon_menu ul{
 
}
.mon_menu li{
 
}
 
Lors de la creation de ta liste il te suffit de definir la classe de la liste
 
<li class="mon_menu">
   <ul></ul>
</li>
 
les ul seront automatiquement impacté par "mon_menu ul". Et les autres listes du site ne changent pas


 
Bon déjà tu as inversé ul et li dans le html.
Mais surtout c'est incorrecte.
la bonne syntaxe css est :
Ul.mon_menu{}
Ul.mon_menu LI {}
UL.mon_menu LI A{} si ya des lien a styler etc...
donc une seule attribution de lass dans le html permet de toucher différemment la balise origine et toutes les balises enfants "distinctes".


---------------
Studio CréeAll
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed