Discussion :

[gomodo]

Bonjour à tous,

Je veux faire des puce avec des images : bon je vais lire le tuto de l'excellent "developpez.com"..

.. le tuto est bien fait et agréable à lire(http://maxdesign.developpez.com/tuto...e-image-liste/).
Mais la solution "ultime" oublie de préciser que si il y a un retour à la ligne automatique, l'image se place verticalement entre les 2 lignes..
..pas comme les puces classiques qui reste bien en haut à gauche.

Comment vous feriez ?

( Franchement pourquoi le CSS et les placements verticaux des images c'est jamais simple ?)

Merci aux esprits éclairés.

[Macmillenium]

Bonjour,

As tu pensé à la propriété background-position ?

Par exemple :

Code css :

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

1
2
3
4
li {
background:url(puce.gif) no-repeat left top;
}

De cette manière ton background est toujours positionné en haut à gauche.

[gomodo]

merci de prendre un peu de temps.

si je passe de ce code (repris du dernier exemple du tuto) :

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
 
.iconlist
{
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li.green
{
  background-image: url(/templates/image_site/mark18_16/mark_vert.png);
  background-repeat: no-repeat;
  background-position: 0 50%;
  padding: 3px 0 3px 20px;
  margin: .4em 0;
}

vers 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
.iconlist
{
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li.green
{
  background-image: url(/templates/image_site/mark18_16/mark_vert.png);
  background-repeat: no-repeat left top;
  background-position: 0 50%;
  padding: 3px 0 3px 20px;
  margin: .4em 0;
}

j'ai l'image qui se répète derrière tout le texte.

[Macmillenium]

Non simplement :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.iconlist
{
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li.green
{
  background-image: url(/templates/image_site/mark18_16/mark_vert.png);
  background-repeat: no-repeat;
  background-position: left top;
  padding: 3px 0 3px 20px;
  margin: .4em 0;
}

Pour expliquer :

Code css :

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

1
2
 
  background-position: 0 50%;

0 : le background est positionné horizontalement à gauche,
50% : le background est positionné verticalement au milieu

Tu vois l'origine de ton problème ?

[desert]

Je ne sais pas quel exemple tu as pris mais je parierais pour le dernier.
Il faut jouer avec la propriété background-position.
Avec ceci

Code css :

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

1
2
3
li {
    background-position: 0 50%;
}

l'image va se positionné verticalement au centre car ici, les 50% désigne la moitié de la hauteur de la balise li toute entière (retours à la ligne y compris).
Maintenant, si tu indiques ceci par exemple

Code css :

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

1
2
3
li {
    background-position: 0 0.4em;
}

tu verras que l'image est bien positionnée en haut à gauche même avec un retour à la ligne (0.4em = approximativement la moitié de la hauteur d'une ligne de texte de la balise li).

[gomodo]

Effectivement ta solution règle le problème que l'on trouve dans l'exemple du tuto :

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
 
.iconlist
{
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li.green
{
  background-image: url(/templates/image_site/mark18_16/mark_vert.png) ;
  background-repeat: no-repeat;
  background-position: left top;
  padding: 3px 0 3px 20px;
  margin: .4em 0;
}

Merci encore pour vos explications rapides et efficaces.