▼ Table des matières
Les titres
DIV ou divisions
La balise DIV est une "division" ou "zone" de la page HTML qui contient toutes sortes de balises block ou inline; body est une DIV particulière qui contient toute la surface et le "flux" de la page HTML; body est subdivisé en diverses DIV qui peuvent être fixes ou flottantes, en position relative ou absolue... ceci est un très long et vaste sujet (lien externe) qui dépasse très largement le cadre de cette page.
Les titres, composés de 6 balises (h1, h2, h3, h4, h5, h6) sont des divisions fondamentales pour la structure de la page; ils hiérarchisent cette structure.
Un titre h1 doit ainsi introduire toute page HTML, tant pour des raisons visuelles (conformité entre la promesse d'un lien de menu et la page obtenue, par exemple), que pour améliorer le référencement du site.
Vous pouvez appliquer divers styles CSS aux balises h (des marges, des paddings, des fonds, etc...)
titre fond coloré
h3 fond coloré
<h3 style="background-color:#e3b148;">h3 fond coloré</h3>
titre fond avec image
h3 fond image
<h3 style="background: url(themes/zecyb/images/aide-small.png); background-repeat:no-repeat; background-position:right top;">h3 fond image</h3>
Vous pouvez aussi introduire une bordure:
h3 fond coloré
L'effet supplémentaire de coins arrondis est obtenu à l'aide de la règle CSS border-radius:
h3 {
background-color:#e3b148;
border: solid 0.2em #004464;
-webkit-border-radius:0.8em;
-moz-border-radius:0.8em;
border-radius:0.8em;
}
Vous pouvez laisser aller votre créativité en toute liberté en jouant avec la variable exprimée en unité em.
Les paddings dans un titre
padding-top
Le vocable anglais padding peut trouver son équivalent français en bourre dans sa signification de remplissage d'un vide tel qu'il est employé dans le cadre des métiers de la matelasserie et de la cartoucherie. La bourre est cet espace comblé au-dessus de la charge d'une cartouche.
Le padding repousse le contenu (texte, image, ancre, ou une autre DIV) des bords intérieurs d'une DIV ou de tout autre bloc. Hors la règle introduite par le padding, le contenu du bloc se collerait, par défaut, au bord de ce bloc.
Un padding-top précise donc à quelle distance du bord supérieur de la DIV en sera repoussé le contenu (ici, le texte h3 fond coloré.
h3 fond coloré
<h3 style="background-color:#e3b148; padding-top:50px">h3 fond coloré</h3>
Le padding appliqué dans l'exemple ci-dessus repousse le texte à 50px au-dessous de ce qui devrait être sont emplacement par défaut.
padding-bottom
L'effet d'un padding-bottom est inverse du précédent. L'élément, au lieu d'être repoussé du bord supérieur de la DIV vers l'intérieur, sera repoussé du bord inférieur du DIV vers l'intérieur.
h3 fond coloré
<h3 style="background-color:#e3b148; padding-bottom:50px">h3 fond coloré</h3>
Il est également possible de repousser l'élément depuis le côté gauche ou le côté droit de la DIV. Il faut alors utiliser padding-left (gauche) ou padding-right (droite).
h3 fond coloré
<h3 style="background-color:#e3b148; padding-left:50px">h3 fond coloré</h3>
h3 fond coloré
<h3 style="background-color:#e3b148; padding-right:50px">h3 fond coloré</h3>
margin
margin et padding ont 2 fonctions différentes qu'il n'est pas évident de saisir au premier abord. Il faut simplement avoir en tête que le padding agit à l'INTERIEUR de la DIV alors que le margin agit à l'EXTERIEUR de la DIV. Un margin-top repoussera une DIV placé SOUS une autre DIV, un padding-top repoussera une DIV (ou un élément à l'intérieur de cette DIV) placée DANS une autre DIV.
L'espace blanc entre le bord inférieur de ce bloc paragraphe et le bloc de titre h3 qui le suit est établi à l'aide d'un margin-top de 50px appliqué sur ce titre
margin-top=50px
<h3 style="margin-top:50px">margin-top=50px</h3>
Vous avez maintenant en main tous les éléments qui vous permettront d'agrémenter vos titres de mille manières mais vous venez aussi de faire quelques pas dans le monde de la mise en page HTML à l'aide de DIV.
Titres dans yeswiki
HTML n'est pas nécessaire à la gestion des titres dans Yeswiki. La syntaxe en est très simple : il suffit d'ajouter
- 6 fois le signe égal de chaque côté d'un texte pour obtenir un titre h1,
- 5 fois le signe égal de chaque côté d'un texte pour obtenir un titre h2
- 4 fois le signe égal de chaque côté d'un texte pour obtenir un titre h3
- 3 fois le signe égal de chaque côté d'un texte pour obtenir un titre h4
- 2 fois le signe égal de chaque côté d'un texte pour obtenir un titre h5
Vous pouvez également utiliser le bouton format en mode édition de Yeswiki.
L'utilisation d'HTML dans les titres d'une page Yeswiki a un inconvénient majeur : l'action toc qui permet de créer une table des matières interne à la page n'interprète plus les titres.
Toute intervention sur le rendu visuel devra être menée dans votre feuille de style (CSS)personnalisée (répertoire /themes/nom-de-votre-theme/styles/nom-de-votre-feuille-de-style.css
Ici, les titres h1 et h2 sont régis par un style personnalisé (code CSS ci-dessous) propre à zecyb.org..
h1,h2 {
text-align:center;
text-transform: uppercase;/*casse automatique du texte du titre en majuscules*/
margin-bottom: 2em;
text-shadow: 1px 2px 1px #73a7e7;/*ombrage du texte*/
color: green;
}
h3, h4, h5, h6 {
color: ivory;
text-align:center;
background-color:yellowgreen;
max-width:20%
-webkit-border-radius:0.8em;
-moz-border-radius:0.8em;
border-radius:0.8em;
}
h2 {
width:40%;
margin-left:auto;
margin-top:2em;
background-color:green;
-webkit-border-top-left-radius:0.8em;
-moz-border-top-left-radius:0.8em;
-webkit-border-top-right-radius:0.8em;
-moz-border-top-right-radius:0.8em;
border-top-left-radius:0.8em;/*bordure arrondie haut gauche*/
border-top-right-radius:0.8em;/*bordure arrondie haut droit*/
border: solid 0.1em ivory; /*style, épaisseur et couleur de la bordure*/
color:ivory
}
h1 {
font-size: 1.6em;
}
h2 {
font-size: 1.4em
}
h3 {
font-size: 1.2em
}
h4 {
font-size: 1.1em;
}
h5{
font-size: 1em;
}
h6 {
font-size: 0.9em;
}
