HTML&CSS: pied de page "fixe"

MissP 4464Messages postés 18 mai 2004Date d'inscription - Dernière réponse le 14 févr. 2012 à 15:13

Bonjour à vous tous membres éminents de CCM !

Je suis en train de faire un site Web. J'avais commencé en HTML "à la main" puis j'ai découvert les feuilles de style.

J'en avais entendu parler mais je pensais qu'elles me permettraient d'uniformiser la mise en forme de mon site mais aussi de générer une "base" fixe de page à la manière des pieds de page dans Word ( c'est à dire un pied de page ou une en-tête fixe pour toutes les pages qui, s'il devait étre modifié, ne le serait qu'une fois dans la feuille de style).

En fait, il semble que je me sois un peu plantée sur cette dernière fonctionnalité ou alors je suis encore une trop jeune padawan dans ce domaine ;-)

A titre d'exemple, imaginons ce texte qui est en bas de chaque page de CCM :

© Tous droits réservés 2004 Jean-François Pillou - Hébergé par CD-Training, la formation Multimédia et Interactive par CD-Roms (CD-Training.fr) et Internet (Net-Training.fr). Le forum est hébergé en partenariat avec l'EpiTech.

Imaginons que Jeff veuille modifier la date dans ce pied de page. Est-ce qu'il est obligé de se le taper toutes les pages ? je ne pense pas...mais comment faire ? est-ce que les feuilles de style ou l'HTML permet de faire quelque chose de similaire pour mes pages ?ou faut-il que je passe à autre chose ?

Merci d'avance de l'aide que vous voudrez bien m'apporter.
MissP

---pour que l'informatique soit toujours un plaisir---

HTML&CSS: pied de page "fixe" »

Suggestions

HTML&CSS: pied de page "fixe"
[HTML/CSS] Pied de page (Résolu) » Forum
[CSS] Placer un pied de page centré (Résolu) » Forum
Pied de page HTML-CSS » Forum
Pied de page fixe » Forum
[HTML/CSS] contenu pleine page » Forum

Plus

Réponse

HackTrack 525Messages postés 26 juillet 2002Date d'inscription 20 mai 2012Dernière intervention 24 juin 2004 à 10:57

Dans chaque page, insère un lien vers footer.js

Dans chaque page, ajoute

<body onload="addFooter();">

Dans footer.js, modifie le contenu et le style du bas de page

Exemple:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>Footer demo</title>	
	<script language="javascript" type="text/javascript" src="footer.js"></script>			
</head>

<body onload="addFooter();">
	<center>
blablabla blablablablabla blablabla blablablabla
blablabla blablablablabla blablabla blablablabla
blablabla blablablablabla blablabla blablablabla
blablabla blablablablabla blablabla blablablabla
</center>
</body>
</html>

Fichier footer.js

function addFooter(){
	footerDiv = document.createElement("div");
	footerDiv.style.backgroundColor="#8888ff";
	footerDiv.style.color="#ffffff";
	footerDiv.style.fontFamily="Arial, Comic Sans MS, Times";
	footerDiv.style.fontSize="10px";
	footerDiv.style.textAlign="center";
	footerDiv.style.padding="0 10 0 10";
	footerDiv.style.margin="0";
	footerDiv.style.borderWidth="0";
	footerDiv.style.borderstyle="none";				
	textToDisplay  = "<hr width='100%' color='#2222ff' />";
	textToDisplay += "Place ici le texte que tu veux voie apparaître en bas de page";
	textToDisplay += "<hr width='100%' color='#2222ff' />";	
	footerDiv.innerHTML= textToDisplay;
	document.body.appendChild(footerDiv);
}

;-)

Ajouter un commentaire

Afficher les 4 commentaires

vanvan - 17 mai 2008 à 02:23

Salut

Super ton astuce !
Dis, vu que t'as l'air de bien t'y connaître, moi je cherche à faire la même chose, mais avec un pied de page qui soit un réel footer, à savoir basé sur le bas de la fenêtre - et non pas à la suite du contenu de la page web. Bref que le message soit toujours en bas quel que soit la taille de la fenêtre...

Tu saurais faire ?

Merci :)

led - 13 déc. 2008 à 23:10

j'ai beau essayer de suivre tes instructions je n'y arrive pas.

J'ai environ 300 pages HTML et je veux créer un footer avec plusieurs lignes de liens. Et donc je voudrais que chaque page fasse appel à ce footer.

Comment procéder ?

J'ai créer une page footer.js mais à force de modifier sans arrêt je ne sais plus quoi y mettre.
Et sinon j'ai donc des pages html mais je ne sais plus quoi y mettre.

Je suis perdu...

a70m- 14 juin 2010 à 10:18

salut,

En HTML/CSS, tu peux le faire.

Tu fais un <div en position absolute avec un bottom:0px ...
Et après tu le personnalise à ta sauce par exemple
width:100%;
border: 2px solid black;

etc etc

Cordialement

xavier - 14 févr. 2012 à 15:13

Salut,
Merci pour ces codes, mais j'ai un petit soucis, mon pied de page reste en haut et comme son nom l'indique il devrait être en bas, pourrais tu me conseiller.
Merci
Xavier

Réponse

VieuxBonhomme 13 juin 2010 à 23:04

Pour la première question:

Plus simple convertir ton site en php.

Écrit ta note sur une feuille et sauvegarde exemple footer.php.

Sur chaque page ou tu dois insérer ton footer :

<?php  
 include("footer.php");   
?>

Chaque fois que tu fais une modification dans "footer.php" le site est mise à jour. Un site en php ne peut être lu sur ton ordinateur que si tu as Wampserver http://leconcepteur.ca/formulaire.php

question 2 :

<a href="destination.html" title="titre du lien">Texte du lien</a>

Ajouter un commentaire

sudmeteo - 14 juin 2010 à 10:09

C'est pas plutôt footer.inc ??? ... enfin c'est ce que j'utilise moi

Réponse

yooo 19 mai 2010 à 14:50

gooogleeeeeeeeee

Ajouter un commentaire

Réponse

VieuxBonhomme 14 juin 2010 à 20:59

Pour éviter toute faille de sécurité, je préfére utiliser l'extension .php afin que le fichier soit automatiquement interprété et sa source non visualisable dans le navigateur. Toute autre extension permettrait à quiconque d'avoir accès au contenu du fichier, ce qui pourrait se révéler problématique s'il contenait des données confidentielles, comme par exemple des informations de connexion à mysql.

Une bonne habitude - .php

Ajouter un commentaire

Réponse

DaNot 221Messages postés 30 septembre 2003Date d'inscription 24 octobre 2010Dernière intervention 24 juin 2004 à 10:16

Salut,

Les feuilles de styles permettent d'uniformiser les styles utilisés dans les pages HTML. Avec un peu de ruse, on peut définir des zones fixes dans des pages HTML mais pas leur contenu.
Pour cela, il faut se tourner vers des langages interprétés comme le PHP qui permet d'inclure du code HTML dans toutes les pages...

DaNot
un Libre ouvert à la source...

Ajouter un commentaire - Site web

Réponse

MissP 4464Messages postés 18 mai 2004Date d'inscription 24 juin 2004 à 10:18

Ah derme ! alors je suis condamnée à changer le texte de mes 30 pieds de page à la main...c'est balot, ça !

Merci pour ta réponse !

---pour que l'informatique soit toujours un plaisir---

Ajouter un commentaire

Réponse

DaNot 221Messages postés 30 septembre 2003Date d'inscription 24 octobre 2010Dernière intervention 24 juin 2004 à 10:35

Une solution simple et légère est de générer ton code HTML de pied de page avec un script javascript. Il suffit alors d'inclure dans chacune de tes pages le code :
<SCRIPT SRC="PiedDePage.js"></SCRIPT>

DaNot
un Libre ouvert à la source...

Ajouter un commentaire - Site web

Réponse

MissP 4464Messages postés 18 mai 2004Date d'inscription 24 juin 2004 à 10:41

ça pourrait être une solution mais, hum...il faut que j'apprenne le Javascript... ;-P est-ce que Java est-il aussi simple que HTML à apprendre sur le net ? ou je vais avoir du mal ? :-S

Et est-ce que tous les navigateurs acceptent ces scripts Java ?

---pour que l'informatique soit toujours un plaisir---

Ajouter un commentaire

Réponse

iBook 24 juin 2004 à 10:53

tu dervai faire des templates (pages modèles) si toutes tes pages utilisent la meme mise en page et tout...comme ca tu modifie le template et tout ce met a jour illico :oD

Ajouter un commentaire

Réponse

MissP 4464Messages postés 18 mai 2004Date d'inscription 24 juin 2004 à 10:56

Oui mais...comment on fait des templates ? ...ça s'écrit en HTML ? et comment ça s'appelle dans une page ?

---pour que l'informatique soit toujours un plaisir---

Ajouter un commentaire

Réponse

MissP 4464Messages postés 18 mai 2004Date d'inscription 24 juin 2004 à 11:02

Merci beaucoup, ça marche impeccable!! :-D

Est-ce que c'est accepté par tous les navigateurs ?

---pour que l'informatique soit toujours un plaisir---

Ajouter un commentaire

Réponse

HackTrack 525Messages postés 26 juillet 2002Date d'inscription 20 mai 2012Dernière intervention 24 juin 2004 à 11:14

Normalement, ça marche avec tous les navigateurs qui comprennent le DOM (Document Object Model):
Mozilla, Explorer 5+, Opera 5+, Konqueror, Safari, iCab, Ice, OmniWeb 4.5

;-)

Ajouter un commentaire

Réponse

MissP 4464Messages postés 18 mai 2004Date d'inscription 24 juin 2004 à 12:06

Ok :-)

encore quelques questions à la noix : ;-P
là, ce petit script est écrit en javascript, c'est ça ?

quand on dit que "certains ont désactivé Java", on ne parle que des applets java désactivées ou aussi des scripts javascript ?

comment fait-on pour insérer une image avec javascript ? (enfin, si t'as pas le temps de répondre, je chercherai sur CCM ;-P )

---pour que l'informatique soit toujours un plaisir---

Ajouter un commentaire

Réponse

adnane 31 mars 2008 à 19:41

c'est mieux de faire les cours au lieu de chercher comme ça

Ajouter un commentaire

Réponse

Jprog 26 avril 2009 à 16:28

C'est quoi ces réponses. La réponse à ton probleme est une div pourt le contenu et une div pour le footer plus un fichier css qui mets le style : {position : absolute; bottom 0px;} pour ta div footer et voilà c'est tout. JS... JS... et si l'utilisateur utilise NOSCRIPT... CSS peut tout faire il suffite d'astuce et de prier pour que la version 3 sois un standard bientot

Ajouter un commentaire

Réponse

Djimy 19 avril 2010 à 16:01

Salut,
Je voudrais savoir les liens en informatiques aidez moi. Comment créer le lien hyppertexte.

Ajouter un commentaire

Répondre au sujet

Posez votre question

Dossier à la une

Passage au tout numérique : quel coût pour les particuliers ?

Passage au tout numérique : quel coût pour les particuliers ?

Combien cela coûte-t-il au total ? Quelles aides apportent l'état et les acteurs du marché pour alléger cette charge non choisie ? Tous les détails sur Commentçamarche.net.

HTML&CSS: pied de page "fixe"

HTML&CSS: pied de page "fixe" »

Passage au tout numérique : quel coût pour les particuliers ?