Pour régler les dimensions d'un éléments on agit sur sa hauteur, sa largeur et sur ses marges.
width : Cette propriété règle la largeur d'un élément, en pixel, em ou pourcentage.
height : Cette propriété règle la hauteur d'un élément, en pixel, em ou pourcentage.
margin : Cette propriété règle la marge autour d'un élément, en pixel, em ou pourcentage. On peut régler la marge de manière identique, des quatre côtés, ou régler uniquement la margin-top, margin-right, margin-bottom ou margin-left. Lorsque l'on règle la margin on indique les dimensions en partant de la margin top et dans les sens des aiguilles d'une montre, ensuite, la margin right, la margin-bottom, puis la margin-left.
padding : Cette propriété règle la marge à l'intérieur d'un élément, en pixel, em ou pourcentage. On peut régler la marge de manière identique, des quatre côtés, ou régler uniquement le padding-top, padding-right, padding-bottom ou padding-left, tout comme on le fait pour la margin.
La balise <div> est utilisée pour appliquer un style à un contenu. Cette balise est comme un calque qui ne possède pas de propriétés par défaut. Par exemple je peut créer une <div> verte avec un contour, large de 200 px et haute de 50 px:
div{ background-color:#efffea;border:#1c560b 1px solid;width:200px; height:50px; }
Je peux aussi placer du texte dans une div grise de 30% de largeur et décider qu'il sera centré et qu'il y aura une marge intérieure de 5 px :
div { background-color:#e0e0e0;
border:#ccc 1px dashed;
width:30%;
text-align:center;
font-family:"Courier New", Courier, monospace;
padding:5px; }
Les éléments de votre mise en page, les div (ou les paragraphes) peut être en "blocké ou "in-line". On emploie la propriérté display avec les valeurs : block, inline, inline-block...
Les div en block se mettent en page les un sous les autres :
Les div en block se mettent en page les un à côté des autres :
Les div en block se mettent les uns à côté des autres et on peut leur donner une dimension :
Les propriétés que nous venons d'aborder vont nous servir à réaliser une mise en page HTML 5.
Pour cela nous allons tout d'abord structurer la page à l'aide de balises HTML 5 :
<header> <h1> Nom de mon site</h1> </header> <nav> </nav> <section> <aside> article sur le côté</aside> <article> <h2> titre </h2> <h3> sous titre </h3> <p>Texte blabla bla</p> </article> </section> <footer>copyright</footer>
La balise header indique le haut de page.
La balise nav précise qu'il s'agit de la navigation.
La balise section ouvre une zone de texte principale.
La balise aside précise qu'il s'agit d'une zone de texte latérale.
La balise footer ouvre le bas de page.
Ces balises sont utiles à la fois pour structurer et appliquer directement de styles, sans employer de class.
Voici un exemple en ligne qui emploie cette structure : voir l'exemple.
Voici le style qui a été appliqué à ces balises :
header {
background: url(../images/html5b.jpg) no-repeat #F60;
height:150px; width:800px;vertical-align:baseline;
}
section{
background-color:#FCC;
padding:10px;
min-height:400px;}
aside {
background-color:#FFF;
border: #CCC dotted 1px;
padding:10px;
margin:5px;
display:inline-block;
width:200px;
height:200px;
border-radius:10px;
position: relative;
box-shadow: 0px 2px 5px #1c1a19;
font-size: 0.9em;
float:right;
vertical-align:top; }
nav {
background-color:#F99;
width: 133px;
display:inline-block;
min-height:420px;
float:left;
margin-right:10px;}
footer {
background-color:#960;
height:100px;}