Étape 3: Ajout d’un conteneur avec l’en-tête et le contenu
Dans ce conteneur, nous allons ajouter deux div plus ; une div de contenu et un en-tête div.
Notre fichier html ressemblera maintenant à ceci :
< html >
< tête >
test de < titre > < /title >
< link rel = "stylesheet" href="style.css" >
< / head >
< corps >
< div id = « conteneur » >
< div id = « content » class = « clearfix » >
Contenu
< / div >
< div id = « header » >
En-tête
< / div >
< / div >
< / body >
< / html >
Nous allons ajouter le code suivant dans notre fichier css :
div #container {}
Width : 800px ;
marge : 0px auto ;
fond : #FFFFFF ;
padding : 0px ;
}
div #content {}
Width : 800px ;
padding-top : 100px ;
fond : jaune ;
}
div #header {}
Width : 800px ;
height : 100px ;
fond : bleu ;
position : absolute ;
Top : 0px ;
}
.Clearfix : après {content: "."; display : block ; height: 0; clear : fois ; visibilité : caché;}
.Clearfix {display : inline-block;}
/ * Masquer IE Mac \ * /
.Clearfix {display : block;}
div #container signifie que nous avons une balise div avec id "conteneur". Nous allons ajouter quelques couleurs et une "marge : 0px auto;" pour s’assurer que notre container est centrée dans la page.
Nous devons donner le contenu un padding-top et l’en-tête valeur absolue avec un "top : 0px" pour s’assurer que l’en-tête est positionné au-dessus de l’autre contenu.
Ne me dérange pas les couleurs laides. C’est juste pour le rendre plus facile à lire les couleurs et de voir les différents divs.
Nous aurons besoin de ce code clearfix bizarre pour s’assurer que notre navigation et le contenu des divs (ajoutés à l’étape suivante) ne tombent pas hors de la div environnantes.