Discussion :

[LadyWasky]

Voilà, pour l'en-tête de mon site web, j'ai un joli en-tête réalisé avec une table html (beurk) :

Code :

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

1
2
3
4
5
6
7
<table width="100%"  border="0" align="center" cellpadding="0" cellspacing="0">
	<tr>				
		<td height="80" bgcolor="#F6AED6">&nbsp;</td>
		<td width="760" height="80"><img src="./images/banniere.jpg" width="760" height="80" alt="bannière" name="banniere" id="banniere" title="bannière" border="0"></td>
		<td height="80" bgcolor="#5686EC">&nbsp;</td>
	</tr>
</table>

A gauche, j'ai une colonne rose, à droite une bleu, au milieu, une qui contient une image qui un joli dégradé du rose (#F6AED6) vers le bleu (#5686EC).
L'ensemble prend 100% de la largeur de la page et seule la colonne du milieu possède une largeur fixe.

C'est super joli, mais je me doute bien qu'avec des div ce serait mieux.

Comment faire ? je sèche.
Merci par avance.

[sevian]

Rien de bien mechant.
une recherche avec "Un design fluide avec trois «colonnes», grâce au positionnement flottant" dans ton moteur de recherche favori devrait te donner un début de réponse

j'ai pas le code sous la main, désolé.

[LadyWasky]

Merci !

[LadyWasky]

Bah en fait, ça ne donnait pas grand chose.

Par contre en faisant deux colonnes fluides de largeur 50%, et une position négative pour l'image (égale à la moitié de sa largeur)
ça marche nickel

Donc voici la solution que j'ai trouvé :

Dans mon 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
16
17
div#header{
 background-color: #FFFFFF;
 height:80px;    
 width:100%;
} 
 
div#headerleft{
   background-color: #F6AED6; /*rose*/
   float:left;
   width:50%;
   height:100%;
}
div#headerright{
   background-color: #5686EC; /* bleu */
   width:100%;
   height:100%;	
}

Ma page html :

Code :

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

1
2
3
4
5
 
<div id="header" >				
	<div id="headerleft"></div>
	<div id="headerright"><img src="./images/banniere.jpg" width="760" height="80" alt="bannière" name="banniere" id="banniere" title="bannière" border="0" style="position:relative;left:-390px;"></div>
</div>

Solution toute bête, mais belle prise de tête