Mise en page CSS avec KompoZer
En marges de la mise en boîte
Tous les éléments nécessaires à la mise en page globale de la page sont maintenant en place. L'architecture est terminée : nous pouvons passer à la décoration d'intérieur.
En-tête de la page
L'en-tête est un élément important de la page. Elle indique immédiatement de quoi il sera question. Il s'agira donc d'un titre de première importance. Le niveau de titre 1 conviendrait parfaitement.
- Place le curseur de texte dans la zone d'en-tête.
- Dans la liste déroulante, sélectionne le niveau de Titre 1.
Hé, Mais c'est horrible ! Tout le bloc d'en-tête devient énorme pour le coup. C'est beaucoup trop grand.
Et bien oui, mais c'était prévisible. N'oublions pas que la boîte du style H1 est entourée par cette fameuse bande de cellophane.
Nous allons devoir modifier le style " natif " de h1 afin de diminuer la marge existante.
-
Dans
l'éditeur de style, définis une nouvelle règle de style pour " tous
les éléments correspondant au sélecteur " h1.
- Dans l'onglet , définis les marges haute et basse à une valeur de 0.
- Vérifie l'effet obtenu dans la page.
Le titre du texte
Chaque page de texte aura sans doute son propre titre. Afin de bien le distinguer du titre principal de la page, nous allons lui conférer le niveau Titre 2.
- Indique un titre quelconque en haut de la zone de texte, comme sur l'illustration précédente.
- Confère-lui le niveau de Titre 2.
Ca
y est, c'est reparti pour un tour. Voilà le bloc qui se décale
vers le bas. Je crois qu'il y a comme un défaut.
Et si c'était exactement le même problème qui se posait ici ? La marge...
- Dans l'éditeur de style, définis une nouvelle règle de style pour " tous les éléments correspondant au sélecteur " h2.
-
Dans
l'onglet , définis les marges haute à
une valeur de 0. Laisse la marge basse non définie (c'est-à-dire avec
sa valeur par défaut). - Vérifie l'effet obtenu dans la page : la marge supérieure a disparu.
Dans l'illustration ci-contre, on voit que l'on a profité de l'occasion pour définir une bordure basse pointillée d'une épaisseur de 2 px qui fera un soulignement pour le titre.
- Ajoute l'effet de soulignement de l'élément h2, comme indiqué ci-dessus.
Le titre du menu
Le menu peut également recevoir son titre.
- Confère le niveau de Titre 2 à la première ligne de la zone de Menu.
Il n'y a plus rien à préciser pour le style de ce titre : tout a déjà été fait plus haut.
C'est géant ! J'aime quand il n'y a rien à faire.
Quand tu as obtenu la mise en forme correcte pour les titres de
niveau 1 et 2, passe à la page suivante.
Dernière modification 03/11/2007
