Styles des blocs logiques successifs, de haut en bas,
(pour représenter ces blocs logiques, on utilise des classes)
utilisées par les pages du site Abeille
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.