[CSS]list - outside - width

**quidam66** · 13/06/2006, 17h19

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Chronax** · 13/06/2006, 17h40

Salut quidam, c'est normal la valeur outside de la propriété "list-style-position" est sa valeur par default .
Bonne continuation

**quidam66** · 13/06/2006, 17h42

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

**quidam66** · 13/06/2006, 17h45

Salut Chronax.

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

quidam66

**Chronax** · 13/06/2006, 17h57

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Voila si ca ne marche pas...je laisse la main

**quidam66** · 13/06/2006, 18h03

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

je continu mes recherches...

quidam66

**Auteur** · 13/06/2006, 18h53

bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
#List2{list-style-type:disc; list-style-position: outside; width:218px;}

**quidam66** · 13/06/2006, 19h04

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

**<romain/>** · 13/06/2006, 20h35

chez moi ca ca fonctionne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

**quidam66** · 14/06/2006, 15h57

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

**Auteur** · 14/06/2006, 20h13

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 ?

**quidam66** · 14/06/2006, 21h55

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

**Auteur** · 15/06/2006, 01h11

j'ai essayé ce code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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).

**quidam66** · 15/06/2006, 15h18

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

[CSS]list - outside - width

CSS

Vue hybride

Discussions similaires

Partager

Partager