28173 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai un texte assez long placé dans un bloc DIV. Je souhaite placer deux images parmi le texte. Idéalement, une à gauche, et l'autre un peu plus bas à droite.
Mon texte est dynamique (cà d issu d'une BDD Mysql). Je ne peux donc pas mettre mon image au milieu du texte...

Pas de problème pour la première image : un float left et c'est bon. Pour la deuxième, si j'essaie de la positionner en absolute (pour la décaler sur la droite et le bas, elle masque le texte.. EN d'autres termes, le texte passe sous l'image au lieu de la contourner...

Jem e force à faire tout mon designe et ma mise en page à l'aide du CSS pour apprendre... Pour l'instant, j'ai pu dépasser tout les petits soucis qui se sont présentés... MAis là, je bloque... SI vous avez une idée, je suis preneur...
Modifié par Cap (02 Nov 2006 - 11:35)
Bonsoir,

Je n'ai peut-être pas bien compris ton problème, mais je pense qu'un float: right; avec éventuellement une marge pourrait aller très bien.
J'ai essayé ça avec un margin-top: 150px;

Le soucis, c'est que le texte ne vas pas au dessus de l'image, puisque l'espace au dessus fait parti de la marge...

En plus, le texte pourra avoir des longueurs différentes, donc en mettant une longueur fixe (150px) si le texte est trsè court, l'image se retrouve en dessous...
Cap a écrit :
J'ai essayé ça avec un margin-top: 150px;

Le soucis, c'est que le texte ne vas pas au dessus de l'image, puisque l'espace au dessus fait parti de la marge...

En plus, le texte pourra avoir des longueurs différentes, donc en mettant une longueur fixe (150px) si le texte est trsè court, l'image se retrouve en dessous...
Oui, c'est vrai, j'ai dit n'importe quoi...
Bonjour,

Si ton texte est d'un seul tenant tout frais sorti de ta bdd pour placer ta 2em image tu vas avoir du mal en css, il te faudra d'une manière ou d'une autre le couper pour éventuellement utiliser un float: right ... Et là sauf erreur il faudra le traiter préalablement par php soit à l'insertion dans ta bdd en incluant un tag de césure soit à l'affichage en imposant une régle de césure.
De mémoire, pour un problème quasi identique et en php:
détermination de la longueur du texte
prendre le milieu (par exemple ou autre fraction)
rechercher le premier "." vers la droite (fin de phrase)
Affecter à 2 variables $debut_texte la première moitié jusqu'au point et $fin_texte le reste.
Ensuite passer par float: left la premiere image et le début du texte suivi d'un clear puis float: right et fin de texte... Ca s'adapte alors à la longueur de ton texte ...
Merci, c'est la conclusion à laquelle j'étais parvenu... J'ai mis en application et ça marche... Comme quoi, le salut n'est pas toujours dans le CSS...

Merci en tout cas de votre aide...