Styles des blocs logiques
successifs, de haut en bas, (pour représenter ces blocs
logiques, on utilise des classes) des pages du site Abeille
cyclo
Nota: Cette page est représentée ici avec une têtière de 1er
niveau (alors qu'elle n'est pas de 1er niveau)
Avant tout, (1) on zappe(ra) les styles standards du
navigateur du visiteur pour éviter tout conflit imprévu
entre ces deux feuilles de styles, et (2) on se donnera un
style "Normal" pour l'ensemble des éléments html standards:
la balise <body> (qui tient lieu de style "Normal" et
qui définit une boîte contenant, au sens des CSS, tous les
autres éléments de la page) contient normalement tous les
styles essentiels, puis les balises de paragraphes
<p>, <h1> à <h7>, puis les balises de
cases de tableaux <th>, <td>, etc.
<div class=" tetiere1
">. Désigne la têtière principale (la seule utilisée
aujourd'hui) strictement réservée aux pages de 1er niveau.
Au-dessus de tous les bandeaux. Présente ici.
<div class=" tetiere2
">. Désigne la 2ème têtière principale réservée à toutes
les pages qui ne sont pas de premier niveau. On n'en a pas
encore l'usage car on ne met pas de têtière aux pages qui ne
sont pas de 1er niveau. Absente ici.
<div class=" bandeau1
">. Désigne le bandeau de boutons de navigation de
premier niveau. Présent ici.
<div class=" bandeau2
">. Désigne le bandeau de boutons de navigation de second
niveau (dont le contenu change en fonction de la sélection
du visiteur sur le bandeau de 1er niveau). Présent ici.
<div class=" bandeau3
">. Désigne le bandeau de boutons de navigation de
troisième niveau (dont le contenu change en fonction de la
sélection du visiteur sur le bandeau de 2eme niveau).
Optionnel. Présent ici (on le trouve aussi aux pages de CR
de Paris-Brest-Paris).
<div class=" bandeau4
">. Désigne le bandeau de boutons de navigation de
quatrième niveau (dont le contenu change en fonction de la
sélection du visiteur sur le bandeau de 3eme niveau).
Optionnel. Absent ici.
<div class=" navbarh1
">. Désigne la première (seul existante) barre de
navigation ("texte") placée avant les boutons de "Pages à
imprimer" et avant le corps de texte, mais après les
bandeaux de niveau 1 à 4. On l'utilise, par exemple, pour
les 3 ou 5 mois des programmes mensuels. Il s'agit donc d'un
style peu voyant. Présent ici, pour "Page précédente / Page
suivante".
<div class=" navbarh2
">. Désigne la seconde barre de navigation "texte" placée
avant le corps de texte. Elle est encore plus optionnelle
que la première et ne sert, à ce jour, nulle part. Absent
ici.
<div class=" page_a_imprimer
">. Désigne le bandeau contenant la ou les pages à
imprimer, placé après la têtière, les 4 bandeaux de
navigation principaux et les deux bandeaux "texte".
Attention: ce style, bien que ne servant pas à la navigation
donne toutefois accès à des albums de photos, à des
formulaires ou à des pages donnant sur des formulaires
(comme la page cotisations donnant sur le bulletin
d'inscription donnant sur le formulaire de bulletin
d'inscription). Présent ici.
<div class=" url
">. Désigne la partie (seulement visible à l'impression)
comportant l'URL de la page suivie d'un double trait noir.
<div class=" credit
">. désigne la partie (seulement visible à l'impression)
comportant le rédacteur de la page.
<div class=" titrage
">. Désigne la partie du corps du texte comportant un
titre.
<td class=" bouton
">. Désigne les boutons de navigation quand ils
correspondent à une page ou arborescence non actuellement
sélectionnée (sont donc forcément actifs) des bandeaux 1, 2
ou 3 (actuels). ils sont insérés dans des balises <td>
de tableaux. Utilisé ici.
<td class=" fauxbouton
">. Désigne les faux boutons de navigation qui ne
correspondent à aucune page (sont donc forcément inactifs).
ils sont insérés dans des balises <td> de tableaux.
Utilisé ici.
<td class=" inactif
">. Désigne les boutons de navigation quand ils
correspondent à une page ou arborescence sélectionnée des
bandeaux 1 ou 2. Comme leur nom l'indique, ils sont
"inactifs" sur la page où pointe le bouton en question, mais
ils sont par contre actifs partout ailleurs. Ce style est
fait en principe pour servir dans les balises <td> des
tableaux (1 ligne; # colonnes = # boutons) dans lesquels ces
2 bandeaux de navigation "normaux" sont construits. Notons
pour mémoire que, sur de nombreux sites récents, ces boutons
sont même actifs sur la page où pointe le bouton en question
et pointent alors sur eux-mêmes. Une telle convention permet
de simplifier énormément l'écriture des pages et des modèles
de pages en l'automatisant beaucoup mieux. Utilisé ici.
<td class=" minibouton
">. Désigne les boutons "Une page à imprimer". ils sont
insérés dans des balises <td> de tableaux. Ces boutons
n'ont pas de variante "Inactif" car ce ne sont pas des
boutons de navigation. Utilisé ici.
<td class=" miniinactif
">. Désigne les boutons de navigation quand ils
correspondent à une page ou arborescence sélectionnée des
bandeaux 3 ou 4. Comme leur nom l'indique, ils sont
"inactifs" sur la page où pointe le bouton en question, mais
ils sont par contre actifs partout ailleurs. Ce style est
fait en principe pour servir dans les balises <td> des
tableaux (1 ligne; # colonnes = # boutons) dans lesquels ces
2 bandeaux de navigation "mini" sont construits. Notons pour
mémoire que, sur de nombreux sites récents, ces boutons sont
même actifs sur la page où pointe le bouton en question et
pointent alors sur eux-mêmes. Une telle convention permet de
simplifier énormément l'écriture des pages et des modèles de
pages en l'automatisant beaucoup mieux. Utilisé ici.
<div class=" compte_rendu
">. Désigne les styles de corps de texte des
compte-rendus. Utilisé ici comme style de page, contient la
liste à puces "Abeilles".
<div class=" abeilles
">. Désigne le style de liste à puces "Abeilles" à
utiliser de préférence au style courant dans un bout de page
"compte_rendu".
<table class=" jean
">. Désigne le style de tableaux inventés par Jean et
utilisés dans les bouts de pages "programme" (en largeur =
100%) et "album" (en largeur = 620px), largeur 100%, à
utiliser de préférence au style courant de table du bout de
page "programme", qui survit néanmoins. Non utilisé ici.
<div class=" programme
">. Désigne les styles de corps de texte des programmes.
Non utilisé ici.
<div class=" album
">. Désigne les styles de corps de texte des albums de
photos (les pages de vignettes). Non utilisé ici.
<div class=" basdepage1
">. désigne le bas de page des pages de 1er niveau.
Présent ici.
<div class=" basdepage2
">. Désigne un second bas de page des autres pages. On
n'en a pas encore l'usage. non utilisé ici.
<div class=" navbarb1
">. Désigne le premier (seul) type de barre de navigation
placée après le corps de texte. Présent ici.
<div class=" navbarb2
">. Désigne le second (optionnel) type de barre de
navigation placée après le corps de texte. Absent ici.
<div class=" infobas
">. Désigne le lien, tout en bas, vers le mail Abeille
(et d'autres informations envisageables comme un disclaimer
ou des règles de confidentialité). Présent ici.
<div class=" marqueurs
">. Désigne la zône où se trouvent les marqueurs de
comptage et tout le reste du fourbi qui n'a pas à apparaitre
à l'impression. Présent ici.
Couleurs du site Abeille cyclo
Bandeaux 1 et 2, deux bandaux de simulation, bandeaux 1 et 2
Équivalent sur nuancier Pantone ou RAL: Non déterminé
Inspiré du jaune du maillot, il est plus clair car il sert de
fond à du texte et doit donc être plus un blanc cassé qu'un
jaune véritable. Son incarnation non-pâle est moins vive que
la variante. Attire moins les insectes.
