Mise en page CSS avec position relative
Bonjour j'ai des questions sur le css:
J'ai une page :
Code:
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:
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.
