Image float au bas de la div

salut,

je cherche une solution propre depuis plus d'une semaine et me decide à poster.

voici ce que j'aimerai obtenir (fait avec the gimp évidemment)
et voici la situation actuelle

mon ambition est donc d'avoir un texte encadré par une image en haut à gauche et une autre en bas à droite. le texte engloberait ces images et créerait l'effet escalier qu'on observe sur l'image gimp plus haut.

pour l'image en haut à gauche pas de problème, en float:left avant le texte et c'est bon.
en revanche la deuxième en bas à droite pose problème.
en effet le problème vient du float:right qui empêche(si j'ai bien compris) de positionner verticalement.
positionner l'image en bas à droite ne pose pas de problème avec les propriété absolute ou relative ou tout simplement en la mettant en background du div. mais de cette façon, le texte ne contourne pas l'image et passe par dessus.

la boite centrale avec le texte se présente ainsi:

<div id="main"><!--boite centrale-->
  <img src="./design/notes.png" id="gauche1" /><!--img de gauche-->
  <img src="./design/resonances.png" id="droite1" /><!--img de droite-->
    <div class="texte"><!--boite du texte-->
       <h1>Nous</h1>
       texte
     <hr>
    </div>
</div>

img#gauche1{float:left;}
img#droite1{float:right;}

ça n'est évidemment qu'une parti du css, ici pour avoir le css entier.

j'ai essayé différentes solutions:
- mettre le float après le texte...
- la pseudo class :after pour mettre l'image à la fin du texte(une seul ligne du texte contourne l'image)
- séparer le texte en deux parties et créer une deuxieme boite en bas pour le texte qui
- contourne l'image de droite(bricolage, pas adapté à un texte variable)
- mettre le float dans une div positionner(marche pas)
- positionner les images en absolute(le texte passe evidemment par dessus)
- d'autre dont je ne me souviens même plus...

si vous avez une solution(je doute qu'elle soit du côté du float )...

merci à ceux qui auront pris la peine de lire.
bye
Modifié par e-rwan (20 May 2010 - 12:01)

Bonjour Erwan,

As-tu essayer :

#main { position : relative; }

img#gauche1{ position : absolute; left : 0; top : 0; } 
img#droite1{ position : absolute; right : 0; bottom : 0; }

Tiens nous au courant de ton avancement, a bientôt

salut wooebmaster,
merci de t'intéresser au problèmes.

en effet j'ai tester en positionnant l'image en absolute, le texte ignore l'image et passe dessus ou dessous.
voir ici

si la propriété display:float-block; existait ce serait a peu près ce que je chercherais: un bloc positionnable considéré comme un float par le reste du contenue.
Modifié par e-rwan (20 May 2010 - 11:57)

Pour entourer ton image d'un texte tu peux utiliser l'attribut align="left" (ou right ^^) sur une balise image.

Donc avec un peu de glu (pourquoi de la glu ? je sais pas ...) tu transformes ta balise img en block :

display : block;

ensuite tu la positionne avec bottom et right.

Je n'ai pas testé, c'est juste une idée, dis moi si ça à marché (j'aime bien les casse-têtes)

PS : sinon c'est normal que les deux dernières photos en bas à droite soient coupées ?
Modifié par wooebmaster (20 May 2010 - 12:39)

en effet, mettre align="right" permet à l'image d'être contournée par le texte, merci pour cette nouvelle piste que je ne connaissais pas.
cependant, pour mettre l'image en bas je n'ai pas trouvé d'autres solutions que de la positionner en absolte avec bottom:0; et ça fais sortir l'img du flux, elle est ignorée par le texte, et lattirbut align="right" n'a plus aucun effet.
toujours ici

#main{position:relative;}
#droite1{
	display:block;
	position:absolute;
	bottom:0; right:0;
	background-color:#b3c3c3;
	width:180px; height:150px;
	margin:0 0 0 10px; padding:0;
}

<div id="main">
    <img src="./design/notes.png" id="gauche1" />
    <img src="./design/resonances.png" id="droite1" align="right"/>
         <div class="texte">le texte</div>
</div>

ai-je bien appliquer ta proposition?

PS: pour les photos, ça a été fait à la vas vite pour avoir un rendu, je corrigerais plus tard. en fait les photos sont une boite en fixed, donc pas de scrollbar.
Modifié par e-rwan (20 May 2010 - 13:11)

oui, couper le texte en deux fonctionne, mais c'est foireux.
j'utilise une fonction php subrt() et compte le nombre de caractere, mais ca ne prend pas en compte les sauts de ligne et le rendu n'est pas parfait.
enfin pour l'instant c'est vers ça que je dois me tourner.
merci pour ton aide wooebmaster

un petit up desespéré.

ce genre de mise en page à déja du être utilisée, n'auriez vous pas un lein vers un site qui y serait parvenue?

j'ai du mal à me résoudre au fait que le css ne puisse pas tout faire!!