28221 sujets

CSS et mise en forme, CSS3

[Résolu] Liste in-line

Salut,
ne sachant pas si ce post devait aller dans le forum XHTML ou CSS, je laisse le soins aux modos de le placé au bon endroit. Smiley smile

Pas simple à éxpliqué comme problème... J'ai donc une liste :
<ul>
 <li><a href="#">item1</a></li>
 <li><a href="#">item2</a></li>
 <li><a href="#">item3</a></li>
</ul>

Que je mets en ligne :
ul {
 padding: 3px 0 3px 0;
 background-color: #666;
}

ul li {
 display: inline;
 list-style-type: none;
 padding: 3px 0 3px 0;
}

ul a {
 padding: 3px 20px 3px 20px;
 border-right: 5px solid #fff;
 text-decoration: none;
 /*font-weight: bold;*/
 color: #fff;
}


Mon problème est donc que ça me met un espace devant les items de cette liste (sauf devant le premier). Je ne sais pas trop si vous voyez...

Si par contre je mets tout le code sur la même ligne, plus d'espace..
<ul>
 <li><a href="#">item1</a></li><li><a href="#">item2</a></li><li><a href="#">item3</a></li>
</ul>


Aurriez-vous une idée du problème, des solutions ?

D'avance merci,
Antoine. Smiley cligne


EDIT: J'aimerai, en fait, pouvoir identer mon code sur plusieurs lignes sans avoir ce problème d'espace.
Modifié le 12 Nov 2004 - 18:20
c a cause de ton border-right 
ul {

 padding: 3px 0 3px 0;

 background-color: #666;

}



ul li {

 display: inline;

 list-style-type: none;

 padding: 3px 0 3px 0;

}



ul a {

 padding: 3px 20px 3px 20px;

[#red]border-right: 5px solid #fff;[/#]

 text-decoration: none;

 /*font-weight: bold;*/

 color: #fff;

}


sur tes liens, enlèves-le et tout ira mieux...
Modifié le 11 Nov 2004 - 14:46
eman73 a écrit :
c a cause de ton 
 border-right: 5px solid #fff;

sur tes liens

Non, du tout, Mon border-right n'y est pour rien. (j'ai même tester sans par acquis de conscience)
En fait ça décale le texte des liens de 1 caractère vers la droite, comme si il prenait mon retours à la ligne pour un espace. De ce fait le contenu de mes liens n'est pas centré..

un exemple : http://elmoustikoblog.net/blog.php
Fait un Ctrl+A et regarde le menu, tu peux voir un espace entre chaque item. C'est ceci que je ne comprends pas et que je voudrais resoudre.

Antoine
Modifié le 11 Nov 2004 - 14:51
ok, mais mais je vois pas exactement comment faire pour y remédier....
Modifié le 11 Nov 2004 - 14:52
Comme je disais, la seule solution que j'ai trouver -pour le moment- est de mettre tous les <li> sur une seule ligne; mais côté lisibilité c'est pas le top.
Tu peux :
faire un margin-left negatif de 4px (si j'ai bonne mémoire), sinon tu peux utiliser les flottant, tu met tes éléments en float: left; et là tu es assuré de ne plus avoir d'espaces.

Pour l'analyse du problème, c'est en effet dû au retour chariot (ou à l'indentation du code, je sais plus trop).

Je déplace ça dans CSS
C'est une conséquence inattendue mais apparemment logique du display:inline sur les éléments <li>.

Prends le code suivant, indenté sans aucun espace autre que les retours à la ligne (line breack):
<p>
<span>blabla</span>
<span>blabla</span>
</p>


Tu auras bien un espace entre tes deux blabla : selon HTML4.01, les retours à la ligne sont des espaces dans ce contexte, et sont logiquement restitués comme tels. Voir http://www.w3.org/TR/html401/struct/text.html#whitespace

En appliquant un display: inline aux <li>, tu te trouves dans le même cas de figure.

L'application d'une marge négative ne permet pas de corriger : il n'y a pas d'unité permettant de dire "je veux une marge d'une largeur d'un espace"). D'autre part, il ne s'agit pas d'un problème externe au contenu de boîte, mais interne, et il n'existe pas de paddings négatifs. A la rigueur, peut-être chercher du côté d'une position relative décalant le contenu, mais avec une estimation pifométrique du décalage qui peut se dégrader assez mal selon les conditions d'affichage.

Amusant, ça ;)
Modifié le 11 Nov 2004 - 15:39
Après plusieurs tests je pense que je vais mettre mes <li> sur une seule ligne, ce n'est qu'un menu, il n'y a pas beaucoup d'items. :)

Antoine
Modifié le 11 Nov 2004 - 15:48
ElMoustiko a écrit :
L'utilisation d'un margin negatif fonctionne à merveille, il suffit de tester ;)


Pas vraiment, non. Le résultat n'est pas équivalent à la suppression des retours de ligne dans le code HTML.

J'avais testé. Avec une page présentant les deux options.
Hmm étrange, j'avais pourtant utilisé cette méthode... Que veux tu dire par : pas équivalent à la suppression des retours de ligne ?
Modifié le 11 Nov 2004 - 18:09
J'imagine que Laurent veut dire que (-)4px n'est pas forcément la largeur d'un espace blanc (produit par un retour ligne dans l'exemple en question). Donc ça peut être visuellement correcte sur ta mise en page mais dérailler si par exemple le visiteur change la taille d'affichage de la police.
Sujet clos
Aller à