28172 sujets

CSS et mise en forme, CSS3

Bonjour tout l'monde,

J'essaie de placer un élément flottant (une image) en bas à droite d'un texte qui l'entoure.

Si j'utilise pour la partie HTML :

<div class="conteneur">
 <img class="image" src="..." alt="" />
  <p>bla bla bla bla bla bla bla bla bla bla
  bla bla bla bla bla bla bla bla bla bla ...</p>
</div>



Et la CSS correspondante :

.conteneur {
width: 40%;
background-color: yellow;
}
.image {
float: right;
}


j'ai mon image qui se place en haut à droite et le texte qui se place du côté gauche de mon image puis qui poursuit en occupant toute la largeur de l'élément parent. Mais je voudrais l'inverse: le texte dans toute la largeur puis il passe à gauche de mon image qui se trouve en bas à droite. Est-ce claire ? Comment qu'on fait ça ?
opopop007 a écrit :
J'essaie de placer un élément flottant (une image) en bas à droite d'un texte qui l'entoure.
Dans le code que tu donnes l'image n'est pas dans le paragraphe.
Modifié par Changaco (19 Apr 2008 - 08:57)
Merci Changago pour m'avoir répondu si vite (et désolé pour le temps que j'ai pris pour te répondre Smiley rolleyes )

L'exemple que je donnais n'était peut-être pas très clair (et j'avais fait du copier/coller d'un code de tuto d'Alsacréation.

Donc je reformule avec une petite image qui devrait être plus parlante (Le texte de l'image explique mes tentatives) : upload/16449-bloc-texte.gif
Hello,

Pour faire court, faire couler du texte autour d'une image alignée en bas à droite (ou à gauche) est impossible Smiley smile
Bonjour,

Peut-être un début de piste avec ce sujet et la proposition de yakou32 ?

Mais effectivement, ce n'est pas simple... Smiley sweatdrop

Cdt,
Sylvain
Une idée avec un autre bloc 'spacer' (en haut et invisible) qui permet de pousser notre bloc vers le bas.
Voir la solution proposé par yakou32 ici

Ce qui donne un truc comme ça , testé sur Firefox, Opera et I.E 6 avec des résultats quelque peu différents mais l'idée est là.