28220 sujets

CSS et mise en forme, CSS3

bonjour !

Je me retrouve régulierement face a des problemes "ennuyeux" avec le css (surtout a cause d'IE, il faut bien le dire) :

Mon but est d'avoir une liste d'elements, comprennant une image et un texte a droite.
Sachant que les images ne sont forcement de la meme taille, tout comme la hauteur du texte.

Tous le probleme réside du fait que je veux une marge égale entre les blocs (en jaune sur l'image) et ce qu'elle que soit les hauteurs de textes et d'image.

Sachant aussi que je ne veux pas que le texte trop long passe sous l'image.

J'ai essayé divers float et positio:absolute, mais je n'ai rien qui marche partout. Je vais certainement finir par utiliser une <table>.

en image :
http://nee.free.fr/exempleActu.png

Vous avez une idée ? Merci d'avance
Une liste d'élément image ? Kézako ?

Tu veux une liste habituelle avec des images associés à chaque contenu listé ? Dans ce cas l'image joue le rôle de puce-image non ?

Ou tu veux afficher une image qui illustre vraiment le contenu associé auquel cas il serait préférable d'utiliser des paragraphes P.

Je n'ai pas trés bien saisi ton besoin...

Car si tu veux associer une image avec du texte dans un élément de liste et que l'image toujours située en premier peut avoir une taille variable ton texte ne sera jamais aligné avec les autres de toute façon...

Ton visuel est mal choisi pour exposer ton cas précis. Déjà tes carrés gris ont tous la même dimension sauf erreur.

Montre un exemple plus concret cela sera beaucoup plus simple que de faire un schéma inutile (?).
effectivement c'est pas forcement tres clair.

voici une page avec les elements isolés :

http://nee.free.fr/cssArticles/

Dans ce cas, mon probleme est que le texte passe sous l'image si celle ci est trop courte (normal, elle est en float:left).

Je vois pas comment faire pour faire des colones, sans avoir de taille fixe.
Administrateur
nee a écrit :
Dans ce cas, mon probleme est que le texte passe sous l'image si celle ci est trop courte (normal, elle est en float:left).

Salut,

Ce n'est pas gênant, il suffit d'appliquer une marge gauche au texte.
effectivement, mais du coup je suis obligé de fixer arbitrairement une marge...
Si mes images sont de differentes largeurs, le texte ne s'adaptera pas a elles...

Mais c'est le propre du float, je pense qu'il n'est pas possible de faire autrement...

merci a vous