Mettre une ligne sur 2 en gris

Bonjour a vous,

ceci est mon 1er message , donc soyez vigilant avec moi si je ne m'explique pas bien.

J'ai crée un footer pas de problème en css. Maintenant, je souhaiterais mettre dans celui-ci du css avec 1 ligne sur 2 en gris pour mon 2nd menu (voir image)

comment dois je faire?
Quelqu'un peut-il m'aider merci

Salut,
la manière la plus simple est d'utiliser une class sur tes éléments. Exemple :

<ul>
    <li></li>
    <li class="gris"></li>
    <li></li>
    <li class="gris"></li>
</ul>

.gris
{
    background-color:#ccc;
}

Ah ben oui ....... pas con

merci

Je reviens vers vous juste pour un petit problème

concernant la class gris
je souhaiterais que le fond soit gris avec une picto en début de ligne
cependant quand je met gris + picto le gris disparait.

Si j’enlève le picto, le gris réapparaît. j'en déduis que ces 2 éléments ne peuvent pas cohabiter ensemble ?

background-color:#ccc;
background: url("../images/fleche2.png") no-repeat;

.gris

{      background-color:#ccc;
	background: url("../images/fleche2.png") no-repeat;
	font-family: Tahoma;
	font-size: 0.7em;
	padding-left: 15px;
}

merci

Hello,
Tu ne pourra pas effectivement cumuler 2 background... Tu devrais simplement le mettre dans ton html <img src="#"/>

ok;

tu as raison merci a vous 2

heuuuu mais alors là pas du tout ^^

Tu peux combiner une couleur de fond et une image de fond sans problème, le problème est que dans la déclaration background on peut mettre aussi la couleur, lorsque tu ne la déclare pas elle est interprétée par défaut.

Bon, voilà les 2 solutions:

  background-color: #ccc;
  background-image: url("../images/fleche2.png");
  background-repeat: no-repeat;

Bon, voilà les 2 solutions:

  background: #ccc url("../images/fleche2.png") no-repeat;

Modifié par kustolovic (10 Feb 2012 - 10:28)

Bonjour,

En CSS3 tu peux utiliser le sélecteur :nth-child

li:nth-child(odd) {
  background-color: white;
  }
li:nth-child(even) {
  background-color: #DDD;
  }

Support dans tous les navigateurs modernes dont IE9 (pas dans IE 7-8).
Sinon, effectivement, rajouter des classes dans ton code HTML (éventuellement en calculant ça côté serveur si tu génères ton code en PHP ou avec un autre langage, en utilisant un opérateur modulo).

a écrit :
Tu ne pourra pas effectivement cumuler 2 background...

En CSS 2, tu peux cumuler un background-color et un background-image, ce qui suffit pour le cas de figure présenté il me semble. On peut aussi écrire les deux avec la propriété de raccourci background:

li {
  background: #DDD url(monimage.png) no-repeat 10px center;
}

En CSS3 tu peux utiliser des backgrounds multiples sur un seul élément.

La solution des class est la plus appropriées pour la compatibilité navigateur à mon goût (même si je me suis effectivement retrouvé à appliquer nth-child )

En fait ton code ne marche pas car tu as utilisé en même temps:
* background-color
* background

Cette dernière est une "shorthand property" ce qui revient à dire que tu peux spécifier plusieurs propriétés en une seule.
Mais si tu spécifie une propriété "normale", elle prendra le pas sur la propriété "shorthand".

Si tu avais voulu utiliser les propriétés "normale" il t'aurais alors fallu écrire:

li
{
    background-color:#ccc;
    background-image:url(monimage);
}

Plus d'infos ici : http://www.w3schools.com/css/css_background.asp

Ok pour la couleur + le picto

cependant maintenant j'ai un autre problème

je voudrais après le picto mettre du texte avec un retrait de 10px

cependant actuellement j'ai le txt sur le picto




merci

c'est bon j'ai reussi avec mon autre class en mettant .blanc

paddind-left:10px

merci bcp a vous