Discussion :

[hobahoui]

Bonjour à tous,

malgré les messages lus à ce sujet, je patauge dans la semoule :

j'ai une feuille de style externe dans laquelle j'ai :

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
.puce1 {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin-left: 0px;
    list-style-type: circle;
    list-style-position: outside;
    text-align: left;
    display: list-item;
 
ul {
margin-left:0px;
padding-left:0px;
list-style-position: outside;
}
 
li {
    line-height: 17px;
    text-indent: 18px;
    padding-top: 0px;
    list-style-position: outside;
    list-style-type: disc;
 
}

Dans ma page, j'ai un tableau qui contient une liste à puce :

Code :

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

1
2
3
4
 <td class="puce1"><ul type="disc">
        <li>Toto est dans un bateau, et il est rigolo,</li>
        <li>Toto est dans un bateau, et il est rigolo,</li> 
       </ul></td>

Malheureusement, malgré l'utilisation de "list-style-position: outside;" dans la feuille de style, le texte ne s'aligne pas après la puce mais avant...

J'aimerais que le texte qui retourne à la ligne soit aligné après la puce précédente...

je suis super débutant, j'ai vu qu'il y avait des monstres sur ce forum, est-ce que l'un d'eux peut me donner un stit coup de main pour m'aider à avancer s'il vous plait ?

Merci d'avance !!

[masu]

premiere chose il manque une acolade a ton .puce1 (surement une faute de frappe).

Code :

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

1
2
3
4
5
6
7
8
9
.puce1 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
margin-left: 0px;
list-style-type: circle;
list-style-position: outside;
text-align: left;
display: list-item;
}

ensuite outside est la position par defaut des puces.
Pas besoin de definir les elements de style de liste dans ta class ou les li. je met toujours tout dans le ul.

Par contre la mauvaise idée est d'enlever la marge gauche car a ce moment on ne voi plus la puce.

Code :

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

1
2
3
4
5
6
7
8
9
10
 
ul {
	list-style: disc outside;
}
 
li {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 17px;
}

Code :

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

1
2
3
4
<ul>
<li>Toto est dans un bateau,<br /> et il est rigolo.</li>
<li>Toto est dans un bateau, et il est rigolo.</li>
</ul>

ps: utilise la balise code, le bouton #

[masu]

petite précision apparement quand le list-style-position est outside:
ie positionne la puce dans la marge exterieur du ul
ff la positionne dans la marge intérieu du ul

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
body {
	margin:0;
	padding:0;
}
 
*>ul {/*ff*/
	list-style: disc outside;
	padding-left: 15px;/*espace pour la puce dans la marge intérieur du ul*/
	margin-left: 0;
	color: red;
	border: 1px blue solid;
}
* html ul {/*IE*/
	list-style: disc outside;
	margin-left: 20px;/*espace pour la puce dans la marge extérieur du ul*/
	padding-left: 0;
	color: green;
	border: 1px blue solid;
}
 
li {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 17px;
	border: solid pink 1px;
}

Code :

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

1
2
3
4
<ul>
<li>Toto est dans un bateau,<br /> et il est rigolo.</li>
<li>Toto est dans un bateau, et il est rigolo.</li>
</ul>

[hobahoui]

c'est tout ok Masu ! Merci pour la rapidité, la compétence et la pédagogie !

Deux petites questions au passage comme je vois que tu maîtrises :

qu'est-ce que c'est que

*>ul { et * html ul {

et quand est-ce que tu me conseilles d'utiliser *, # ou . ?

Merci encore !

[masu]

ce sont ce qu'on appel des hacks css. C'est a dire un moyen des daire en sorte que seul certains navigateurs voient certaines propriétées.

IE est le seul navigateur a avoir un conteneur "virtuel" au dessu de HTML donc * html TONSELECTEUR { permet de cibler uniquement IE.

*>TONSELECTEUR IE ne comprend pas cette syntaxe donc le block de propriété qui suit ne sont pas interprété dans IE.

Dans mon exemple cela me permettait d'annuler la marge qui n'etait pas utilisé pour afficher la puce de facon specifique au navigateur.