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.

Position du pied de pageUn 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.

Important

Pour remédier à cet inconvénient, une nouvelle notion doit être introduite : le dégagement des blocs.

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.

  • Dégagement à gaucheOuvre l'éditeur CasCadeS.
  • Etablis une nouvelle règle de style pour le bloc dont l'id est pied.
  • Dans l'onglet Boîte, 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 Normal de KompoZer.
Tous les blocs

Tous les dégagements

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.
Si le bloc "menu" avait été défini flottant sur la droite de la page, comment aurait-il fallu définir le dégagement du bloc "pied"?
Dégagement Gauche
Dégagement Droite
Les deux
Cela ne peut pas fonctionner avec le bloc "menu" à droite

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 Source 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 type="text/css">
#entete {
  border: 1px solid #ffcc99;
  background-color: #33ff33;
}
#menu {
  float: left;
  width: 150px;
  background-color: #ffcc66;
}
#texte {
  background-color: #33ccff;
  margin-left: 150px;
}
#pied {
  background-color: #ffccff;
  clear: left;
}
</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. Vers la page suivante Page suivante


Dernière modification 01/09/2016 Test dans /info ...