28173 sujets

CSS et mise en forme, CSS3

Salut,

Je n'arrive pas à faire avec des CSS ce qui est simplissime avec un tableau : avoir une image à gauche d'un texte, cette image pouvant être de taille variable (donc pas de déclaration de taille dans les styles CSS) et devant être alignée verticalement :

http://landoftrance.free.fr/liste/habillage.gif

Le texte est aussi de longueur variable, pouvant être composé de plusieurs paragraphes.
Je ne veux pas non plus un float left et un right car il se peut qu'il n'y ait pas d'image pour un texte donné (dans ce cas le texte doit automatiquement prendre toute la largeur).

J'ai essayé plein de trucs, affichage en float left, display inline-block, ...
En réalité j'arrive à le faire sous IE, mais pas sous FF (le texte "coule" en dessous de l'image s'il est plus grand que celle-ci).

MERCI.
Modifié par jeyce (16 Apr 2007 - 17:42)
Salut,
le seul truc vraiment difficile à faire sans tableaux dans ton cas, c'est l'alignement vertical de l'image en fonction de la hauteur du texte ce pétard de IE ne supportant pas le display: table-cell qui permettrait de jouer avec le vertical-align.

Sinon, faire que ton texte reste à droite et ton image à gauche, c'est relativement simple, c'est la solution que tu évoquait, float: left pour l'image ou son conteneur, float:right pour le texte. Puisque tu dis qu'il se peut que, ça semble vouloir dire qu'il y a un langage serveur derrière, du coup, ça me paraît plus simple de gérer la mise en page en cas ou pas d'image côté serveur et de servir la page avec les styles qui vont bien en fonction. Un bon vieux, if, elseif, et le tour est joué Smiley smile

Reste que pour que tout ça soit souple et adaptable à la taille du texte sans passer par cinquante lignes de hacks et bricolages en tous genres, deux cellules de tableaux font ça fingers in the nose, alors pourquoi se priver Smiley smile

Tant pis, laissons la burka css au vestiaire jusqu'à ce qu'elles et les navigateurs nous permettent de faire ces trucs si simples...

Have swing
Modifié par virtualgadjo (15 Apr 2007 - 18:13)
virtualgadjo a écrit :
Reste que pour que tout ça soit souple et adaptable à la taille du texte sans passer par cinquante lignes de hacks et bricolages en tous genres, deux cellules de tableaux font ça fingers in the nose, alors pourquoi se priver Smiley smile

Tant pis, laissons la burka css au vestiaire jusqu'à ce qu'elles et les navigateurs nous permettent de faire ces trucs si simples...

Oui, un tableau à deux cellules ira très bien.