18041 sujets

Questions générales et questions de débutants

[resolu]Css

bonsoir,
pourquoi cela me fait ca??????
http://pressagny.canin.free.fr/
[code]<!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 fluide, header/menu gauche/contenu/footer.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* CSS issu des tutoriels css.alsacreations.com */
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#header {
height: 100px;
background-color: #99CCCC;
}
#conteneur {
position: absolute;
width: 100%;
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 <a href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">(voir tous les modèles)</a>

</div>

	  <div id="gauche">
	  	<h3>Le Club</h3>
	  	
			<ul class="menugauche">
			<li><a href="page_modele.html">Historique</a></li>
                   <li><a href="page_modele.html">Le bureau</a></li>
                   <li><a href="page_modele.html">Les horaires</a></li>
				   <li><a href="page_modele.html">Plan d'accès</a></li>
			</ul>
			<h3>Agility</h3>
	  	
			<ul class="menugauche">
			<li><a href="reglement_agi_2007.html">Le réglement</a></li>
                   <li><a href="page_modele.html">Manifestations du club</a></li>
                   <li><a href="page_modele.html">Résultats du club</a></li>
				   <li><a href="equipe_agility.html">Les agilitistes</a></li>
			</ul>
	  </div>
	  
	   
	  	
			
	  
	  
	  <div id="centre">
  	  partie centrale qui &quot;pousse&quot; les colones 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</div>
</div>
	  

</body>
</html>


je sais c'est une pure copie du tutorial mais j'essaye de comprendre pourquoi le menu dépasse le cadre? je voudrais que le menu soit en place!
merci par avance pour toute votre aide!
Modifié par milene76 (10 Jun 2007 - 21:27)
#gauche {
position: absolute;
left:0;
width: 150px;
}


le menu gauche est en position absolu. la position absolu fait sortir le menu du flux ordinaire donc notre pied de page ne s'aperçoit pas de l'existence du menu. c'est le div centre qui pousse le menu car celui-ci est en static. si le centre est plus petit que le menu ça va pas.

bizarrement presque tous les modèles sont ainsi.

perso je prefere faire ce menu gauche avec les float car ça permet de mettre un clear:both au pied pour qu'il reste en dessous. ou alors je met le pied de page en position absolu aussi avec bottom:0 si je veux faire le coup du pied de page qui reste tjs en bas de l'écran. mais ce dernier cas est un peu plus complexe.
Modifié par CPascal (10 Jun 2007 - 21:24)
Sujet clos
Aller à