28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Voilà, je suis confronté à un petit souci.
J'utilise une liste très simple du type

<ul>
     <li><a>Menu 1</a></li>
     <li><a>Menu 2</a></li>
     <li><a>Menu 3</a></li>
</ul>

Comme vous l'avez certainement remarqué, cette liste sert de menu.
Je souhaiterais appliquer un fond a chaque élément a de telle sorte que celui ci soit différent lorsqu'on passe sur le lien, jusque là aucun souci.
J'utilise donc (entre autres)

ul li a {
     display:inline-block;
}

comme attribut css pour le bloc lien.

Le problème auquel je suis confronté est que des espaces sont présents dans le code html devant chaque ligne "li", ils servent à structurer le code. Cependant, cess espaces sont visibles sur ma page. J'ai donc un petit espace entre chaque élément de liste, et donc entre chaque background.

Je me souviens avoir déjà croisé une solution pour ce type de problème, ne plus avoir cet espace visible, mais je ne parviens pas à la retrouver... auriez vous une solution ? Sachant que je n'ai pas le droit de toucher au code html.

Merci d'avance Smiley cligne
Modifié par pixelb (07 May 2010 - 13:53)
Bonsoir.
Voilà qui corrigera le problème :
<ul> 
     <li><a>Menu 1</a></li><!--
  --><li><a>Menu 2</a></li><!--
  --><li><a>Menu 3</a></li> 
</ul> 
Bonsoir ,
ou bien en css , eliminer/absorber les espaces dans <ul> dus a l'indentation de ton code quand tu appliques un display:inline; a <li> .


ul {letter-spacing:-0.5em;}
li {display:inline;letter-spacing:0;}
/* en option pour test avec et sans le inline-block  */
a {background:gray;display:inline-block;}


<ul> 
     <li><a href="#" >Menu 1</a></li> 
     <li><a href="#" >Menu 2</a></li> 
     <li><a href="#" >Menu 3</a></li> 
</ul>


Comme ul n'est censé contenir aucun textes et rien d'autre que des <li> , il n'y a aucun risque de voir tes <li> ou tes <li><a></a></li> se chevauchées . (... reste a ne pas laisser trainé ensuite d'espace a l'interieur de celle-ci si tu veut voir les liens cote à cote )
tu peut donc continuer a indenter ton code comme d'habitude sans forcer un commentaire vide ... ce qui peut parfois devenir fastidieux .

GC
Merci pour vos réponses et vos solutions à tous les deux.
J'ai utilisé la seconde (ne pouvant pas modifier le code html, comme indiqué dans mon premier post Smiley cligne ), et ca fonctionne correctement.

Merci Smiley smile