28172 sujets

CSS et mise en forme, CSS3

Bonjour tout le monde.

Voila j'ai un ptit problème de mise en page.
J'ai une image en float left et une liste sur sa droite dont les LI contiennent un backgound (une petite puce). Dans FF pas de problemes. Dans IE les puces partent derrière l'image.
A part faire un tableau pour présenter ces 2 éléments y'a t il une autre moyen ?

Merci beaucoup
moon
Modifié par moon (25 Aug 2008 - 10:35)
a écrit :
A part faire un tableau pour présenter ces 2 éléments y'a t il une autre moyen ?

Pas besoin d'en arriver à de telles extrémités Smiley lol

Je pense qu'il s'agit d'utiliser list-style-position pour régler le positionnement de ta puce, enfin après, le mieux serait d'avoir le bout de code CSS correspondant pour confirmer

edit : yop pardon j'ai mal lu ton message !
Il ne faut pas mettre ta puce en background mais plutôt utiliser la propriété list-style-image pour utiliser une puce personnalisée.

list-style-image: url(urldetonimage/image.jpg);

Modifié par audrasjb (25 Aug 2008 - 14:23)
Hello !

En effet ca a l'air de fonctionner en revanche est ce qu'on peut positionner la puce comme avec le background grace aux attributs top left voir des positionnement en pixel genre ...toto.gif) 1em 0.3 em no-repeat ?

J'ai essayé ca n'a pas l'air de fonctionner Smiley ohwell
Hello moon,

list-style-image est pratique car en cas de désactivation des images on voit toujours une puce. Le problème est qu'il est beaucoup plus difficile à styler qu'un background sur les LI.

Pour ta question je pense que c'est un problème de margin et padding par défaut. Voir ce point de la FAQ.

A+


Edit: j'ai déplacé ton sujet dans le bon salon. Smiley cligne
Modifié par Heyoan (25 Aug 2008 - 18:23)
Merci Heyoan

Hélas je n'ai pas trouvé de solution dans la mesure ou l'image de gauche (qui est en float) n'a pas de taille fixe je ne peut donc pas fixer de marge a gauche pour ma liste.

J'ai donc fait un tableau.

Encore merci
moon