Liste inline decalage sur la droite entre chaques elements...

hello a tous,

jai un petit soucis de decallage, je mexplique :

j'ai une liste en ligne, dans chaque <li></li> une image.
Si je code avec un retour chariot pour chaque <li>, jai un espace entre chaque element. Si je met tous les <li> sur une ligne je nai plus cet espace et ce sur ie et ff, une explication ?

<ul id="listeLine">
<li class="ligne1"><img src="img/ag2i_rub1_off.gif" width="112" height="45" alt=""></li><li class="ligne1"><img src="img/ag2i_rub2_off.gif" width="120" height="45" alt=""></li>
<li class="ligne1"><img src="img/ag2i_rub3_off.gif" width="140" height="45" alt=""></li>
<li class="ligne1"><img src="img/ag2i_rub4_off.gif" width="130" height="45" alt=""></li>
<li class="ligne1"><img src="img/ag2i_rub5_off.gif" width="85" height="45" alt=""></li>
<li class="ligne1"><img src="img/ag2i_rub6_off.gif" width="85" height="45" alt=""></li>
</ul>

ça serait sympa d'avoir ton code css pour class="ligne1"

Rasta a écrit :
ça serait sympa d'avoir ton code css pour class="ligne1"

voici :

#listeLine{display:inline;list-style-type: none;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;font-size:1px;line-height:1px;}
.ligne1{display:inline;font-size:1px;line-height:1px;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}

jai mis les margin et padding au deux ainsi que line-height et font-size a 1 mais rien n'y fait

Pour le moment ma liste tiens sur 1 ligne cest la seule solution que jai trouvé

est ce que tu aurais un lien pour qu'on puisse voir ton problème directement, je vois pas exactement quel est le problème ? tu as juste des espaces entre tes lignes ?

sinon pour ton code, essaye de l'espacer :

#listeLine {
list-style-type: none;
margin: 0;
padding: 0;
line-height:0;
}

.ligne1 {
display: inline;
line-height:0;
margin: 0;
padding: 0;
}

les font-size sont inutiles
tout comme le display: inline inutile dans les li vu qu'il est déjà précisé dans le ul

et #listeline est à remplacer par ul
ainsi que .ligne1 par li

il faut toujours utiliser les balises reconnues plutot que d'inventer ses propres class et id
Modifié par Rasta (17 Oct 2006 - 17:25)

Le code nest pas en prod mais voici une imag epour lillustrer


l'exemple du haut avec ce code :

<ul id="listeLine">
<li class="ligne1"><a href="#"><img src="img/ag2i_rub1_off.gif" width="112" height="45" alt="" /></a></li><li class="ligne1"><a href="#"><img src="img/ag2i_rub2_off.gif" width="120" height="45" alt="" /></a></li><li class="ligne1"><a href="#"><img src="img/ag2i_rub3_off.gif" width="140" height="45"  alt="" /></a></li><li class="ligne1"><a href="#"><img src="img/ag2i_rub4_off.gif" width="130" height="45"  alt="" /></a></li><li class="ligne1"><a href="#"><img src="img/ag2i_rub5_off.gif" width="85" height="45"  alt="" /></a></li><li class="ligne1"><a href="#"><img src="img/ag2i_rub6_off.gif" width="85" height="45"  alt="" /></a></li>
</ul>

l'exemple du bas avec ce code :

<ul id="listeLine">
<li class="ligne1"><a href="#"><img src="img/ag2i_rub1_off.gif" width="112" height="45" alt="" /></a></li>
<li class="ligne1"><a href="#"><img src="img/ag2i_rub2_off.gif" width="120" height="45" alt="" /></a></li>
<li class="ligne1"><a href="#"><img src="img/ag2i_rub3_off.gif" width="140" height="45"  alt="" /></a></li>
<li class="ligne1"><a href="#"><img src="img/ag2i_rub4_off.gif" width="130" height="45"  alt="" /></a></li>
<li class="ligne1"><a href="#"><img src="img/ag2i_rub5_off.gif" width="85" height="45"  alt="" /></a></li>
<li class="ligne1"><a href="#"><img src="img/ag2i_rub6_off.gif" width="85" height="45"  alt="" /></a></li>
</ul>

La seule difference cest ke je lecris sur une ligne

erf, ah ben je vois pas du tout
essaye un border : 0; ou un word-spacing : 0;

sinon je peux pas t'aider plus :s
Modifié par Rasta (17 Oct 2006 - 18:09)

Bonjour gegen,

Il s'agit d'un comportement parfaitement normal dû à l'affichage de type en-ligne que tu utilises pour tes li.

Voir cette explication :
http://forum.alsacreations.com/topic-4-18048-1-Facilit-de-lecture-du-code-VS-mise-en-forme.html#p136471

Mettre tout le code de la « ligne » sur une seule ligne de code est une solution. Sinon, il faudra travailler avec des flottants plutôt qu'un display: inline.


Deux remarques en passant :
1 - Je ne vois pas d'attribut alt pour le texte alternatif de tes images dans le menu. Comment feront les utilisateurs qui n'affichent pas les images, les utilisateurs de navigateurs non graphiques et de lecteurs d'écran, etc ?
2 - Il me semble inutile de donner la même classe à tous tes li, alors que l'on peut utiliser un sélecteur de descendant :

ul#listeLigne {...}
ul#listeLigne li {...}

MERCI pour vos bons conseils !

En effet ca fait longtemps ke jutilise les css sans vraiment aller tres loin. Maintenant j'essaie de revoir ma facon de coder en suivant la "norme".
Ca demande pas mal de temps supplementaire pour le moment, mais le resultat est vraiment appreciable !

Longue vie a Alsacreation

Merci