Tutoriel - Organisation du "Pied de page"

 Bloc bas 
 Bloc bas 

Dans mon projet de remanier mon BRIC A BRAC, en premier lieu je modifie la largeur de mes pages comme avec le DizPerso puis je réorganise mon bas de page, de manière à y regrouper les objets du bas de la colonne de gauche, évitant ainsi son allongement.



Informations Astuce pour version Silver ou Gold...
En effet dans cette procédure j'utilise les bordures, pour aménager le bas de toutes les pages. Que vous soyez sous DizPerso ou un modèle graphique, c'est possible, dans ces versions. Bien sûr je l'ai démontré et je continue dans mon blog DizTest, à prouvé que beaucoup de choses sont réalisables avec un peu plus de difficultés dans chaque article en version gratuite.


Elargissement de mes pages

Modification du fichier CSS, dans le modèle 5, la partie qui contient tous les éléments de la page, l'équivalent de la partie "Cadre" dans DizPerso, se nomme "Conteneur". J'ai modifié sa largeur et les marges, le menu de gauche est donc déporté vers la gauche et la partie "Rubriques", ou "Contenu" dans DizPerso, bien agrandie prenant toute la droite des pages.

La partie "Footer", ou "Bas" dans DizPerso, également élargie puisque se trouvant dans le Conteneur agrandi.

Tout ceci justifie la réorganisation de la partie "Footer", qui contient seulement divers liens généraux et communs à toutes les pages du blog. En plus cette partie utilise toute la largeur des pages, nous pouvons y loger très facilement des objets de toutes sortes, et bien sûr du "Javascript".



Informations Information...
Pour être plus clair dans mes explications, "footer" ou "bas", selon modèle ou DizPerso, je nommerai cette partie "Pied de page".


CSS - Régles de style du "Pied de page"

Dans le fichier CSS d'un modèle on peut modifier ou créer des règles pour paramétrer la présentation mais dans DizPerso nous sommes limités, je ne détaillerai pas ici, car dans DizTest j'ai une catégorie à ce sujet : Pied de page
Par contre si vous possédez une version Silver ou Gold, vous pouvez créer une règle de style complémentaire et l'insérer dans la bordure gauche/droite. Le paramétrage en HTML se met dans la bordure basse.



HTML - Disposition du "Pied de page"

Dans cet emplacement vous pouvez insérer divers objets trouvés sur Internet, compteur, calendrier, logos d'annuaires, bannières et autres images avec lien ou sans. Tous ces objets apparaîtront sur toutes les pages et seront à la disponibilités des visiteurs.
Pour ma part je me suis servi de DIVs et d'un tableau.
Les DIVs utilisés pour les objets disposés sur toute la largeur.
Le tableau pour les autres objets, car ce système est mieux interprêté par les navigateurs que des blocs flottants et en plus vous pouvez loger des objets de différentes tailles à l'aide de tableau inséré dans une cellule ou de cellules fusionnées. Il est évident qu'il faut un peu savoir utiliser les tableaux pour en tirer le meilleur profit. Je vous indique un lien parmi tant d'autres, pour vous documenter si vous avez besoin : [lien]
En lisant cette page, vous en s'en saurez assez pour composer votre pied de page sans problème et même certainement ça vous donnera des idées pour d'autres présentations dans vos articles.



Personnellement je gère le plus possible le tableau avec mon CSS, ainsi je peux éventuellement faire les modifications de base plus rapidement, sachant qu'il est toujours possible de mettre des modifications spécifiques dans les balises HTML.

En réalité une seule régle est utile #blocbas, si l'on rentre les paramètres dans les balises.

J'ai profité de l'occasion pour ajouté à la règle #footer, 2 règles pour les liens et une pour le formulaire de parrainage.

Code CSS du pied de page ...



Cliquez pour agrandir et voir le Pied de page en Août 2008 Le "Pied de page" changera certainement, c'est pour cette raison que j'ai inséré une vignette de la capture écran, en cliquant dessus vous pourrez la voir en taille réelle.
C'est un exemple très simple, à vous de faire une composition originale, j'ai trouvé ce système de tableau intéressant.

Code HTML du pied de page dans un fichier PDF... lien 
Egalement ci-dessous mon tableau composé de 4 colonnes sur 2 lignes.
********************************************************************************
Le HTML du bloc du pied de page... le tableau et son contenu est à
mettre dans la bordure basse, pour être visible dans toutes les pages
********************************************************************************
CODE GEOCOUNTER
www.geovisite.com
Code fourni
Fond Ecran du jour
www.toutimages.com
Code fourni

Ephéméride
www.france-pittoresque.com
Code fourni
Mon arbre sur
le site Carbon Grove
fourni
calendrier
www.toutimages.com Code fourni
PageRank
lien fourni
** vide **
XITI
Code fourni
sliceblog
www.sliceblog.com
en fourni







08/08/2008
5 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 142 autres membres