Discussion :

[Oluha]

Hello

J'ai toujours le même soucis avec les <ul><li>. Par défault, il y a un décalage à gauche par rapport à l'alignement du reste du conteneur :

http://www.magnificat.com/english/bo...stmascards.asp

CSS :

Code :

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

1
2
3
4
5
6
7
8
9
10
ul {
	list-style-image: url(images/coeurrougefondgris.gif);
	font-size:12px;
	margin-top: 0px;
	margin-bottom: 0px;
}
 
li {
	padding: 5px 0px 5px 2px;
}

Moi j'aimerai supprimer ce décalage pour avoir le même alignement que le texte en dehors de ces balises, j'essaye donc de modifier les margin et les padding de la balise <ul> mais IE et FF réagissent à l'opposé

Comment faire pour avoir un affichage correct sur les 2 navigateurs et supprimer ce fameux décalage ?

Merci

[Bisûnûrs]

Est-ce que la variante made-in Sam te conviendrait :

http://plambert.developpez.com/css-debutant/cours4.php

?

[Oluha]

Merci pour le lien mais ca ne fait pas ce que je veux.
Moi je cherche à supprimer l'espèce de marge gauche qui est automatiquement ajouté à la balise <ul>. En gros, au lieux de ça :

___* liste 1
___* liste 2
___* liste 3
mon blabla

Je voudrais :

* liste 1
* liste 2
* liste 3
mon blabla

Le problème c'est que IE et FF réagissent de façon opposé au padding et au margin sur la balise <ul>

[Bisûnûrs]

Mets sur tes ul :

Code :

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

1
2
3
margin:0;
padding:0;
list-style-position:inside;

[Oluha]

oui c'est ce que je viens de faire, en fait c'est le list-style-position: outside qui "fout la merde". Pourtant c'est bien ce qu'il me faudrait car l'alignement est laid quand un élément est sur 2 lignes. J'ai plus qu'à bidouiller avec des espaces insécable quoi
Enfin je trouve cette différence IE/FF assez abérante quand même. Si on met list-style-position: outside et une bordure sur la balise <ul> on voit très bien la différence entre les 2 navigateurs.

[onirisme]

Ajoute ces deux ligne dans tes li

Code :

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

1
2
3
 
text-indent : 0px  !important;
text-indent : -4px  ;

Résultat ie ->

Résulta ff ->


Code complet :

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
 
ul.grandbloc {
	list-style-image: url(images/coeurrougefondgris.gif);
	font-size:12px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-left: 4px;
	margin-left: 0px;
	list-style-position:inside ; 
}
li.grandbloc {
 
	margin: 7px 0px 7px 20px;
	text-indent : 0px  !important;
	text-indent : -4px  ;
 
}

Désolé, encore du bricolage

[Candygirl]

oui c'est ce que je viens de faire, en fait c'est le list-style-position: outside qui "fout la merde". Pourtant c'est bien ce qu'il me faudrait car l'alignement est laid quand un élément est sur 2 lignes. J'ai plus qu'à bidouiller avec des espaces insécable quoi

Je ne comprends pas pourquoi tu ne passes pas tout simplement par une image de fond comme suggéré dans le premier post de Bisûnûrs ?

ça te permettrais d'avoir le même résultat avec le même css...

[Oluha]

Je ne comprends pas pourquoi tu ne passes pas tout simplement par une image de fond comme suggéré dans le premier post de Bisûnûrs ?

ça te permettrais d'avoir le même résultat avec le même css...

J'ai testé mais ca ne me donne absolument pas le résultat voulu et ca m'affiche même n'importe quoi

@onirisme : j'ai pas capté à quoi sert tes 2 lignes et je ne vois aucun changement
Surtout que mon but c'est que quand le texte du <li> passe à la ligne, il soit aligné au texte de la 1ere ligne comme pourrait le faire la position "outside"

[Bisûnûrs]

On peut voir ce que ça te donne ? Parce que ça m'étonne là. ^^

D'autant plus qu'avec cette méthode qui utilise un padding-left, ta deuxième ligne s'alignera avec la première et tu ne seras pas obligée de gérer ça avec des espaces insécables.

[Oluha]

effectivement, j'avais du me gourer vendredi, là c'est mieux avec 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
ul.grandbloc {
	margin-top: 5px;
	margin-bottom: 0px;
	padding-left: 4px;
	margin-left: 0px;
}
 
li.grandbloc {
	font-size: 12px;
	list-style-type:none;
	background-image:url(images/coeurrougefondgris.gif);
	background-repeat:no-repeat;
	background-position:0% 65%;
	padding-left:15px;
	margin: 7px 0px 7px 0px;
}

Par contre, pour faire ma chieuse, quand ca passe sur 2 lignes, la puce est centrée, y'a pas moyen qu'elle soit alignée sur la 1ere ligne ?
Je suppose que ca se joue au niveau des background-position mais je capte pas bien les % utilisés.

[onirisme]

Voilà ce que ça donne -> Lien de visu

le !important permet de spécifier une valeur à FF
L'autre valeur sera interprétée sous ie et corrigera le décalage

[EDIT] J'avais pas vu le outside... je corrige

[Bisûnûrs]

Par contre, pour faire ma chieuse, quand ca passe sur 2 lignes, la puce est centrée, y'a pas moyen qu'elle soit alignée sur la 1ere ligne ?
Je suppose que ca se joue au niveau des background-position mais je capte pas bien les % utilisés.

Tu peux utiliser les px au lieu des pourcents, ta puce ne bougera plus comme ça.

Code :

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

1
2
background-position:[left top];
background-position:0 4px; /* par exemple */

[Oluha]

Tu peux utiliser les px au lieu des pourcents, ta puce ne bougera plus comme ça.

Code :

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

1
2
background-position:[left top];
background-position:0 4px; /* par exemple */

Effectivement, quand je met

Code :

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

background-position: 0 0;

ca fonctionnne bien.

Un grand merci pour ton aide en tous cas
Depuis le temps que je m'ennervais avec les listes à essayer de modifier les margin et padding

@Onirisme : merci aussi mais avec ton lien je n'ai pas du tout ce que je cherchais à faire