Probleme simple de CSS [resolu]

Salut,

J'ai une liste <ul> de liens. Cette liste est "horizontale" avec les <li> en display : inline. Les liens sont séparés par un simple tiret. Mon probleme est que si les liens remplissent horizontalement mon <div> et qu'ils continuent sur une deuxieme ligne, j'ai parfois un tiret au debut de cette deusieme ligne :

lien1 - lien2 - lien3 - lien4
- lien5 - lien6

.. ce qui est fort moche. Moi je voudrais plutot :

lien1 - lien2 - lien3 - lien4
lien5 - lien6

Comment faire ?
Modifié par apericube (01 Feb 2010 - 11:52)

Bonsoir, alors voilà j'ai trouvé ceci mais avis aux amateurs car je suis sur qu'il y a une meilleure solution:

inclue tes séparateurs dans le li comme suit:

<div id="menu">
	<ul>
    	<li>lien 1 -</li>
        <li>lien 2 -</li>
        <li>lien 3</li>
        <li>lien 4 -</li>
        <li>lien 5</li>
    </ul>
</div>

en suite ne mets pas de séparateur sur le dernier lien ainsi que tous ceux qui seront en fin de ligne (dans mon exemple le lien 3) afin d'éviter ceci:

lien 1 - lien 2 -
lien 3 - lien 4 - lien 5

en espérant que ça te sois utile

C'est des liens générés dynamiquement en fait, donc je sais pas a l'avance qui sera en fin de ligne ou au debut !

ah et bien désolé je ne peux t'aider je ne vois pas qu'est ce que sont tes liens généré dynamiquement, car je pensais que c'était un menu donc il était censé être défini

tu peux quand même déterminer le nombre de cas possible où tu auras 2 lignes ?

puis donne nous un peu de code ça pourrait peut être permettre à quelques un de t'apporter des réponses

Euh c'est pas un probleme lié spécifiquement a mon code, c'est plutot une question générale : comment formatter une liste qui se comporte de cette facon-la ?

je te conseil alors de mettre un titre plus explicite

Salut,

un petit test :

ul {
	width: 200px;
	padding: 0;
	margin: 0;
	overflow: hidden;
	list-style: none;
}

ul li {
	float: left;
	margin: 0 5px 0 0;
	position: relative;
	left: -10px;
} 

ul li:before {
	content: '- ';
} 

<ul>
	<li>Lien 1</li>
	<li>Lien 2</li>
	<li>Lien 3</li>
	<li>Lien 4</li>
	<li>Lien 5</li>
</ul>

@Quikers > le problème est clairement exposé depuis le début.
Cela dit tu as raison pour le titre : il n'est pas des plus évocateurs.
Modifié par Heyoan (16 Jan 2010 - 12:57)

Ca marche niquel Heyoan, sauf sur IE7 et 8! Sous IE mes <li> sont alignés cote a cote sans separateur

Re',

apericube a écrit :
Ca marche niquel Heyoan, sauf sur IE7 et 8! Sous IE mes <li> sont alignés cote a cote sans separateur

Je suppose que tu veux dire IE6 et IE7 auquel cas c'est normal puisque ces 2 navigateurs (obsolètes ) n'implémentent pas le pseudo-élément :before. J'aurais tendance à dire "dégradation gracieuse" et laisser les choses en l'état mais tu peux également changer le code pour ces navigateurs à l'aide de commentaires conditionnels.

Mais non la 8 aussi ! J'ai la version euh.. 8.0.7600.16385 et ca ne marche point ! Un indice de ce a quoi pourraient ressembler ces commentaires conditionnels ?

apericube a écrit :
Mais non la 8 aussi !

Je soupçonne ta page d'être en mode de compatibilité IE7.

Pour un exemple de commentaire conditionnel :

<!--[if lte IE 7]>
<style type="text/css" media="screen">
ul li {
	background: url(tiret.png) left center no-repeat;
	padding-left: 20px; 
	left: -20px;
}
</style>
<![endif]-->

tiret.png est... un tiret avec fond transparent.

A noter que cette solution d'image cadrée à gauche et de padding-left devrait fonctionner à priori sur tous les navigateurs.
Modifié par Heyoan (31 Jan 2010 - 17:24)

Finalement j'ai utilisé le list-style des <li> en le remplacant par une image, en floatant les <li> a gauche, et seuls les <li> qui ne sont pas en debut de ligne recoivent ce list-style.

Je ne suis meme pas sur d'avoir compris moi-meme pourquoi ca marche mais ca marche !

Le problème est donc [résolu] ?