Mise en page.

Bonsoir,

Je recherche a réaliser la mise en page suivante:



code html:

<div id="twocols" >

<div id="maincol"><img src="region/imgs/252x190_01.jpg" alt=" " name="two" width="252" height="190" id="two"/>
<div class="main_head">Blogroll</div>
</div>

<div id="rightcol">
<div class="right_head"><img src="imgs/94x90_01.gif" width="90" height="94" class="img" >texte texte texte</div>
<div class="right_head"><img src="imgs/94x90_02.gif" width="90" height="94" >texte texte texte</div>
<div class="right_head"><img src="imgs/94x90_04.jpg" width="90" height="94" >texte texte texte</div>
</div></div>

<div id="leftcol"><img src="saison/imgs/252x190_01.jpg" width="252" height="190"/>
<div class="left_head">Blogroll</div>
			
</div>

mon code css :

/* ----------col gauche-------------- */ 
#leftcol{
 width:252px; 
 float:left; 
 background-color:#FFFFFF; 
 }
 
#twocols{
 width:508px; 
 float:right; 
 position:relative; 
  }
 
/* ----------col droite-------------- */
#rightcol{
	width:256px;
	float:left;
	position:relative;
	background-color:#FFFFFF;
 }


/* ----------sub division colone-------------- */
#left_head {
padding:7px 10px 8px 15px;
line-height:13px;
color:#ffffff;
}

#main_head {
padding:7px 10px 8px 15px;
line-height:13px;
color:#ffffff;
} 
 
#right_head {
	float: left;
}

Mon soucis est le suivant quand je souhaite aligner mon texte à droite, juste à coté de mes image dans ma colone "right-head", j'ai essayé soit sur l'image ->float left ou dans ma colone..

Quelqu'un a t-il une idée?

Bonsoir,

Pourrais-tu terminer la formulation de ta question ? On ne sait toujours pas quel est ton problème… Un exemple en ligne serait plus probant, là il manque le contexte html, les images, etc…
Modifié par zzzazzz (05 Sep 2006 - 19:50)

Effectivement c'est pas tres clair, désolé

je n'arrive pas a aligner dans ma colone de droite, le texte et mes images.

- soit c'est en bas



- soit c'est le chaos !!!



je souhaiterai obtenir le resultat suivant:

Salut.

Dans le code html, ton texte doit se trouver après l'image en float (je suppose que c'est ce que tu as fait dans le 2e screenshot ?).

Pour empêcher le chevauchement, il faut se servir de la propriété clear. Elle permet d'obliger l'élément auquel on l'applique à s'afficher en dessous des éléments flottans.

Pour éviter de faire foirer le reste de ta mise en page à cause de clear, si tu utilises d'autres flottants, il faut créer un contexte de formatage adéquat ...

C'est une mise en page un peu délicate à réaliser, mais au moins c'est un bon exercice de positionnement
Modifié par Sopo (05 Sep 2006 - 22:07)