Discussion :

[Vinzius]

Hello :-)

Bon en fait j'aimerai avoir un Bloc dit "B_Centre" dont je régle la largeur et je voudrais que 2 autres blocs dit "B_Gauche" et "B_Droite" l'entoure et se partage le reste de la largeur automatiquement.

Le but est d'avoir un fond à gauche qui est différent du fond à droite et que le bloc au centre (le contenu) et bah ... il ai un fond de contenu

En html j'ai écris ca :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<div id="B_Gauche">
	Fond Gauche
</div>
 
<div id="B_Droite">
	Fond Droite
</div>
 
<div id="B_Centre">
	Contenu
</div>

Et en 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
18
19
20
21
22
23
#B_Gauche {
 
	height:419px;
	text-align:right;
	background:url(../../img/design/fond_g_h.jpg);
	float:left;
 
}
 
#B_Centre {
 
	width:700px;
	background-color:#FFFFFF;
	border:#000000 1px solid;
 
}
 
#B_Droite {
 
	float:right;
	background-color:#dddddd;
 
}

Le problème est que si je fais ca les 2 blos sur les extrémités se réduisent à leur minimum et ne prenne pas la place jusqu'au bloc du centre :-/

Il y a un moyen de faire ca en css ou de cheater ?

Merci :-)
Vincent

[Dionyzos]

Bonjour,

Peux-tu mettre en pièce jointes l'image "fond_g_h.jpg" afin que l'on puisse tester dans les mêmes conditions.

Si tu ne peux pas pas mettre l'image, donne nous ses dimensions.

[Dionyzos]

bon, alors je pense avoir la réponse :

1) inverse tes deux blocs "B_Centre" et "B_Droite" dans ton code HTML comme ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<div id="B_Gauche">
	Fond Gauche
</div>
 
<div id="B_Centre">
	Contenu
</div>
 
<div id="B_Droite">
	Fond Droite
</div>

2) Ajoute un float: left à ton B_Centre et change le float: right en left pour ton B_Droite :

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
 
#B_Gauche {
	height: 419px;
	text-align: right;
	background: url(../../img/design/fond_g_h.jpg);
	float: left;
}
#B_Centre {
	float: left;
	width: 700px;
	background-color: #ffffff;
	border: #000000 1px solid;
}
#B_Droite {
	float: left;
	background-color: #dddddd;
}