Mise en page CSS avec position relative

**hugo7** · 10/08/2009, 23h23

Bonjour j'ai des questions sur le css:
J'ai une page :

Code HTML :

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
 
<title></title>
<!--Déclaration de la feuille css -->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="../JeuxVideo/internetexplorer.css" />
<!--else >
<link rel="stylesheet" type="text/css" href="../JeuxVideo/mozillafirefox.css" />
<![endif]!-->
</head>
<body>
<!-- page-->
<form id="form1" runat="server">
<!-- bannière de la page -->
<div class="banniere" runat="server">
</div>
<!-- zone menu -->
<div class="zonemenu" runat="server">
</div>
<!-- zone publicité gauche -->
<div class="publicitegauche" runat="server">
</div>
<!-- zone publicité droite -->
<div class="publicitedroite" runat="server">
</div>
<!-- zone centre -->
<div class="zonecentre" runat="server">
</div>
<!-- zone pied de page -->
<div class="pieddepage" runat="server">
</div>
<!-- ZoneAmovible ; zone centre propre à chaque page dérivée de la page maître-->
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>

Et la feuille css qui va avec (je parle de celle de mozilla firefox) :

Code CSS :

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
body
{
width : 1024px;
height : auto;
margin :auto;
}
 
/*Bannière de la page*/
.banniere
{
height : 100px;
width : 1024px;
background-image:url(images/bannierejeuxvideo.jpg);
background-repeat : no-repeat;
}
/*Zone Menu*/
.zonemenu
{
background-color : #cae4ff;
height : 50px;
width : 1024px;
}
/*Zone publicité gauche*/
.publicitegauche
 
{
position :relative;
top : 5px;
height : 900px;
width : 150px;
background-image:url(images/zonepub.jpg);
background-repeat : no-repeat;
}
/*Zone publicité droite*/
.publicitedroite
 
{
position :relative;
top : -895px;
left : 874px;
height : 900px;
width : 150px;
background-image:url(images/zonepub.jpg);
background-repeat : no-repeat;
}
/*Zone Centre*/
.zonecentre
{
position :relative;
top : -1795px;
left : 152px;
height :900px;
width : 720px;
background-image:url(images/zonecentre.jpg);
background-repeat : no-repeat;
}
/*Pied de page*/
.pieddepage
{
position :relative;
top : -2040px;
height : 30px;
width : 1024px;
background-image:url(images/pieddepage.jpg);
background-repeat : no-repeat;
}

Mes divs sont bien placé mais j'ai des choses que je n'arrive pas à faire :
Je voudrais que la zone centre s'adapte en fonction de ce quelle contient et que la zone pied de page suive en conséquent.
Le problème c'est que si je met la zone centre avec : height : auto ; la zone publicité droite se décale.
J'ai un autre problème qui est que j'ai une grande zone blanche sous la page maître.
De se daite lorsque je met un contrôle ou un div dans le contentplaceholder d'une page enfant le contrôle se retrouve tous en bas de la page et plus dans la zone centre...
Comment faire?
D'avances merci pour vos réponses.
Je suis désolé si j'en demande beaucoup.

**Doki95** · 11/08/2009, 09h59

Salut,

Pourrais tu faire un zip de ton code ou donner un lien pour y accéder, il y a des images et du coup on ne peut pas vraiment voir ce que ça donne.

PS : je pense que tu as oublier les balises codes

**HiRoN** · 11/08/2009, 10h35

Bonjour,

Envoyé par Doki95

Pourrais tu faire un zip de ton code ou donner un lien pour y accéder, il y a des images et du coup on ne peut pas vraiment voir ce que ça donne.

+1... Une page en ligne serait la bienvenue pour essayer de t'aider rapidement...

**Macmillenium** · 11/08/2009, 13h55

Bonjour,

Tu utilises très mal le positionnement relatif

Dans les cours et tutoriels CSS tu as

http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/

**hugo7** · 11/08/2009, 20h17

Merci pour vos réponses voici un lien ( les photos son juste la pour tester ) :
http://debatoo.fr/JeuxVideo/accueil.aspx

Je viens de modifier mon css selon le lien que tu ma donné Macmillenium , merci.
Peut-tu me dire ce que tu en pense?

Mon dernier bug est que comment faire pour que que le pied de page descende
lorsque la zone centre descend?

D'avance merci.

**cahnory** · 11/08/2009, 21h42

Il est vide ton pied de page là non ?

**Macmillenium** · 11/08/2009, 21h47

Envoyé par hugo7

Peut-tu me dire ce que tu en pense?

Pas mal

Je te conseille de virer le conteneur .contenu, garder .zonecentre, le placer entre .publicitegauche et .publicitedroite et le flotter via float:left.
Les position:relative + left:152px; seront inutiles

Envoyé par hugo7

Mon dernier bug est que comment faire pour que que le pied de page descende
lorsque la zone centre descend?

Il suffit de réduire la hauteur des colonnes latérales et de la zone centrale.

**hugo7** · 11/08/2009, 23h19

Que veut-tu dire par la hauteur des colonnes latérales et de la zone centrale.
Je met les hauteur en : auto?

**Macmillenium** · 12/08/2009, 09h46

Envoyé par hugo7

Que veut-tu dire par la hauteur des colonnes latérales et de la zone centrale.

Je veux dire que height:900px, c'est beaucoup.

Envoyé par hugo7

Je met les hauteur en : auto?

C'est la valeur initiale, inutile de la mettre dans ton cas.

**hugo7** · 12/08/2009, 12h05

Mais si je baisse la taille sa va rien changer.
Si la zone centre se rempli et dépasse sa taille le pied de page ne va pas descendre.

**Macmillenium** · 12/08/2009, 12h33

Ne mets pas de hauteur.
Et euh ... http://debatoo.fr/JeuxVideo/images/zonecentre.jpg c'est pas bon, il faut le découper.

**hugo7** · 12/08/2009, 20h42

J'ai fait se que tu a dit et sa marche merci.
Mais j'ai un autre problème.
Je voudrais que le pied de page suive la zone centre , sa sa marche , mais si la zone centre est plus petite que la taille des menus le pied de page va atterir sur les menus.
Alors est-t'il possible que le pied de page suive la zone centre mais n'estpas le droit de descendre en dessous de 500px par exemple.
Secondement est-t'il possible que les menu s'aggrandisse aussi en fonction de la zone centre.
J'éspère que vous aurez compris et d'avances merci pour aujourd'hui.