[CSS]list - outside - width

Version imprimable

Salut

J'ai un problème de liste. En effet, lorsque je met une largeur spécifique à mon <UL>, je ne peux pas avoir dans list-style la propriété outside. Il n'y a que inside qui fonctionne.

voici mon code CSS:

Code:

#List2{list-style:disc outside none; width:218px;}

HTML:
Code:

1 2 3 4 5 6 7 8 9 10 11 <ul id="List2" class="phone"> <li>123-456-7890 ext.12345 (home)</li> <li>123-456-7890 (fax)</li> <li>123-456-7890 ext.12345 (work)</li> <li>123-456-7890 ext.12345 (mom)</li> <li>123-456-7890 ext.12345 (cell)</li> <li>123-456-7890 (dad)</li> <li>123-456-7890 ext.12345 (son)</li> <li>123-456-7890 (sister)</li> </ul>
qu'est-ce qui se passe?

Merci

quidam66

13/06/2006, 17h40
Chronax

Salut quidam, c'est normal la valeur outside de la propriété "list-style-position" est sa valeur par default .
Bonne continuation
13/06/2006, 17h42
quidam66

Je continue à faire des tests en attendant que quelqu'un se penche sur mon problème et l'attribut "inside" fonctionne bien avec une largeur (width). Je ne sais toujours pas pourquoi c'est comme ça cependant! Pourquoi le "outside" d'une liste ne fonctionne pas avec une "width"???

quidam66
13/06/2006, 17h45
quidam66

Salut Chronax.

Mais je lis et relis ton message mais je ne comprend pas. Désolé, pourrais-tu être un peu plus explicite?

quidam66
13/06/2006, 17h57
Chronax

Et bien en fait je ne suis pas sur vu que je connais pas trop cette proprité mais essaye ca quidam:

Code:

#List2{list-style-position:disc outside none; width:218px;}

Voila si ca ne marche pas...je laisse la main ;)
13/06/2006, 18h03
quidam66

Merci pour l'effort Chronax mais ça ne fonctionne pas!

je continu mes recherches...

quidam66
13/06/2006, 18h53
Auteur
bonjour,

à quoi est destiné le "none" de ton style ?
Comme ceci ça ne marche pas ?
Code:

1 2 #List2{list-style-type:disc; list-style-position: outside; width:218px;}
13/06/2006, 19h04
quidam66

Salut

Voici la signification du none: Il est possible de joindre trois propriétés des listes en une seule qui est regrouper sous "list-style". Donc

list-style{disc outside none} = list-style{type position url}

Alors si j'ai mis none en troisième position c'est que je n'ai pas d'image de remplacement à la place des puces prévues pour les listes.

Bon, pour la seconde question: non ça ne fonctionne toujours pas Auteur.

Merci quand même

On continue!

quidam66

chez moi ca ca fonctionne :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
 
 
<head>
<style>
	#list2{
 
	list-style-image: none;
	list-style-position: outside;
	list-style-type: disc;
	width:718px; 
	background-color:red;
	border : 1px solid black;
	color:blue;
 
}
 
	</style>
</head>
<body>
	<ul id="list2" >
		<li>123-456-7890 ext.12345 (home)</li>
		<li>123-456-7890 (fax)</li>
		<li>123-456-7890 ext.12345 (work)</li>
		<li>123-456-7890 ext.12345 (mom)</li>
		<li>123-456-7890 ext.12345 (cell)</li>
		<li>123-456-7890 (dad)</li>	
		<li>123-456-7890 ext.12345 (son)</li>
		<li>123-456-7890 (sister)</li>
	</ul>
</body>

Mais je sais pas si j'ai bien compris ce que tu dis...

14/06/2006, 15h57
quidam66

Désolé romain mais ici ça ne fonctionne toujours pas. J'ai fait un copié/collé de ton code et je ne voix toujours pas les petits points au côté des éléments de ma liste...

Merci beaucoup et on continue.

quidam66
14/06/2006, 20h13
Auteur

Citation:

Envoyé par quidam66

Désolé romain mais ici ça ne fonctionne toujours pas. J'ai fait un copié/collé de ton code et je ne voix toujours pas les petits points au côté des éléments de ma liste...

tu vexu réduire l'espace entre la puce et le texte ?
14/06/2006, 21h55
quidam66

Non, non

Je souhaite seulement avoir une largeur prédéterminée pour ma liste. Je veux aussi avoir une puce et si mon texte "wrap", je souhaite voir mon texte s'aligner avec le texte de la première ligne, pas à la puce. Mais ce que j'ai constaté c'est que si je met une largeur à ma liste (ex: width:290px) et que je met la position de ma liste à outside (list-style-position:outside) la puce disparait et le texte vient s'aligner avec le texte mais comme il n'y a plus de puce, ben l'effet est null. Si je ne met pas de largeur (width) tout fonctionne nickel! Mais j'ai absolument besoin de la largeur de ma liste car je la modifie dynamiquement mais ça c'est une autre débat.

Alors, est-ce plus clair maintenant?

quidam66

j'ai essayé ce code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
.list2{
   list-style: outside disc;
   width: 200px;
   border : 1px solid #AAAAAA;
}
//-->
</style>
 
</head>
 
<body>
 
<ul class="list2">
		<li>123-456-7890 ext.12345 (home)</li>
		<li>123-456-7890 (fax)</li>
		<li>123-456-7890 ext.12345 (work)</li>
		<li>123-456-7890 ext.12345 (mom)</li>
		<li>123-456-7890 ext.12345 (cell)</li>
		<li>123-456-7890 (dad)</li>	
		<li>123-456-7890 ext.12345 (son)</li>
		<li>123-456-7890 (sister)</li>
 
 
</body>
 
</html>

Il fonctionne très bien ...... sous Firefox mais pas du tout (du moins si on précise width) sous IE.

Si tu veux que cela marche sous IE, il faut que ta feuille de style soit :

Code:

1
2
3
4
5
6
7
8
 
.list2{
   list-style: inside disc;
   width: 110px;
   border : 1px solid #AAAAAA;
   text-indent: -20px; /*aucun lien avec la valeur de padding-left*/
   padding-left: 20px;
}

par contre le résultat est médiocre avec Firefox (et carrément catastrophique avec la valeur outside).

15/06/2006, 15h18
quidam66

Auteur, je te remercie.

Tout fonctionne très bien! Comme je n'avais pas spécifié que mes pages ne doivent fonctionner que sur IE je garderai la dernière de tes suggestions. Je sais, ce n'est pas très WEB 2.0 mais, mes besoins sont clairs et je me dois d'y aller avec cette solution.

Donc, je remercie tous ceux qui se sont arrêtés et qui ont pris le temps de fouillé mon code pour arriver une solution plus qu'acceptable, tout particulièrement Auteur qui a trouvé la solution.

Je ferme cette discution!

quidam66