Discussion :

[jason69]

Bonjour à tous!

Voila, je suis en train de faire un site web qui se présente comme ceci :

Un menu général en haut.
En bas du menu, je souhaiterai faire :
- Une partie à gauche (une grande colonne) d'environ 200px
- Une partie à droite (une grande colonne aussi) d'environ 200px
- Une partie centrale

Le problème est que lorsque je veux mettre les bordures, les bordures de la partie centrale se mettent sur toute la page (la colonne de droite et de gauche se superpose). Pour mieux visualiser, j'ai mis des images en pièce jointe de ce que ça me fait (2ème P.J.) et ce que j'aimerais avoir (1ère P.J.).

Pour arriver à ce que je veux, je suis un peu obligé de "bidouiller" avec les propriétés margin.

Voici mon code :

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
24
25
26
27
.coteGauche
{
	width: 155px;
	float: left;
	color: #FFCC66;
}
 
.central
{
	border-color:#FFFFFF;
	border-width:1px;
	border-style: solid;
 
	color: #FFCC66;
	margin-left:160px;
	margin-right:210px;
}
 
.coteDroit
{
	border-color:#FFFFFF;
	border-width:1px;
	border-style: solid;
 
	float: right;
	width: 200px;
}

Est-ce que quelqu'un saurait comment je peux faire pour arriver à ce que je veux sans les propriétés margin??

De plus, en regardant bien ce que ça me donne, on peut remarquer que le côté droit n'est pas correctement aligné....

Voila, en espérant que quelqu'un pourra m'aider...

Merci d'avance.

[mind99]

Hello,

Je dirais une div container, dans laquelle tu places toutes les div.Position relative pour ma div container, et absolute pour les diverses div restantes.
En espérant que cela puisse t'aider...
Bonne journée!

[trotters213]

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
.coteGauche {  
width: 155px; 
float: left; 
color: #fc6; 
}  
 
.central { 
float:left;
border:#fff 1px solid; 
color: #fc6;
} 
 
.coteDroit {  
border:#fff 1px solid; 
float: right; 
width: 200px; 
}

Si ton problème persiste c'est que la somme de tes bordures plus tes largeur et supérieure à la largeur du conteneur.

PS : vu que tes div coteGauche, central et coteDroit sont unique, utilise plutôt des id (#) et non des classes (.)