gestion des blocs en css

Marsh Posté le 28-03-2007 à 15:30:36

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>

<div class="ec">

<div class="entete">
<INCLURE{fond=entete}>
</div>

<div class="gcd">
<INCLURE{fond=corps}>
</div>
</div>
<div class="pied">ddddeee</div>
</body>

fichier entete.html :


<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 :


<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

Marsh Posté le 28-03-2007 à 15:30:36

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed

Name *

Email *

URL

Message *