28172 sujets

CSS et mise en forme, CSS3

Pied de page qui ne suit pas les deux colonnes du dessus

Bonjour à tous,
je voulais adapté un gabarit à mon site web. Il est composé de :
- Une entête.
- Une partie gauche pour les menus.
- Une partie droite pour le contenu.
- Un pied de page.

J'utilise ce code (qui se trouvait dans les anciens gabarit des tuto AC) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head><title>Largeur fixe 750, header/menu gauche/contenu/footer.</title>



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#header {
height: 100px;
background-color: #99CCCC;
}
#conteneur {
position: relative;
width: 750px;
margin: 0 auto; 
background-color:#CCCCFF;
}
#centre {
background-color:#9999CC;
margin-left: 150px;
}
#gauche {
position: absolute;
left:0;
width: 150px;
}
#pied {
height: 30px;
background-color: #99CC99;
}

.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
.menugauche li {
margin-bottom: 5px;
}
.menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menugauche a:hover {
text-decoration: none;
}
p {margin: 0 0 10px 0;}
</style></head><body>

<div id="conteneur">

	  <div id="header">header de largeur fixe : 750px <a href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">(voir tous les modèles)</a>

</div>

	  <div id="gauche"><p>menu</p>
	  <p>largeur fixe : 150px</p>
	  	
		<ul class="menugauche">
		<li><a href="">Menu 1</a></li>
		<li><a href="">Menu 2</a></li>
		<li><a href="">Menu 3</a></li>

		<li><a href="">Menu 4</a></li>
		</ul>
		
	  </div>
	  
	  <div id="centre">
  	  partie centrale qui "pousse" les colonnes vers le bas.<br>
  	  partie avec du contenu occupant le reste de la largeur<br>

  	  partie avec du contenu occupant le reste de la largeur<br>
  	  partie avec du contenu occupant le reste de la largeur<br>
  	  partie avec du contenu occupant le reste de la largeur<br>
  	  partie avec du contenu occupant le reste de la largeur<br>
  	  partie avec du contenu occupant le reste de la largeur<br>
  	  partie avec du contenu occupant le reste de la largeur<br>

  	  partie avec du contenu occupant le reste de la largeur<br>
  	  partie avec du contenu occupant le reste de la largeur<br>
  	  partie avec du contenu occupant le reste de la largeur<br>
  	  partie avec du contenu occupant le reste de la largeur<br>
  	  partie avec du contenu occupant le reste de la largeur<br>
  	</div>

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


</body></html>


Le problème c'est que la partie "pied" ne suit que la partie "centre" (droite de la page).
Autrement dit, si, verticalement, le contenu du menu est supérieur à celui de "center", il va déborder et le pied de page ne suivra plus. Par contre, si c'est le "centre" qui est supérieur, là il n'y aucun problème.

Comment faire pour que le pied de page suit la partie la plus longue verticalement entre "gauche" et "centre" ?

Merci pour votre aide Smiley smile
Bonjour,

Le problème vient du positionnement absolu.

Le positionnement absolu fait sortir l'élément du flux normal de la page, l'élément n'est donc plus là pour le reste du code.

Pour faire ce que tu souhaite, je te conseille de revoir la construction de ta page, surtout si le positionnement absolu n'est pas nécessaire.

Je te conseille de jeter un oeil aux gabarits de Florent dont certains devraient correspondre à ce que tu souhaite obtenir.
J'ai trouvé la solution en supprimant la position absolute de la partie gauche et en ajoutant un clear:both au pied de la page.

Merci pour la réponse Laurie-Anne Smiley smile
Sujet clos
Aller à