18067 sujets

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

[Résolu] Padding : marge intérieur -> décalage

Bonjour,

Je commence un nouveau design et je voudrai mettre un padding de 20px à mon div id="homepage" afin de créer une marge de 20 pixels tout autour des blocs rouges.

Voir ici.

J'ai bien appliqué padding:20px; mais j'ai un déformation de ma div id="homepage". L'exemple est sans padding:20px sur div id="homepage".

Quelle est la bonne méthode pour appliquer cette marge intérieure ?

* { margin:0; padding:0;}

html { height:100%; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; overflow:hidden;
}

body {
     margin:0;
     text-align:center; 
	 height:100%;
     }

#conteneur { margin-top:55px; width:960px; margin-left:auto; margin-right:auto; text-align:left; background-color:violet; 
}

#header { position:relative; width:960px; height:205px; background-color:#B5B5B5;
}
  
#navi { position:relative; width:960px; height:137px; background-color:blue;
}
#navi ul li { list-style-type:none; display:inline; background-color:#FF9FAA;
}

#homepage { width:960px; height:100%; background-color:yellow; padding-top:20px;
}

div.b-unique { width:920px; height:260px; background-color:#D41F55; 
}
div.b-tiers { width:168px; height:260px; margin-top:10px; margin-right:10px; background-color:#D41F55; display:block; float:left; 
}


#footer { width:100%; height:50px; padding-top:30px; clear:both; background-color:#7FBF00;
}


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Homepage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="icon" type="image/png" href="images/favicon.png" />
<meta http-equiv="Content-Language" content="fr"/>
<meta name="keywords" content="blabla" />
<meta name="date" content="2006-06-20" />
<meta name="author" content="Itsme" />
<!-- saved from url=(0014)about:internet -->
<script src="js.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<style type="text/css">
<!--
@import url(styles.css);
-->
</style>
</head>
<body>
<div id="conteneur">
  <div id="header">&nbsp;</div>
  	<div id="navi">
    <ul>
      <li>&nbsp;</li>
    </ul>
  	</div>
  <div id="homepage">
  	<div class="b-unique"><a href="http://w3qc.org/validateur/index.php?uri=referer">Validation</a></div>
	<div class="b-tiers">&nbsp;	</div>
	<div class="b-tiers">&nbsp;	</div>
	<div class="b-tiers">&nbsp;	</div>
  	<p>&nbsp;</p>
	</div>
  <div id="footer">&nbsp;</div>
</div>
</body>
</html>

Modifié par karnabal (24 Aug 2006 - 10:06)
Bonjour Karnabal,

le problème vient de ta dimension de boite sur le style applicable a #homepage dans le css

Enlève ton 
width:960px
, rajoute ton 
padding:20px
et tout va rentrer normalement dans l'ordre...

En passant tes 
position:relative
, du moins a ce niveau ne servent absolument a rien, de meêm que la plupart de tes dimension de largeur puisque de toute façon tu as deja défini la largeur de ton conteneur.

Il faudra aussi appliquer a ton footer un 
clear:left
pour ne pas que tes trois boites sortent de la jaune.

Enfin , ton Div est forcement un bloc, le 
display:block
est également de trop.....

Tu peux beaucoup épurer ce code...je te conseilles pour un petit rafraichissement de memoire, la lecture ( ou la relecture Smiley langue ) de la ce tuto
Merci de tes conseils. Evidemment j'ai parfois du code qui n'a rien a faire là où il se trouve parce je repars parfois sur des CSS déjà existantes, ou que les tentatives infructueuses que j'ai réalisé laissent quelques traces.

Je vais tâcher de corriger ces mauvaises habitudes, ça m'éviterait le genre de "pléonasme" div élément de type bloc.

(re)Vu la chtite doc sur éléments de types blocs et en ligne. C'est bien évidemment le B.A BA en matière de CSS.

Merci encore ! [Résolu]
Sujet clos
Aller à