Médiaforma

Mise en page avec des divisions

Print Friendly

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans la section précédente, vous avez appris à utiliser les balises <div> pour créer des blocs indépendants les uns des autres. Nous allons maintenant utiliser trois balises <div> pour créer une page Web comportant un bandeau supérieur, une zone centrale et un pied de page.

Le code HTML est très simple. Après avoir fait référence à la feuille de styles styles7.css via une balise <link>, trois balises <div> sont définies les unes à la suite des autres. Pour les différentier, nous affectons un identifiant unique à chacune d’entre elles : bandeau, contenu et pied. Pour ne pas laisser les balises <div> vides, nous y ajoutons un peu de texte.

Si vous vous demandez d’où vient le texte de la balise d’identifiant contenu, j’ai simplement fait un copier-coller depuis le site http://lipsum.com :

Passons à la feuille de styles. Vous vous en doutez, elle contient les styles relatifs aux identifiants bandeau, contenu et pied. Ici, nous nous contentons de définir la largeur, la hauteur et la couleur d’arrière-plan de chaque élément :

Les codes de couleur hexadécimaux ont été créés sur le site http://www.code-couleur.com/.

Affichons la page div2.html dans Internet Explorer. Le résultat est bien conforme à ce qui était attendu :

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply