28217 sujets

CSS et mise en forme, CSS3

Puce et retour à la ligne [Réglé]

Bonjour tout le monde Smiley smile

Je voudrais savoir s'il est possible ou non de faire la présentation suivante:

Quand j'utilise une puce et que le texte est trop long et donc qu'il va à la ligne il n'est pas justifié avec le texte de la puce:

[b]o[/b] test .......
test suite


et je voudrais que ca donne ca:

[b]o[/b] test .......
  test suite


Merci d'avance pour votre aide.
Modifié par Beiden (15 Dec 2005 - 11:47)
Salut Beiden,

Tout est là. Smiley smile 

<!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" lang="fr" xml:lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<meta http-equiv="Content-Language" content="fr" /> 
		<title>Exemples de listes avec et sans retraits</title>
		<style type="text/css">
			#exempleslistes
			{
				width:100px
			}
			#exempleslistes ul
			{
				margin:0;
				padding:0;
				margin-left:20px
			}
			#exempleslistes ul#retrait
			{
				list-style-position:outside
			}
			 #exempleslistes ul#sansretrait
			{
				list-style-position:inside
			}
		</style>	
	</head>
	<body>
		<div id="exempleslistes">
			<ul id="retrait">
				<li>test test test test test test test test test test test</li>
				<li>test test test test test test test test test test test</li>
			</ul>
			<ul id="sansretrait">
				<li>test test test test test test test test test test test</li>
				<li>test test test test test test test test test test test</li>
			</ul>
		</div>
	</body>
</html>

Modifié par 20cent (15 Dec 2005 - 10:37)
Hello,

dans mon css, j'ai ca:


ul {
  margin: 0;
  padding: 0;
  list-style-position: outside;
}

li {
  background-image: url(../images/ul.gif);
  background-repeat: no-repeat;
  background-position: 0px 5px;
  line-height: 17px;
  text-indent: 18px;
  padding-top: 0px;  
}


et ca m'affiche deux fois une puce ?

upload/4189-ex.jpg

le code html:

<ul>
<li>
<div align="justify">Société Anonyme d'Economie Mixte&nbsp; au capital de 8 694 368 €.<br />

&nbsp;</div></li></ul>
<ul>
<li>
<div align="justify">Société financière pour l’immobilier professionnel
agréé par le Comité des Établissements de crédits et des Entreprises d’Investissements <br />
</div></li></ul><br />


Merci d'avance pour votre aide Smiley smile
Modifié par Beiden (15 Dec 2005 - 11:25)
D'une part, tu as la puce naturelle de la liste.
D'autre part, tu places un fond sur tes items.

Ce qui visuellement ce traduit par deux puces.
Il te faut, au vue du code ci-dessus, supprimer la puce de la liste avec list-style-type:none.
Modifié par 20cent (15 Dec 2005 - 11:37)
Sujet clos
Aller à