tuto "developpez" sur les puces avec des images

Version imprimable

01/03/2009, 14h07
gomodo

tuto "developpez" sur les puces avec des images

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 ?

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

Merci aux esprits éclairés.
01/03/2009, 14h37
Macmillenium
Bonjour,

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

Par exemple :
Code:

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.

merci de prendre un peu de temps.

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

Code:

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:

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.

Non simplement :
Code:

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:

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 ?

01/03/2009, 14h51
desert
Je ne sais pas quel exemple tu as pris mais je parierais pour le dernier. :P
Il faut jouer avec la propriété background-position.
Avec ceci
Code:

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:

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

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

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.