Bonjour j'essaie de refaire la mise en page de mon site et je tombe sur un problème que j'avais déjà résolu auparavent, mais là impossible de me souvenir :s
Le contenu de ma page est centré, j'utilise des blocs avec des images de fond pour faire un cadre, le problème c'est que la partie centrale est recouvert pas le pied.
Les blocs entete, centre et pied sont en position relative, et les sous-blocs sont en absolute. Est-ce la bonne solution ?
Modifié par ToxiK (31 Mar 2007 - 16:07)
Le contenu de ma page est centré, j'utilise des blocs avec des images de fond pour faire un cadre, le problème c'est que la partie centrale est recouvert pas le pied.
<body>
<div id="conteneur">
<div id="contenu">
<div id="entete">
<div id="eg"></div><div id="ec"></div><div id="ed"></div>
</div>
<div id="centre">
<div id="cg"></div>
<div id="cc">
blablalba<br /><br /><br /><br /><br /><br /><br />
blablalba<br /><br /><br /><br /><br /><br /><br />
blablalba<br /><br /><br /><br /><br /><br /><br />
</div>
<div id="cd"></div>
</div>
<div id="pied">
<div id="pg"></div><div id="pc"></div><div id="pd"></div>
</div>
</div>
</div>
</body>Les blocs entete, centre et pied sont en position relative, et les sous-blocs sont en absolute. Est-ce la bonne solution ?
/* CONTENEUR */
#conteneur {
position: absolute;
left: 0px;
top: 0px;
margin: 0;
width: 100%;
height: 100%;
}
#contenu {
position: relative;
margin-top: 20px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
width: 1000px; /* largeur obligatoire pour être centré */
text-align: left; /* on rétablit l'alignement normal du texte */
}
/* ENTETE */
#entete {
position: relative;
width: 1000px;
height: 30px;
background-color:red;
}
#eg {
position: absolute;
left: 0px;
top: 0px;
width: 30px;
height: 30px;
background: url(images/eg.jpg) no-repeat top left;
}
#ec {
position: absolute;
left: 30px;
top: 0px;
width: 940px;
height: 30px;
background: url(images/ec.jpg) repeat-x top left;
}
#ed {
position: absolute;
left: 970px;
top: 0px;
width: 30px;
height: 30px;
background: url(images/ed.jpg) no-repeat top left;
}
/* CENTRE */
#centre {
position: relative;
width: 1000px;
background-color:blue;
}
#cg {
position: absolute;
left: 0px;
top: 0px;
width: 30px;
background: url(images/cg.jpg) repeat-y top left;
}
#cc {
position: relative;
left: 30px;
top: 0px;
margin: 20px 20px 20px 20px;
width: 940px;
}
#cd {
position: absolute;
left: 970px;
top: 0px;
width: 30px;
background: url(images/cd.jpg) repeat-y top left;
}
/* PIED */
#pied {
position: relative;
width: 1000px;
height: 30px;
background-color:green;
}
#pg {
position: absolute;
left: 0px;
top: 0px;
width: 30px;
height: 30px;
background: url(images/pg.jpg) no-repeat top left;
}
#pc {
position: absolute;
left: 30px;
top: 0px;
width: 940px;
height: 30px;
background: url(images/pc.jpg) repeat-x top left;
}
#pd {
position: absolute;
left: 970px;
top: 0px;
width: 30px;
height: 30px;
background: url(images/pd.jpg) no-repeat top left;
}Modifié par ToxiK (31 Mar 2007 - 16:07)
).
