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 | 3454 vues

Partager


Commentaires


Chrisithaque
site/blog
le 06-12-2010 à 16:10:07
bonjour papyclic !
Je voudrais bien faire un pied de page afin d'y insérer des liens et des vignettes mais Je ne sais pas faire marcher tes codes. Je ne comprends strictement rien. Idem pour la création d'un secon menu. J'ai bien réussi à faire une seconde colonne à droite, mais dès que j'ajoute une image à celle déjà en place, elle va directement sur la colonne de gauche. et je n'ai pas compris comment mettre par exemple le menu partenaires (ou photo) à droite et garder le menu article à gauche. D'après ce que les autres internautes disent, il semble que ça à l'air facile, en fait, je suis la seule à ne pas réussir à faire ces changements. J'ai vraiment des moments de découragements. Merci en tout cas pour tes efforts et tes tutoriels qui doivent faire bien des heureux. A bientôt.
PapyClic
site/blog
06-12-2010 à 16:26:40
Bonjour Chrisi
Je viens juste de t'envoyer un mail en réponse à celui d'hier. Je suis très occupé en ce moment, je crois qu'il faut que tu étudies bien mes tutos, je n'ai même pas le temps d'améliorer mes blogs.
Ou patiente en attendant que je sois plus disponible.
Bonne continuation avec courage.
Chrisithaque
site/blog
le 07-12-2010 à 00:29:51
Bonsoir, pas de problème Papyclic, tu trouves déjà le temps de répondre et c'est gentil, je verrai après les fêtes. Trouve le temps de te reposer un peu quand même ! a la rentrée, on aura tous besoin de toi...@+
patcrea
site/blog
le 08-05-2012 à 10:25:12
Bonjour Papyclic,
Pour te signaler un petit problème sur le lien copié ci-dessous, il est cliquable après plusieurs essais et saute:

'Je vous indique un lien parmi tant d'autres, pour vous documenter si vous avez besoin : [lien]' (c'est vers le bas de ton article)

Merci pour ton travail considérable,
Cordialement,
Patricia
PapyClic
le 08-05-2012 à 11:43:52
Bonjour Patricia
Ce lien pour moi fonctionne très bien dans mon article c'est vers le site developpez.com sur une page spéciale sur les tableaux.
Dans les commentaires les liens ne fonctionnent pas.
Merci quand même.
Cordialement
Poster un commentaire
Merci de recopier le nombre de gauche dans la case ci-dessous (Pourquoi?)

Liens

Voir les articles de la catégorie " Blog4ever "
Imprimer cet article