Pied de page et prise de tête

Statut
La discussion n'est pas ouverte à d'autres réponses
Ryo

Ryo

Expert
Salut,

elle tombe bien cette nouvelle partie du forum. Je galère sur un pied de page.
J'explique en gros. J'ai une page en XHTML ayant une entête, un menu gauche (fixed), un corps de page et un pied de page. Le tout accompagné d'un fichier CSS qui va bien.

En gros je voudrais que le pied de page se place automatiquement au centre en bas de la page et bien entendu que le corps de la page si elle l'atteint vienne le repousser plus bas à chaque fois.
Le PHP est le seul moyen? Avec du CSS j'arrive à rien.. Javascript peut-être?
De toute façon le site n'aura pas la possibilité d'utiliser du PHP, faut que je trouve un autre moyen..

J'ai bien réussi à le déplacer en bas en le fixant (fixed) mais quand le corps de la page le rejoint le pied de page se place par dessus le corps.

Je précise au cas ou que ce site va être optimisé pour un affichage 1024x768.

Si vous pouvez m'aider un grand merci, je trouve rien sur le net qui me dépanne :hat-1194:
 
Salut,

il va falloir mettre ton bloc pied de page en position relative au bloc qui le précède (logiquement le corps). Normalement si tu utilises des <div> ça doit fonctionner.

poste nous tes bouts de codes pour qu'on se représente mieux ce que tu as déjà fait :sourire-4e62:

Edit: vient de lire le lien de NEO et tout est expliqué dedans :icon_wink-221e:
 
Dernière édition:
Pour commencer merci pour vos réponses

Je dois vous avouer que mon niveau en XHTML et surtout en CSS me permet pas de comprendre le lien.

voilà mon pied de page:
Code: 
&lt;div id="pied_de_page"&gt;
&lt;p>Copyright "***" 2008, tous droits réservés&lt;/p&gt;
&lt;/div&gt;
et voilà le CSS qui s'y rapporte:
Code: 
  {
padding: 5px;
text-align: center;
color: black;
background-color: #FFFFFF;
}

Là en l'état le pied se trouve au dessous du corps et descends en fonction de la taille du corps.
Ce que je veux c'est qu'il se trouve tout en bas et que quand le corps arrive à son niveau, le pied descende automatiquement.

Mais j'ai rien pigé au lien que vous m'avez linké :104:
 
Donc, ce qui ne va pas, c'est que quand le corps ne descend pas en bas, ton pied de page ne se trouve pas en bas de page mais à la suite du corps, soit vers le milieu de la page si le corps est vraiment petit. c'est bien ça ?? :dontknow-102c:
 
C'est exactement ça Harcelor :icon_wink-221e:
J'en suis encore à "l'ossature" de la page, donc c'est pas à la seconde, mais je sais que je vais finir par devoir trouver une solution..

Float ? Faut que je regarde ça :hat-1194:
 
C'est bien de l'exemple 5 ou 6 dont j'ai besoin. Par contre je sais pas, j'ai beau essayer je comprends rien au tuto.. Et je ne comprends pas aussi la différence entre l'exemple 5 et 6, pour moi ce sont les mêmes ?

Si ça peut aider, voilà ma page html:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="Accueil.css" />
	   <title>Base de donnée ***</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
 
   <body>
 
       <!-- L'en-tête -->
 
       <div id="en_tete">
           <center><h1>Base de donnée du client ***</h1></center>
       </div>
 
       <!-- Les menus -->
 
       <div id="menu">        
           <div class="element_menu">
				   <ul>
                                   <li><a href="page1.html">Lien</a></li>
                                   <li><a href="page2.html">Lien</a></li>
				   <li><a href="page2.html">Lien</a></li>
				   <li><a href="page2.html">Lien</a></li>
				   <li><a href="page2.html">Lien</a></li>
				   <li><a href="page2.html">Lien</a></li>
				   <li><a href="page2.html">Lien</a></li>
				   <li><a href="page2.html">Lien</a></li>
				   </ul>
				   </div>
           </div>
 
       <!-- Le corps -->
 
       <div id="corps">
           <p>
               <h2>Bienvenue sur la base de donnée du client ***.</h2>
               Un maximum d'informations seront stockées ici. Toute idée pour améliorer cette base de donnée est la bienvenue.
           <br><br>
		   </p>
       </div>
 
       <!-- Le pied de page -->
 
       <div id="pied_de_page">
           <p>Copyright "***" 2008, tous droits réservés</p>
       </div>
 
   </body>
</html>


Et voilà le CSS

HTML: 
body
{
   width: 980px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;    
   background-color:  #FFFFFF;
}

/* L'en-tête */

#en_tete
{
   width: auto;
   height: auto;
   background-color: #FFFFFF;
   background-image: url("images/banniere.png");
   background-repeat: no-repeat;
   margin-bottom: 40px;
}


/* Le menu */

#menu
{
   float: left;
   width: 120px;
}

.element_menu
{
   background-color: #FFFFFF;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
   position: fixed;
   left: 20px;
   top: 80px;
   border: 1px solid black;

   
   margin-bottom: 20px;
}


/* Quelques effets sur les menus */


.element_menu h3
{    
   color: black;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}

.element_menu ul
{
   list-style-image: url("images/puce.png");
   padding: 0px;
   padding-left: 20px;
   margin: 0px;
   margin-bottom: 5px;
}

.element_menu a
{
   color: black;
}

.element_menu a:hover
{
   background-color: #FFFFFF;
   color: black;
}


/* Le corps de la page */

#corps
{
   margin-left: 160px;
   margin-bottom: 20px;
   padding: 5px;
   
   color: black; /* Couleur  texte*/
   background-color: #FFFFFF;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
   border: 1px solid black;
}

#corps h1
{
   color: black;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2
{
   height: 30px;

   background-color: #FFFFFF;
   background-repeat: no-repeat;
   
   padding-left: 30px;
   color: black; /* Couleur titre */
   text-align: left;
}


/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{
   padding: 5px;

   text-align: center;

   color: black;
   background-color: #FFFFFF;
   
}

Ma page est basée sur une page faite dans un tuto destiné aux noobs dans mon genre. C'est rudimentaire pour le moment, je jouerai plus tard sur les couleurs pour la rendre plus jolie.

Tu pourrais me dire quel bout de code je dois mettre à la place de quel bout de code?

Merci pour votre aide :hat-1194:
 
Il suffit de pomper...

Si tu prends l'exemple 5,
#content, c'est #corps chez toi,
#footer, c'est #pied_de_page chez toi.
Tu n'as plus qu'à faire la translation, en n'oubliant pas le script.
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Exemple 5 : Positionner un pied de page avec JavaScript &amp; CSS</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
font: 12px/1.5 verdana, arial, helvetica, sans-serif;
}
#content {
padding: 10px;
background-color: #e673c9;
}
#footer {
position: relative;  /* Nécessaire pour Safari */
padding: 10px;
background-color: #c09;
width: 75%;
}
#footer h1 {
padding-bottom: 0;
}
h1, p {
margin: 0;
padding-bottom: 1em;
}
h1 {
font-size: 12px;
line-height: 1.5em;
}
-->
</style>
<script type="text/javascript">
<!--
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setFooter() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentHeight = document.getElementById('content').offsetHeight;
var footerElement = document.getElementById('footer');
var footerHeight  = footerElement.offsetHeight;
if (windowHeight - (contentHeight + footerHeight) >= 0) {
footerElement.style.top = (windowHeight - (contentHeight + footerHeight)) + 'px';
}
else {
footerElement.style.top = '0px';
}
}
}
}
window.onload = function() {
setFooter();
}
window.onresize = function() {
setFooter();
}
//-->
</script></head>
<body>
<div id="content">
<h1>Content</h1>
<p>Redimensionnez votre fenêtre pour observer comment votre pied de page en position uniquement relative se comporte.</p>
<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
fermentum a, accumsan et, neque.</p>
</div>
<div style="top: 604px;" id="footer">
<h1>Footer</h1>
</div>
</body></html>
Nota : j'ai capturé le code de l'exemple 5 ci-dessus par “Affichage” / “Code source”
 
Merci mais j'arrive à rien.. Dans ton code là on dirait que le css, le javascript et le html sont mélangés sur la même page.
Je suis complètement paumé.. Moi j'ai une page html et une css..

Sinon laissez tomber, je sens que je comprendrais pas.. Je vais me débrouiller à l'ancienne, à coup de "br"
 
Lut,

C'est le cas, dans l'exemple de Lap's le CSS et le Java sont défini dans le Header.
Il existe deux solutions: celle de Lap's avec tout dans la même page ou sinon une page HTML où on associe d'autre script indépendant sur d'autres feuilles (CSS et Java) dans le Header, ce que tu proposais

Pour ma part, j'ai toujours pris la deuxième solution par souci de lisibilité et fais moins d'erreur.
 
Argh...

<div style="padding:10px;background-color:white">Excuse-moi, Ryo, je n'ai fait que recopier tel quel le source fourni par pompage. Si tu veux t'y retrouver, rien de plus simple,
  1. tout d'abord, la feuille de style interne se situe dans le header, c'est-à-dire entre les balise <head> et </head>,
  2. ensuite, cette feuille de style est délimitée par les balises <style ...> et </style>, et il te suffit donc d'exporter tout le paquet vers ta feuille de style externe,
  3. enfin, le script se trouve également dans le header, délimité par les balises <script ...> et </script>, et tu peux également l'externer en transportant tout le paquet vers un fichier tonscript.js, que tu référenceras dans le header par une balise <script type="text/javascript" src="tonscript.js"></script>.
À partir de là, je pense que tu comprendras.</div>
 
Merci, j'y vois un peu plus clair :hat-1194: Mais j'y arrive toujours pas..
J'ai tout décomposé, j'ai créé un fichier js contenant le script.. Suis pas doué.

Je crois que je vais lire quelques tutos sur le javascript parce que là j'arriverai à rien.

Merci pour votre aide :hat-1194:
 
Bah...

Tu peux certes étudier le code JavaScript (avec les explications de pompage sous les yeux), mais il n'est là que pour effectuer automatiquement le calcul de certains positionnements en fonction du navigateur client et de la taille de sa fenêtre.
<br>L'essentiel reste dans la méthode, dont il faut bien avouer qu'elle n'est pas triviale : attache-toi aux attributs à affecter aux <div> dans la feuille de style.
 
J'avais pas touché au HTML depuis 6 ans, je dois dire que tu me parles chinois :hat-1194:

Ma technique est relativement simple. Je suis mauvais, je me base sur une page trouvée dans un tuto, je la modifie et je vois ce que ça donne, ça me plait pas j'annule, ça me plait je sauvegarde et ainsi de suite.

J'ai essayé d'intégrer la partie css du footer de l'exemple 5 dans mon css, la partie html du footer dans ma page html et j'ai créé un fichier tonscript.js contenant le script. J'ai rajouté la ligne qui appel le script, dans le header de ma page html, et au final ça ne fonctionne pas.

Trop hard pour moi. Merci pour votre aide mais j'y arriverai pas.. J'y ai passé ma soirée.. Et c'est pour mon taf, alors la balise "br" fera l'affaire :icon_wink-221e:

Merci pour ton aide en tout cas :hat-1194:
 
<br>

La balise <br> est une solution d'une redoutable efficacité dès lors que tu pars sur l'idée d'une “optimisation pour un format fixe, ici 1024x768”, et que d'autre part tes pages ne sont pas trop nombreuses et surtout ne changent pas trop souvent de contenu.
<br>Il n'y a pas forcément à en rougir, dans la mesure où une solution sophistiquée ne peut raisonnablement être mise en place que si elle est parfaitement comprise et documentée (il faut penser à ceux qui maintiendront le site, plus tard)... et que le jeu en vaut la chandelle (notoriété, image de marque) !
<br>Les solutions les plus simples sont souvent les plus robustes. :icon_wink-221e:
 
Là en ce moment je me prend la tête sur les couleurs de fond. Je veux faire un dégradé dans le genre de ce forum, couleurs non agressivement pour les yeux et pas trop moche.

Je pense qu'en l'optimisant en 1024x768 ça dénaturera pas trop l'affichage pour ceux qui tourne en 1280x1024. C'est pas un vrai site, ça sera posé sur un disque réseau, c'est pour bosser, pas pour être élu meilleur site du monde :icon_wink-221e:

Je réessayerai surement plus tard, si je m'en sens capable.
Tu peux fermer si tu veux et merci encore :icon_wink-221e:
 
Coucou,

juste une petite astuce, au cas où.
Si tu veux que ton site "s'adapte" à la résolution d'écran du visiteur, il suffi de mettre des % à la place des px dans dimensions et tes marges, comme ça le site placera tes menu et règlera leur tailles tout seul, en fonction de la réso du visiteur :icon_wink-221e:

pour ton dégradé, tu fais une bande dégradée sous un éditeur d'image comme gimp, photoshop... et ensuite tu met cette image en fond et tu la réplique avec du css :icon_wink-221e:

PHP: 
Code CSS :

background-repeat:


Attribut : 

repeat : se répète par défaut
repeat-x : horizontalement
repeat-y : verticalement
no-repeat : l'image ne se répète pas

voilà :icon_wink-221e:
 
Statut
La discussion n'est pas ouverte à d'autres réponses
Retour
Haut