Mise en page CSS avec KompoZer

Styler le " menu " et le " texte "

Un style flottant pour le Menu

Texte coulant sur un flottant Le bloc menu est un peu particulier dans la mesure où il utilisera une règle de style que nous n'avons pas encore utilisée dans ce cours.

À retenirUn bloc <div> peut être déclaré " flottant " sur la page. Dans ce cas, le reste du contenu de la page s'écoule le long du bloc flottant.

 Dans l'exemple ci-contre, le bloc Menu est déclaré flottant à gauche. Le texte de la page s'écoule le long du bloc en occupant la place disponible.

En utilisant toujours la même méthode :
  • Flottant à gaucheEtablis une nouvelle règle de style pour le bloc dont l'id est menu.
  • Dans cette règle, définis que :
    • le bloc menu est flottant à gauche ;
    • sa largeur est de 150px ;
    • sa couleur de fond est assez claire.
  • Vérifie que l'effet obtenu est similaire à celui de l'illustration lorsque tu ajoutes quelques lignes dans le bloc texte.
  • Enregistre le document.

Un texte qui a du style

Le bloc texte ne se présente pas encore exactement comme souhaité. Il devrait se trouver à droite du menu et non s'écouler le long de celui-ci.

Marge gaucheEn utilisant toutjours la même méthode : Etablis une nouvelle règle de style pour le bloc dont l'id est texte. Dans cette règle, définis que :
  • le bloc texte est muni d'une marge à gauche de 150px ;
  • sa couleur de fond est assez claire (par exemple, bleu-clair, comme dans l'illustration ci-dessous.)
  • Vérifie que l'effet obtenu est similiaire à celui de l'illustration ci-dessous si tu ajoutes quelques lignes dans le bloc texte.

Style pour le texte

  • Quand tu as vérifié l'effet, supprime le texte introduit et remets simplement la mention " Texte ".
  • Enregistre le document.

Je suis un peu inquiet, moi. Le code HTML a dû sérieusement se compliquer, depuis la dernière fois. On n'irait pas jeter un coup d'oeil ?

L'idée d'aller voir le code HTML est certainement bonne. Mais je crains que vous soyez déçu.

  • Clique sur l'onglet Source ;
  • Descend le curseur de texte jusqu'à la partie <body> du code HTML.
  • Compare le texte du code actuel avec le texte du code avant les mises en forme.

Avant les mises en forme

Avant

Après les mises en forme

Après

La différence n'est pas franchement flagrante. Quelque chose a changé ?

Dans le texte du code HTML, rien n'a changé, effectivement. Par contre, dans les définitions de style situées plus haut dans le code, il y a nettement plus de monde.

  • Dans l'onglet Source, vérifie le contenu des premières lignes où se trouve le code CSS
  • Enregistre le document.

Quand ton document est au point et enregistré, soumets-le au professeur puis passe à la page suivante. Page suivante


Dernière modification 16/11/2007
Ecrire