mise en page

**Eskevar** · 20/12/2008, 20h10

Bonjour,
voila j'ai un petit souci avec la mise en page. Ma page est constituée d'une division "haut" de hauteur fixe, d'une division "gauche" de largeur fixe, d'une division "droite" de largeur fixe aussi, et d'une division "milieu", (située entre la gauche et la droite

). Je voudrais que cette dernière occupe toute la largeur entre mes deux divisions précédentes (sans empiéter). Comment est ce que je peux faire ? Sachant que je ne peux pas lui fixer une largeur en pourcentage, vue que les deux autres divisions ont une largeur fixe (en pixels).

Ma page est: http://eskevar.webou.net/test.html
Voici mon code css et html:

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 <head>
  <title> mise en page </title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <style type="text/css">
#haut
{
position: absolute;
margin-top: 20px;
margin-left: 5%;
margin-right: 5%;
background-color: black;
height: 80px;
width: 90%;
}
#ensemble
{
position: absolute;
width: 90%;
height: 75%;
margin-top: 120px;
margin-bottom: 20px;
margin-left: 5%;
margin-right: 5%;
}
#gauche
{
background-color: orange;
position: absolute;
width: 150px;
height: 100%;
}
#milieu
{
background-color: yellow;
position: relative;
float: left;
height: 100%;
margin-left: 150px;
}
#droite
{
background-color: blue;
float: right;
width: 318px;
height: 100%;
}
  </style>
 </head>
 <body>
  <div id="haut">
   Haut
  </div>
  <div id="ensemble">
   <div id="gauche">
    Gauche
   </div>
   <div id="milieu">
    Milieu
   </div>
   <div id="droite">
    Droite
   </div>
  </div>
 </body>
</html>

Merci. Et je m'excuse d'avance si je n'ai pas pris la section appropriée du forum.

**devyan** · 20/12/2008, 20h29

Salut,

FAUX !

Tu peux tout à fait lui indiquer une largeur en % (100 par exemple) et lui adjoindre des marges (margin-left et margin-right) en pixels correspondant aux dimensions des 2 autres éléments de largeur fixe

**Eskevar** · 20/12/2008, 21h02

En effet, sauf que si je fais ça, soit ma page dépasse une largeur de 100%, soit mon ensemble n'est plus centré...
Ce que je voudrais c'est pouvoir fixer la largeur de #milieu en fonction de la largeur qu'il y'a entre les deux divisions.

**Macmillenium** · 20/12/2008, 22h18

Bonsoir,

Vu que ton "gauche" est déjà positionné, tu n'a pas besoin de floatter ton "milieu", la marge gauche que tu as spécifié suffit.
Pour ton problème de dépassement, ce comportement est tout a fait normalement vu que ton "milieu" aura comme largeur par défaut 100% de son conteneur "ensemble". Il faudrait donc ajouter une marge droite égale a la largeur de ton "droite".

Code :

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

1
2
3
4
5
6
7
8
9
 
#milieu
{
background-color: yellow;
position: relative;
height: 100%;
margin-left: 150px;
margin-right: 318px;
}

**Eskevar** · 21/12/2008, 09h58

Je pense qu'on n' est pas loin du but, le problème c'est que quand je retire le float: left; de la division milieu, la division droite ne se positionne plus à droite de milieu, dans la division ensemble. En fait je crois que la division "droite" est affectée par la marge gauche de "milieu" donc elle se place à 318px de cette dernière, et vu que la division ensemble est trop petite, la division droite se positionne en dehors. Y'a t-il une solution à ça ?
Voila ce que ça donne : http://eskevar.webou.net/index.html
Merci pour ces pistes.

**Macmillenium** · 21/12/2008, 10h59

Bonjour,

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
 
#gauche
{
background-color: orange;
position: absolute;
width: 150px;
height: 100%;
left:0;
}
#milieu
{
background-color: yellow;
position: relative;
height: 100%;
margin-left: 150px;
margin-right:318px;
}
#droite
{
background-color: blue;
position:absolute;
width: 318px;
height: 100%;
right:0;
top:0;
}

gauche positionné en absolute et un left:0; pour gauche sinon sa ne marchera pas sous IE6.

mise en page

CSS

Vue hybride

Discussions similaires

Partager

Partager