28172 sujets

CSS et mise en forme, CSS3

Pb de padding qui masque le bas d'un DIV

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>
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.
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?
Sujet clos
Aller à