28173 sujets

CSS et mise en forme, CSS3

Voila le souci :

http://ahulane.com/err.JPG

Le menu a gauche sort de son contenu. Et j'aimerais que non, que le footer remplisse bien son role de footer.

J'ai essayé avec des clear: both un peu partout, rien n'y fait, j'ai essayer de specifié des tailles communes au bloc du menu, et au bloc "centre", mais idem, rien n'y fait.

Voici le code :


body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
background-color: #D7D7D7;
}
#header {
height: 200px;
background-image:  url("ressources/images/banniere.jpg");
background-repeat: no-repeat;
border-bottom: 1px solid black;
}
#conteneur {
position: absolute;
width: 800px;
left: 50%;
margin-left: -400px;
background-color: #CAD5FC;
border: 1px solid black;
}
#centre {
background-color: #CAD5FC;
margin-left: 163px;
}

#gauche {
position: absolute;
left: 0;
width: 163px;
top: 165px;
}

#pied {
border-top: 1px solid black;
height: 30px;
background-color: #FFFFFF;
}



et la partie HTML :


<div id="conteneur">

	  <div id="header"></div>

	  <div id="gauche"></div>

	  <div id="centre"></div>

	  <div id="pied">pied de page de largeur fixe : 750px </div>
</div>



Tout le probleme vient du fait qu'apparement les Modèles basés sur le positionnement absolu sont Inadaptés pour des colonnes de hauteurs égales.

Pour cela il faudrait un positionnement flottant, mais pour faire remonter mon menu, je suis obligé de passer en absolue, car en flottant, ca ne remonte pas, mais par contre, oui là le footer est niquel.

Enfin, hauteur egale, c'est pas ca le but, mais au moins que le menu ne deborde plus en bas, qu'il reste a sa "place"

Smiley sweatdrop

Please ... help ... Smiley biggrin


Je vous demande ca comme ca, car si la solution est trop "complexe" , pas la peine, il me suffira juste de remplir au minimum la page centrale de la hauteur du menu, et le probleme n'apparaitra plus.

En gros, je vous demande juste si il y une astuce simple pour contrer ce desagrément, sinon, c pas grave.
Modifié par Ahulane (10 May 2006 - 14:13)
La solution passe par un bloc dans lequel tu inseres menu , conteneur, footer avec la couleur d'arrier plan de #conteneur.
C'est un artifice mais au moins visuellement le menu n'a pas l'impression de sortir de la page