Mise en page

Hello à tous.
J'aurais besoin d'une aide ... en effet, j'essaie de faire une mise en page (type article) avec du texte à droite d'une photo qui apres avoir pris toute la hauteur de celle-ci, continuerait en dessous de la photo. En mettant des float left sur la class de l'image et celle du texte, le texte continue sans passer sous l'image. Plizzzzzzzzzz Help !!

.art {display:block;position:relative;width:400px;padding:0;margin:0;}
.artImg {float:left;width:200px;height:100px;padding:0;background: transparent url(image.jpg) 0 0 no-repeat;margin:0 30px 40px 0;}
.artWord {float:left;padding:0;margin:0;width:auto;}

<div class="art">
<div class="artImg"></div>
<div class="artWord">
<span>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </span>
</div>
</div>

Merci d'avance

Pffff

Bonjour,

Je ne connait pas toutes les ficelles du métier mais il me semble bien que c'est impossible. Une des solutions serait de créer 2 paragraphe, 1 à coté de l'image, l'autre en dessous.

Si quelqu'un d'autre a une idée ?

Cordialement,
Polo

Bonjour,

Il ne faut pas faire flotter le texte, voilà tout. Il s'adaptera de lui-même à l'image.

J'ai trouvé un truc ... mettre un <img class="float:left"> et une balise <p> pour le texte, mais cela n'a pas l'air de fonctionner sous firefox
Ohhhh désespoir

Bonjour

La propriété FLOAT permet de positionner un bloc à gauche ou à droite dans un parent (et non-plus l'un en-dessous de l'autre). Le reste du conteneur parent occupera alors l'espace laissé libre....Les éléments qui le suivent au sein du conteneur se placent alors autour de lui.

Paragraphe : Positionner en flottant

Cdt,
Sylvain

*A la bourre...il faudrait que j'arrête de m'endormir devant le clavier...Florent
Modifié par 6l20 (27 Feb 2008 - 15:06)

<img class="float:left">

euh non ca va pas le faire par contre

<p><img src="image" style="float:left;padding: 3px;" alt="">blablabla</p>

devrait répondre à ton problème, si je l'ai bien compris
Modifié par tonini (27 Feb 2008 - 16:35)

Bonjour et bienvenue pffff

En tant que modératrice, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).



Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation