Puce et alignement

Salut,
je ne suis pas certain de comprendre

Tu veux que si ton texte se met sur plusieurs lignes, que la puce soit au milieu (verticalement) du "bloc" de texte ? c'est bien ça ?

Je ne pense pas que ça soit une bonne idée (ça a tendance à donner une impression "bugguée" et de plus on ne sait plus trop où commence l'item de liste).

M'enfin si tu y tient vraiment pour X raisons à le faire. Il va falloir passer par les images de fond.

li {
list-style: none;
background: url(puce.gif) no-repeat 0 50%;
}

je vais essayer de mieux expliquer :
j'ai une puce qui est une image : c'est une petite sphère.
Le texte qui est à droite de la puce est court (c'est pour un menu) :
par ex :
o accueil
o informations
o contact

Le problème est que mon texte n'est pas aligné avec le centre de la sphère. Si je trace vituellement une droite horizontale qui passe par le centre de la puce, j'aimerais que cette droite passe également au centre du texte. (or pour l'instant, la droit passerait plutôt au dessus du texte...)

C'est plus clair? j'en suis pas certaine mais bon...

Effectivement l'image de ta puce en background te permet de la bouger à l'endroit qui te convient le mieux. Voici un exemple de code.

ul {
margin:10px 0 0 0;
padding:0;
list-style:none;
position:relative;
}

ul li {
padding-left:10px;
background:url('images/sphere.gif') no-repeat 0px 6px; }

Tu peux toujours changer le padding-left:10px et le 6px;

bonne chance

@ mjoly > tu n'as sans doute pas omis de lire le lien du haut du forum à savoir :
Nouveau sur le forum ? Voici votre case départ pour bien débuter.

Qui te demande de baliser ton code avec [ code] etc

Un truc que je ne comprend pas dans ton code, c'est le position: relative; sur ton <ul> qui ne sert strictement à rien

Par ailleurs, pour le positionement de l'image en background, il est préférable d'utiliser des unité de taille relative à la taille de police histoire que la puce soit toujours centré quelque soit la taille du texte.

Ensuite, "0px" l'unité ne sert à rien pour la valeur "0" tu peux l'enlever

Enfin, eviter les "quote" dans les url des CSS causes de pas mal de bug sur différents navigateurs.
Le code devient donc :

li
{
padding-left: XXpx;
list-style: none;
background: url(blabla.gif) no-repeat 0 0.6em;
}

Puisque ton problème est résolu et que tu n'as pas manqué toi non plus de lire le message auquel je faisais référence plus haut, tu ne manqueras pas de l'indiquer
http://forum.alsacreations.com/faq/#item22

Et ce pour que ce forum soit encore plus pratique

et bien en fait, ce n'est pas tout à fait résolu...
J'ai rajouté un padding-bottom pour mes <li>, jusque là tout va bien. Le problème c'est que ca ne pas très bien sur Opéra. Sur FF, IE et Netscape, c'est ok. Sur Opera, l'image de la puce est "mangé", il lui faudrait un padding plus grand.
C'est opera qui est buggé ou il y a moyen de regler ça ?
merci !

[désolée pour les consignes du forum, je vais les lire, promis!]

Quelle version d'Opera ?
Un exemple en ligne ?
Modifié par Olivier (21 Sep 2005 - 10:28)

maryline a écrit :
version 8.5
pas d'exemple en ligne puisque c'est une page de test.

Si tu pouvais mettre ça en ligne quand même histoire qu'on puisse visualiser le problème.

Hmm, je pense que ça vient du fait qu'Opera n'utilise pas la même valeur par défaut de taille de police, le positionement de l'image étant fait par rapport à cette taille, le problème vient peut être de là.

Tu peux tenter d'utiliser une valeur en pixel pour vérifier.

Tu mets par exemple 7px (exemple à ajuster en fonction de tes besoins) et tu regardes si le rendu est le même sous Opera et les autres.
Si c'est différent là encore, le problème ne viendra pas de l'unité relative de taille. Ca sera déjà un début de piste.

oki, pour l'image ca fonctionne, elle n'est plus "mangée".

Seulement, l'espace entre les <li> n'est pas le même sur Opera :
il est beaucoup plus étroit. Si j'augmente le padding-bottom, bien évidemment l'ecart augmente mais alors sur les autres navigateurs, ca devient beaucoup trop grand du coup!...