Mise en page CSS avec KompoZer
Le pied-de-page
Le pied de page doit toujours se trouver tout au bas du document. Le positionnement de ce pied de page pose cependant un petit problème spécifique que nous allons résoudre maintenant.
Un petit problème, vous appelez ça?
Disons que le pied de page n'est plus franchement au bas de la page,
dès que je mets quelque chose dans le Menu...
Bien juste ! Vous avez mis le doigt sur le problème.
Le problème provient du fait que le bloc Menu est flottant. La suite du document se positionne donc en " coulant " le long de ce bloc. Y compris le pied de page.
Le bloc de menu est flottant à gauche. Le pied de page doit se dégager de ce flottement et reprendre sa place normale : sous le bloc Menu.
Ouvre l'éditeur CasCadeS.- Etablis une nouvelle règle de style pour le bloc dont l'id est pied.
- Dans l'onglet , définis un dégagement Gauche.
- Définis une couleur de fond claire, éventuellement sur l'exemple de l'illustration ci-dessous.
- Ferme l'éditeur CasCadeS.
- Enregistre le document.
- Observe le résultat dans l'onglet de KompoZer.
Pour qu'un bloc puisse se dégager d'un autre bloc
- flottant à droite, il faut lui imposer un dégagement à droite
- flottant à gauche, il faut lui imposer un dégagement à gauche
- flottant à gauche ou à droite , on peut lui imposer un dégagement des deux côtés.
Donc, le code HTML n'a pas évolué d'un pouce depuis le début. Mais alors, tout ce que nous avons fait ?
Tout ce que nous avons fait se trouve dans les directives de la feuille de style incorporée.
- Ouvre l'onglet du document en cours.
- Visualise les directives de style qui ont été imposées grâce à l'éditeur CSS.
- Essaie, tant que possible, de faire le lien entre le code CSS et les différentes actions réalisées dans l'éditeur CSS.
Ta feuille de style peut différer du texte donné ci-dessous, en fonction des couleurs choisies. Note que les directives concernant les couleurs ne sont pas indispensables pour la mise en page.
<style title="MesStyles" media="all"
type="text/css">
#entete {
border: 1px solid #33cc00;
background-color: #ffff99;
}
#menu {
float: left;
width: 150px;
background-color: #ffcc66;
}
#texte {
margin-left: 150px;
background-color: #33ccff;
}
#pied {
clear: both;
background-color: #ffccff;
}
</style>
Bon, on avait aussi parlé d'une mise en page avec le menu à droite. Ca va nous prendre encore autant de temps ?
Oh que non. Pour modifier la mise en page, il n'y a presque rien à faire...
Quand ton document est au point et enregistré, soumets-le au
professeur puis passe à la page suivante.
Dernière modification 12/05/2008
