28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,
Dans un CMS, on peut insérer par exemple une image dans la zone de texte. Du fait que les données sont dynamiques, la balise <p>paragraphe</p> est séparée de la balise <img />.

Donc, quand je veux aligner l'image à gauche ou à droite, et en haut (float:left;, float:right;) du texte, pas de problème... Mais je souhaite positionner aussi cette image à gauche ou à droite, en bas de la zone de texte.

Avez vous des solutions? je n'ai pas envie de devoir passer par une fonction PHP qui intégrerait "aléatoirement" la balise <img /> dans la balise <p>paragraphe</p>... Smiley biggol

Merci d'avance!
Administrateur
Bonjour et bienvenue, Smiley smile

un paragraphe ayant une hauteur dépendant de son contenu donc une hauteur variable, non il n'y a pas de moyen simple d'autant qu'en français (et autres) la lecture se fait de haut en bas et de gauche à droite. Pas de raison habituellement de placer une image plus bas que le texte pas encore affiché ... Smiley cligne

Tu peux lire les 3 articles sur le positionnement d'Openweb pour en apprendre plus sur le flux (et comment le contrecarrer).
Dans des cas bien précis, display: inline-block; (utilisation avancée des CSS, faut maîtriser les 3 articles qui précèdent) ou des cellules de tableau avec vertical-align pour la mise en forme (<private joke>oué ouééé même pas peur du vendredÿ</private joke>) peuvent reproduire ce que tu souhaites. Et sûrement d'autres techniques inconnues de moi mais tout ça est casse-gueule.
Une image ou un lien pour illustré ? un peu de code ?
comme ça je dirais un clear:both sur le <p> peut être mais c'est flou Smiley cligne
Voilàaa, j'ai fait une image pour illustrer mon rêve^^ upload/24612-Sans-titre.gif

Donc la partie grise est mon texte qui englobe mon image.

Le seul résultat que j'ai pu avoir de "concluant" est d'englober mon paragraphe + mon image avec une <div> stylée en height:auto; et d'y positionner mon image en absolute bottom:-100px (la hauteur de mon image). Mais de cette manière, et vous le savez tous, en position absolute, le float left ou right ne fonctionne plus et l'image passe au dessus du paragraphe.

La solution des tableaux est possible, et l'une des fonctionnalité du TinyMCE le prouve (génère un tableaux lorsqu'on insère une image dans un paragraphe, de ce fait, on peut drag-drop l'image au sein du paragraphe...). Mais ce genre de procédé me parrais plus complexe à intégrer pour du contenu dynamique... Smiley decu
Ca va pas être simple Smiley ohwell .
Comme ça je vois pas de solution en css tout seul.
Soit tu fais 2 paragraphes avec une distribution des caractères avec le php qui décompte le nombre de caractères possible dans le 2eme <p> qui a la mm hauteur que ton image et qui place le reste dans le premier, mais c'est galère.
Soit tu fais du JS qui récupère la hauteur de ton div et qui, à partir de là, calcul la margin-top qu'il faut appliquer à ton image.
Mais en CSS seul...je vois pas...dsl
En tous cas, merci à tous de vos réponses, c'est très sympa de vous être penché sur mon problème Smiley ravi
Peut-être que la CSS3 permettra de réaliser ce genre de fioritures^^

Merci encore!

Salut!