Les CSS pour la mise en page
1. Ouvrir l'éditeur de texte.
Si vous utilisez Notepad++, pensez à aller dans le menu "Langage / CSS" pour activer la coloration du CSS. Vous penserez à enregistrer votre fichier en .css au lieu de .html.
2. Ecrire les codes Html suivants dans le fichier positionnement.htm
Pour inclure notre CSS dans notre page HTML, rien de plus simple, il nous suffit d'insérer le code suivant entre les balises <head> et </head> :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<link rel="stylesheet" type="text/css" href="style_div.css">
<title>Positionnement CSS</title>
</head>
</html>
Définissons tout d'abord les propriétés de base de nos blocs. Dans le fichier CSS style_div.css
Ce petit bout de code définit simplement que pour tous les éléments de type div, le texte sera centré (text-align).
Vous remarquerez le signe '#' placé après 'div', et suivi d'un descriptif. Il va permettre de définir un identifiant (unique), auquel s'appliquera le style.
Ici, nous avons donc défini trois identifiants : 'bandeau', 'contenu', et 'piedpage'. Les noms sont, je pense, assez explicites pour ne pas avoir besoin d'en rajouter ;)
Pour chacun des identifiants, nous avons défini trois propriétés :
Ce qui va se transcrire dans notre fichier htm par :
Vous aurez sans doute remarqué dans l'exemple précédent que, lorsqu'on met dans notre fichier HTML des divs les uns à la suite des autres, ils s'affichent les uns sous les autres.
Pour afficher deux div l'un à coté de l'autre, il va donc nous falloir utiliser une autre propriété. C'est la propriété float qui va s'en charger.
Nous allons commencer par rajouter les propriétés du nouveau bloc de menus que nous allons créer :
Intercalons maintenant notre menu dans la page HTML entre le bandeau et le contenu :
5. Séparont verticalement le menu en deux blocs égaux
L'idée ici va donc être de créer un bloc 'conteneur', qu'on positionnera à gauche du contenu (à l'aide de la propriété float donc). Et dans ce bloc, nous allons en placer deux autres, 'menuhaut' et 'menubas', qui eux vont se positionner l'un au dessus de l'autre.
Cette fois encore, nous allons faire appel à la propriété float.
Intercalons maintenant notre menu dans la page HTML le contenu et le pied de page:
7. Les listings complets :
positionnement.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<link rel="stylesheet" type="text/css" href="style_div.css">
<title>Positionnement CSS</title>
</head>
<body>
<div id="bandeau">Ceci est le bandeau</div>
<div id="menu">
<div id="menu_haut">Menu haut</div>
<div id="menu_bas">Menu bas</div>
</div>
<div id="contenu">
<div id="blocnews">Bloc News</div>
Ceci est le contenu
</div>
<div id="pied_page">Ceci est le pied de page</div>
</body>
</html>
style_div.css
div {
text-align:center;
}
div#bandeau {
width:600px;
height:50px;
background-color:#00CCFF;
}
div#contenu {
width:600px;
height:400px;
background-color:#FFCC00;
}
div#pied_page {
clear:both;
width:600px;
height:50px;
background-color:#33FF99;
}
div#menu {
float:left;
width:100px;
height:400px;
background-color:#FF6699;
}
div#menu_haut {
width:100px;
height:200px;
background-color:#66CC33;
}
div#menu_bas {
width:100px;
height:200px;
background-color:#CC99CC;
}
div#blocnews {
float:right;
width:150px;
height:150px;
background-color:#FF3300;
}