Discussion :

[fabrisss]

bonjour,

je cherche à faire la mise en page (classique) suivante avec des div+css :
- header : en haut, sur toute la largeur, position fixe en cas de scroll
- left : colonne gauche de menus, position fixe en cas de scroll
- content : centré, position absolue (réagit en cas de scroll)
- right : colonne droite de menus, position fixe en cas de scroll

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
28
29
 
.left
{
  position: fixed;
  top: 3em;
  left: 2%;
  border: 1px solid #000000;
  padding: 1em;
  width: 18%;
  z-index: 2;
}
.content {
  z-index: 1;
background-color: #f5f8fc;
border: 3px solid #000000;
margin: 0 2em;
width:70%;
 
}
.right
{
  position: fixed;
  top: 3em;
  right: 2%;
  border: 1px solid #000000;
  padding: 1em;
  width: 18%;
  z-index: 2;
}

je ne parviens pas à centrer le "content" entre mes 2 colonnes "left" et "right"...comment faire pour avoir une mise en page correcte qqsoit la résolution de l'écran ?

merci pour votre aide bien utile,

Fabrice

[francis m]

je ne sais pas si c'est la raison, mais 2+18+70+18+2 dépasse 100

[fabrisss]

merci pour ta proposition; j'ai remplacé le 70% par 60% mais cela ne change rien

le problème est que la boite "content" est située trop à gauche et donc "chevauche" la boite "left"

j'ai ajouté "left: 20%;" comme propriété de la boite "content" mais cela ne change rien non plus :-(

Code :

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

1
2
3
4
5
6
7
8
9
 
.content {
  z-index: 1;
background-color: #f5f8fc;
border: 3px solid #000000;
margin: 0 2em;
width:60%;
left: 20%;
}

[fabrisss]

la solution consiste à définir les marges droite et gauche de manière automatique :

Code :

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

1
2
3
4
5
6
7
 
div.content
{
width:60%;
margin-left:auto;
margin-right:auto;
}

[francis m]

pense à la balise <résolu> svp