Discussion :

[neoxtra]

Bonjour à tous,

Voilà, je souhaiterai afficher ma page de cette façon :

textetextetexte
imagetextetexte

Vous l'aurez très certanement compris, mon souhait est de laisser l'image associée au texte en bas à gauche de ma page, le texte coulant sur l'image à partir du haut jusqu'en bas du niveau de l'image.

Voici mon code CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
#texte #photo {
float:left;
width:345px;
height:413px;
margin-right:10px;
margin-top:10px;
/*clear:both;*/
}
#texte {
float:left;
width:714px;
clear:both;
text-align:justify;
}

Et le code de ma page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div id="texte">mon texte
     <div id="photo">mon image</div>  
</div>

Dans cette situation, l'intégralité de mon texte se place au dessus de mon image. Par contre si je place le DIV PHOTO avant "mon texte", tout se passe pour le mieux, mais mon image se situe en haut de ma page.

Arghhh !!!! Cela fait 5 heures que je cherche en vain !

Merci pour toute l'aide que vous voudrez bien m'apporter...

[Erwan31]

Bonjour,
le comportement que tu décris est normal mais je vois pas ou est le problème en fait, tu ne peux avoir ton texte qu'en un seul bloc?

Sinon il te faut avoir cette structure:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<p id="texte">mon texte <img id="photo" src="" width="" height="" alt="" /> mon texte suite</p>

Pas la peine d'imbriquer ton image dans une div et baliser ton texte par un "p" serait plus pertinent
Attention à bien préciser les 3 attributs minimum de ton image (height, width et alt)

[desert]

Tu dois créer un bloc vide (ici le div espace) qui va se charger d'allouer l'espace nécessaire pour afficher ton texte au-dessus de ton image.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id="texte">
     <div id="espace"></div>
     <div id="photo">mon image</div>
     mon texte
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
#espace {
     float:left;
     height:100px;	
}
#photo {
     float:left;
     clear:left;
     ...
}
...

le clear:left va permettre à ton texte de continuer vers la droite de ton image.

[neoxtra]

Bonjour, et merci pour vos suggestions.

Malheureusement, ça ne fonctionne toujours pas.

En faisant...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id="texte">
     <div id="espace"></div>
     <div id="photo">mon image</div>
     mon texte
</div>

... mon image se place en haut à gauche et mon texte coule le long de l'image puis en dessous.

Je rappelle que l'objectif est que le texte commence au dessus de l'image puis coule sur son côté droit. Ce qui veut dire que l'image doit être située en bas à gauche de ma page.

Desert, j'ai testé d'inverser ton code, mais le texte se place en haut puis l'image en dessous du texte.

Arghhhhh !!!!

Merci de m'éclairer encore si tu le peux.