Des écarts entre chaque image

Bonjour,

Je suis en train de me faire un menu horizontal déroulant, mais j'ai un soucis tout bête : je me retrouve avec des écarts de 3 ou 4px entre chaque image de mon menu, alors que la somme de mes images fait bien 900px, comme je le définis dans le body.

Vous auriez une idée ?

Merci


Mon code CSS :

body
{
  font: 11px verdana, sans-serif;
  width: 900px;
  background: top left no-repeat;
  margin: 0;
  padding: 0;
}

#menuDeroulant
{
  list-style-type: none;
  margin: 0;
  padding: 0;
  border: 0;
  position: absolute;
  top: 0;
  left: 0;
}

#menuDeroulant li
{
  float: left;
  margin: 0;
  padding: 0;
  border: 0;
}

Et le code HTML :

<ul id="menuDeroulant">
  <li>
  <a href="#"><img src="/images/kw_menu01_off.png"></a>
  <ul class="sousMenu">
    <li><a href="#"><img src="/images/kw_menu01_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu01_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu01_off.png"></a></li>
  </ul>
  </li>
  
  <li>
  <a href="#"><img src="/images/kw_menu02_off.png"></a>
  <ul class="sousMenu">
    <li><a href="#"><img src="/images/kw_menu02_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu02_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu02_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu02_off.png"></a></li>
  </ul>
  </li>
  
  <li>
  <a href="#"><img src="/images/kw_menu03_off.png"></a>
  <ul class="sousMenu">
    <li><a href="#"><img src="/images/kw_menu03_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu03_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu03_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu03_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu03_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu03_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu03_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu03_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu03_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu03_off.png"></a></li>
  </ul>
  </li>
  
  <li>
  <a href="#"><img src="/images/kw_menu04_off.png"></a>
  <ul class="sousMenu">
    <li><a href="#"><img src="/images/kw_menu04_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu04_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu04_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu04_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu04_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu04_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu04_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu04_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu04_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu04_off.png"></a></li>
  </ul>
  </li>

  <li>
  <a href="#"><img src="/images/kw_menu05_off.png"></a>
  <ul class="sousMenu">
    <li><a href="#"><img src="/images/kw_menu05_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu05_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu05_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu05_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu05_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu05_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu05_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu05_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu05_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu05_off.png"></a></li>
  </ul>
  </li>
  
  <li>
  <a href="#"><img src="/images/kw_menu06_off.png"></a>
  <ul class="sousMenu">
    <li><a href="#"><img src="/images/kw_menu06_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu06_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu06_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu06_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu06_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu06_off.png"></a></li>
  </ul>
  </li>
  
  <li>
  <a href="#"><img src="/images/kw_menu07_off.png"></a>
  <ul class="sousMenu">
    <li><a href="#"><img src="/images/kw_menu07_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu07_off.png"></a></li>
    <li><a href="#"><img src="/images/kw_menu07_off.png"></a></li>
  </ul>
  </li>
  
  <li>
  <a href="#"><img src="/images/kw_menutransition.png"></a>
  </li>
  <li>
  <a href="#"><img src="/images/kw_menu09_off.png"></a>
  </li>
  <li>
  <a href="#"><img src="/images/kw_menu10_off.png"></a>
  </li>
  <li>
  <a href="#"><img src="/images/kw_menu11_off.png"></a>
  </li>
  <li>
  <a href="#"><img src="/images/kw_menu12_off.png"></a>
  </li>
  <li>
  <a href="#"><img src="/images/kw_menuend.png"></a>
  </li>
  
</ul>

Modifié par davidprysm (13 Aug 2012 - 23:18)

Par défaut et selon le doctype que tu utilises sur ton site les balises img ont des propriétés avec des border il me semble.

Pour faire bien tu devrais rajouter border:0; sur ton img du menu

Tu parlais bien de rajouter le border=0 dans les propriétés de l'image ? ça ne change rien

<body>

<ul id="menuDeroulant">
  <li>
  <a href="#"><img src="http://www.kylie-world.com/wp-content/themes/kylieworld2/images/kw_menu01_off.png" border="0"></a>

Voici le rendu visuel :



Mon doctype en HTML5

<! DOCTYPE html>

J'ai fait comme ça pour qu'il n y ait pas de bordure :

http://codepen.io/anon/pen/mBduL

Bonjour,

Des trucs problématiques:
- Le Doctype que tu donnes dans ton message précédent est faux (un espace en trop).
- Celui que tu utilises dans la page dont tu donnes le lien est faux aussi (un caractère manquant).
- Tes images n'ont pas de texte alternatif (gros problème d'accessibilité et de référencement).

davidprysm a écrit :
Tu parlais bien de rajouter le border=0 dans les propriétés de l'image ?

Non, il parlait de déclarer une bordure à zéro dans tes styles CSS. C'est idiot de l'écrire dans le code HTML pour chaque image, quand tu peux appliquer un style CSS unique à toutes les images de ton menu d'un coup (c'est un peu l'intérêt et la raison d'être de CSS au départ).

Mon problème était ici ! Truc bête évidemment...

#menuDeroulant li a:link, #menuDeroulant li a:visited
{
  display: block;
  height: 1%;
  color: #000;
  margin: 0;
  padding: 0px 0px;
  border-right: solid #fff;
  text-decoration: none;
}

Je prends note de vos remarques et je corrige tout ça... ça commence à rentrer

Merci encore !
D
Modifié par davidprysm (15 Aug 2012 - 22:37)