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.

Mise en page CSS avec position relative

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager