5568 sujets

Sémantique web et HTML

[resolu] Pas de passage à la ligne sur ie avec  

bonjour,
dans une liste en ligne, j'ai une image et du text pour chaque <li>
pour une meilleur lisibilité j'ai souhaité que le groupe (image et text) passe à la ligne, pour ne pas que la puce soit seule en bout de ligne.

Donc j'ai utilisé &nbsp; mais ça ne passe pas sur Ie.

<ul>
 <li><span>&nbsp;</span><a href="#" title="">Internet entreprise&nbsp;&nbsp;</a></li>
                                     <li><span>&nbsp;</span><a href="#" title="">T&eacute;l&eacute;phone portable entreprise&nbsp;&nbsp;</a></li>

</ul>




 ul li{
display:inline;
}


li span{
background-image:url(../images/squelette/fleche_puce3.gif);
background-repeat:no-repeat;
width:5px;
height:9px;
background-position:left center; /*alignement au texte*/
padding-right:0.3em;
}


voilà, je pense que ce bout de code suffit pour comprendre.
une solution existe-t-elle?
&nbsp; est utilisé pour insérer un espace, pas pour un retour à la ligne. Les retours à la ligne en html sont réalisé avec la balise <br />
oui bien sûr on utilise <br/> mais c'est pas ce que je veux car dans mon cas, le retour à la ligne doit se faire automatiquement et suivant la largeur du texte et pas forcément toujours au même endroit.

En fait il faut un espace qui ne peut pas être coupé, qui garde ce qui l'entoure collé. Donc, si 2 mots sont séparés par un &nbsp; lorsqu'ils sont au bout d'une ligne et qu'il ne reste plus assez de place pour qu'un seul reste sur cette ligne, alors les 2 mots passent à la ligne suivante. Et c'est normalement à ça que sert &nbsp; sauf que ça passe pas sous IE

voilou Smiley cligne
En fait ce n'est pas considéré comme une puce puisque l'image est en background de la balise <span>. J'ai essayé d'utiliser list-style-image, si j'enlève <span>&nbsp;</span> et que je met la propriété list-style-image aux éléments de ma liste mais les puces ne s'affichent pas dans ce cas, et je vois pas pourquoi, donc c'est pour ça la première solution.

Mais pour répondre à ta question, une puce doit bien suivre son texte
Bonjour charlylalou,

Si j'ai bien compris, il s'agit de simuler une puce en image pour des liens de type en-ligne, sans passer par une image de fond sur le lien lui-même.

On pourrait simplifier en passant par une image de fond non répétée sur les liens (avec padding à gauche qui va bien, et positionnement à gauche), mais ça pose problème à Internet Explorer lorsqu'un lien passe sur deux lignes.

La solution que tu as imaginée est intéressante. Par contre, niveau code CSS tu as un problème: comme tes span sont des éléments de type en-ligne, tu ne peux pas leur donner de hauteur ou de largeur. La largeur sera celle du contenu, et peut être augmentée par du padding latéral. La hauteur sera celle du line-height du span (pour une simple puce on ne devrait pas avoir besoin de l'augmenter), et ne peut pas être augmentée par du padding.

Si c'est bien ce que tu souhaites, j'ai réussi à obtenir ce genre de chose avec le code suivant:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test</title>
	<style type="text/css">
	ul li {
		display: inline;
		padding: 0 4px;
		margin: 0 4px;
	}
	ul li span {
		padding: 0 10px;
		background: url(http://forum.alsacreations.com/smilies/murf.gif) no-repeat center center;
	}
	</style>
</head>

<body>
<ul>
	<li><span>&nbsp;</span><a href="#">Lorem ipsum dolor sit amet</a></li>
	<li><span>&nbsp;</span><a href="#">Lorem ipsum dolor sit amet</a></li>
	<li><span>&nbsp;</span><a href="#">Lorem ipsum dolor sit amet</a></li>
	<li><span>&nbsp;</span><a href="#">Lorem ipsum dolor sit amet</a></li>
	<li><span>&nbsp;</span><a href="#">Lorem ipsum dolor sit amet</a></li>
	<li><span>&nbsp;</span><a href="#">Lorem ipsum dolor sit amet</a></li>
	<li><span>&nbsp;</span><a href="#">Lorem ipsum dolor sit amet</a></li>
	<li><span>&nbsp;</span><a href="#">Lorem ipsum dolor sit amet</a></li>
	<li><span>&nbsp;</span><a href="#">Lorem ipsum dolor sit amet</a></li>
</ul>
</body>
</html>

Modifié par Florent V. (25 Oct 2007 - 10:46)
ouhaou super, c'est tout à fait ce que je voulais, ça fonctionne très bien, et c'est vrai que cette solution des <span> est pratique au final pour ce genre de liste, puisque ça s'adapte bien à IE, cool
Smiley lol
merci!
Modifié par charlylalou (25 Oct 2007 - 11:10)
Sujet clos
Aller à