Pb de padding qui masque le bas d'un DIV

Auteur
Grogro	# 19 Mar 2010 - 18:33:16
10 Posts	Bonjour à tous, je dois construire un site sur deux colonnes (menu et contenu) avec entête et pied de page. La largeur doit être fluide et les menu, entête et pieds de page fixes. Mon problème est que dès que j'applique un padding-top à ma div #Contenu, je masque partiellement ce dernier. Comment éviter cela ? html { margin: 0; padding: 50px 0 20px 0; /* Hauteur de l'entete & du pied de page / } body { margin: 0; padding: 0; overflow: hidden; } #Entete { position: fixed; width: 100%; left: 0; top: 0; height: 50px; } #Conteneur { margin: 0; padding: 0; height: 100%; overflow: hidden; } #Navigation { position: fixed; float: left; margin: 10px; padding: 0; } #Contenu { margin: 0 0 0 185px; padding: 20px 100px 0 100px; height: 100%; overflow: auto; } #Pied { position: fixed; width: 100%; height: 20px; bottom: 0; text-align: center; } .Spacer { clear: both; } / Définition des Liens */ a { color: #FFF; font-size: 14px; font-weight: bold; } a:link, a:visited, a:active { text-decoration: none; } a:hover { color: #9EBACB; text-decoration: none; } .Left { float: left; } .Right { float: right; } ul.Nav { margin: 0; padding: 10; list-style-type: none; } li.Nav { color: #FFFFFF; } <html> <head> <link rel="STYLESHEET" href="style_01.css" type="text/css" /> <title>Intranet NYPL</title> </head> <body> <div id="Entete"> <img class="Left" src="images/logo_g.png" /><img class="Right" src="images/logo_d.png" /> </div><!--Entete --> <div id="Conteneur"> <div id="Navigation"> <ul class="Nav"> <li class="Nav">...</li> <li class="Nav">...</li> <li class="Nav">...</li> <li class="Nav">...</li> <li class="Nav">...</li> <li class="Nav">...</li> </ul> </div><!--Navigation--> <div id="Contenu"> Ici du contenu scrollable </div><!--Contenu--> </div><!--Conteneur--> <!--<div id="Pied">toto</div><!--Pied--> </body> </html>
10 Posts
flattazor	# 19 Mar 2010 - 19:51:07
132 Posts	bonsoir, voici un lien qui pourra t'aider. http://www.alsacreations.com/static/gabarits/ tu as différents gabarits avec explications et sources. bonne lecture à toi
132 Posts
Grogro	# 19 Mar 2010 - 20:09:41
10 Posts	Merci pour le lien mais j'ai bien sur déjà été faire un tour sur les gabarits et les tutos sur le positionnement mais sans trouver réponse à mon problème.
10 Posts
Grogro	# 31 Mar 2010 - 08:56:07
10 Posts	J'ai beau refaire mon code, je galère toujours. A vot' bon coeur m'sieurs dames
10 Posts
fvsch	# 31 Mar 2010 - 13:33:15
Administrateur 19942 Posts	Bonjour, Pour commencer: - Mieux vaut ne pas attribuer de padding ou margin à l'élément racine (html). Et je conseillerais de faire attentions aux margin et padding de body, à moins de savoir très précisément ce qu'on fait. - Il faut s'assurer que la page a bien un doctype en bonne et due forme (je n'en vois pas dans le code posté), et que le code HTML est valide. Maintenant, sur la demande elle-même: je ne suis pas sûr de la comprendre. Tu veux avoir un en-tête et un pied de page qui restent toujours visible à l'écran même quand on fait défiler le contenu? Dans ce cas, on utiliser le positionnement fixe (position:fixed). Cependant, je déconseille ce type de mise en page, qui n'a pas que des qualités... Grogro a écrit : Mon problème est que dès que j'applique un padding-top à ma div #Contenu, je masque partiellement ce dernier. «Ce dernier» fait référence à «un padding-top», ou à autre chose? C’est ça, la puissance intellectuelle. Bac + 2, les enfants.
Administrateur 19942 Posts