Webmaster Hub > LI de couleurs différentes

Version complète: sur le forum Webmaster Hub : LI de couleurs différentes

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

flux37

mercredi 31 mai 2006 à 16:22

Bonjour à tous,

Savez vous s'il est possible de donner des couleurs et largeurs différentes aux LI d'une liste..

Je voudrais que le LI commentaire soit plus étroit que les autre et que la couleur de fond soit différente..

Si kelkun peut m'aider..

merci d'avance

CODE

<style>

#navcontainer  {
background: #0F4979 ;
height:24px;
clear: both;
width:774px;
font-size:11px;
font-family: Arial, Helvetica, sans-serif;
}

#navcontainer UL {
list-style: none;
margin: 0;
border: none;
float: left;
font-size:11px;
width: 772px;
height:24px;
}

#navcontainer LI
{
display: block;
margin: 0;
padding: 0;
float: left;
width: auto;

}


#navcontainer A
{
color: #fff;
display: block;
text-decoration: none;
margin: 0;
padding: 5px 40px;
border-left: 1px solid #fff;


}

#navcontainer A:hover, #navcontainer A:active { background: #E2E2E2;  color:#4C4F51; }

#navcontainer A.active:link, #navcontainer A.active:visited
{
position: relative;
z-index: 102;
background: #0F4979;
font-weight: normal;
}

</style>


<DIV id=navcontainer>

<UL>

    <LI ><A title="Commentaires" href="">Commentaires</A> </LI>
    <LI><A title="Livraison" href="">Livraison</A> </LI>
    <LI><A title="Production" href="">Dossier de production</A> </LI>
    <LI><A  title="Finance" href="">Finance</A> </LI>
    <LI><A title="Administratif" href="">Administratif</A> </LI>

</UL>

</DIV>

tom_sawyer

mercredi 31 mai 2006 à 17:09

Bonjour

je pense que tu dois pouvoir le faire avec la pseudo classe first-child

genre
ul > li:first-child {margin: 0; }

http://www.yoyodesign.org/doc/w3c/css2/sel...tml#first-child

++

sarc

mercredi 31 mai 2006 à 17:27

Tom_sawyer, ta solution n'est pas prise en compte par IE, et il me semble que ul > li ne sera pris en compte que par IE... Donc j'ai bien peur que ça soit pas la solution idéale

Non tout simplement tu rajoutes une class .commentaire, et tu mets dans ta feuille de style

CODE

.commentaire{font-size:9px;background-color:yellow;}

Dans ton html :

CODE

<li class="commentaire">commentaire</li>

Tu n'as pas l'air de connaître très bien le CSS, je te conseille donc de faire un tour sur les sites qui t'expliquent tout ce que tu dois savoir

Edit : tu dois utiliser les balises BBcode Codebox pour mettre tes longs codes

afin que la lecture soit plus aisée..

atome

mercredi 31 mai 2006 à 22:19

salut

pour apprendre le css je conseil alsacreations excelent site avec code & exemple

flux37

jeudi 8 juin 2006 à 15:05

Merci pour ces conseils et pour le lien .. très isntructif

Pour info , J'ai fini par opter pour la class..

@++

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.