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).
Bouton de retour arrière (quand "history" est correctement r-nseigné). Sevira (sert) au retour arrière d'un sous-domaine après déménagement du site
<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é
Jaune des nouveaux maillots: Pantone 109C (#FFD100)
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.
Dans cette série de 9 variantes de jaune de fond de page, cliquer dans le bouton applique la nuance sélectionnée de jaune à l'ensemble de la page;
