Bonjour,
Je suis actuellement en train de réaliser un site internet à l'aide de spip.
Je met en forme ma page à l'aide de css.
Voici le code css correspondant :
/* conteneur ec comprenant entete et coprs */
div.ec {
position:relative;
background-color:#d554ca;
margin-left: auto;
margin-right: auto;
height:auto;
width:800px;
}
/* conteneur 'entete' comprenant bandeau et hmenu */
div.entete {
position:relative;
background-color:gray;
margin-left: auto;
margin-right: auto;
width:800px;
}
/* conteneur bandeau mjc */
div.bandeau {
background-color:red;
padding:50px;
width:auto;
}
/* conteneur 'menu du haut' */
div.hmenu {
background-color:#F4CD78;
margin-top: 20px;
padding:15px;
}
/* conteneur gauche centre et droite */
div.gcd {
position:relative;
background-color:yellow;
top:10%;
margin-left: auto;
margin-right: auto;
padding:0px;
width:800px;
}
/* conteneur gauche et droite */
div.gd {
position:relative;
background-color:blue;
margin-left: auto;
margin-right: auto;
padding:0px;
width:800px;
}
/* conteneur 'gauche' */
div.gauche{
position:absolute;
background-color:#bbb4b4;
left:0px;
padding:0px;
width:16%;
}
/* conteneur 'droite' */
div.droite {
position:absolute;
background-color:#e16868;
top:0px;
left:0px;
margin-left:84%;
padding:0px;
width:16%;
}
/* conteneur 'centre où on affiche les informations ' */
div.centre{
position: relative;
background-color :#CD4F78;
left:16%;
margin-right:32.1%;
padding:0px;
width:67.9%;
}
/* conteneur 'pied' */
div.pied {
position:relative;
background-color:green;
top:10px;
margin-left: auto;
margin-right: auto;
width:800px;
}
Le résultat que donne la feuille de style ci-dessus est le suivant :
Code html :
fichier index.html :
<body>
<!-- entete et corps -->
<div class="ec">
<!-- entete -->
<div class="entete">
<INCLURE{fond=entete}>
</div>
<!-- corps du site -->
<div class="gcd">
<INCLURE{fond=corps}>
</div>
</div>
<div class="pied">ddddeee</div>
</body>
fichier entete.html :
<!-- fichier de gestion de l'entete du site -->
<div class="bandeau">
<a href='?page=index'>Accueil</a>
</div>
<div class="hmenu">
<center>
<a href=''>A</a>
<a href='?page=activites'>B</a>
<a href=''>C</a>
<a href=''>D</a>
<a href=''>E</a>
<a href=''>F</a>
</center>
</div>
fichier corps.html :
<!-- gestion du corps du site internet -->
<div class="gd">
<div class="gauche">
</div>
<div class="centre">
</div>
<div class="droite">
</div>
</div>
Comme vous pouvez le constater sur les images ci-dessus je ne parviens pas à faire en sorte que quelque soit la taille des bloc gauche, centre et droite le contenu des blocs restent dans le bloc "gcd" et ne se superposent pas au bloc "pied".
J'ai fais plusieurs tentatives de positionnement avec relative sur les blocs gauche et droite celà me donne le résultat escompté cepedant si je rajoute des élements dans les bloc le bloc du centre dessent au fur et à mesure des éléments rajouté dans le bloc.
J'avoue être clairement perdu, depuis hier je recommance tout de puis le début,
aussi si vous pouviez me filer un coup de main cela serais très appréciable,
je vous remercie d'avance.
Message édité par ioops le 28-03-2007 à 15:33:57
