Page 1 sur 2
Pied de page
Posté : 28 mars 2006, 11:50
par Darkbibou
Bonjour tout le monde,
J'aimerai faire un pied de page pour mon site et que celui ci se place toujours en bas de l'ecran (même quand le contenu de la page est plus petit que la fenêtre) sans pour autant venir se placer au dessus du contenu de ma page si la fenetre est redimmensionnée.
Je ne sais pas en quel langage (CSS, javascript ??) il faut utiliser.
Je prend toutes les idées alors n'hésitez pas
Merci d'avance.
Posté : 28 mars 2006, 11:51
par albat
Pas besoin de Javascript, le CSS suffit.
Posté : 28 mars 2006, 11:57
par Darkbibou
Pourrait tu m'indiquer des exemples permettant de réaliser ce que j'aimerai faire ?
Posté : 28 mars 2006, 12:23
par albat
Alors, de tête...
tu devrais déjà pouvoir commencer avec un truc comme ça:
#pied {clear:both ; position:fixed; bottom-margin:0px ; }
mais ça ne doit pas suffire...
Posté : 28 mars 2006, 16:54
par Hermès
bottom:0px;
et pas bottom-margin (ou margin-bottom).
Note (edit 1):
clear:both;
position:fixed;
bottom:0px;
fait que le pied de page est toujours collé en bas de l'écran (et pas en bas de la page).
Autrement dit on voit en permanence le pied de page qui se "déplace" sur la page.
Note (edit 2) :
avec "position:relative;" le pied de page se trouve en bas de la page (et pas de l'écran) cette fois-ci.
Avec "position:absolute;", si la page est trop grande, le pied de page se retrouve au milieu en "suspend".
Posté : 28 mars 2006, 16:56
par albat
Me suis un peu couché tard hier soir...
Posté : 28 mars 2006, 17:18
par Hermès
Je viens de faire quelques tests (j'ai toujours galéré pour mettre en place un pied de page) :
Code : Tout sélectionner
html body {
margin:0;
padding:0;
height:100%;
}
div#content {
height:auto;
display:block;
min-height:100%;
}
div#footer {
clear:both;
position:relative;
bottom:20px;
}
Il faut que le fichier soit formé de la façon suivante :
Code : Tout sélectionner
<html>
<body>
<div id='content'>
Le contenu de ma page
</div>
<div id='footer'>
Mon pied de page
</div>
</body>
</html>
La valeur a mettre dans "bottom" dépend de la hauteur du pied de page (ici 20 pixels). Si on met "bottom:0px", ça pose un problème pour les pages ayant une hauteur plus petite que l'écran (la page fait alors la taille de l'écran + la hauteur du footer, ce qui affiche l'ascenseur de défilement, pas terrible quoi).
J'ai essayé de faire passer le style de div#content dans body ou html mais ça n'a pas marché. Si quelqu'un a une solution sans passer par ce div, je suis preneur...
Posté : 29 mars 2006, 08:37
par Darkbibou
Merci je vais essayer tout ca
Posté : 29 mars 2006, 09:31
par Darkbibou
J'ai fait des test et cela ne fonctionne pas: mon pied de page se retrouve au milieu de l'ecran, supperposé a mon texte. Le problème vient peut être de mon code, le voici:
<?php
// Ouverture de la session utilisateur:
session_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Haut de page -->
<head>
<!-- METATAGs -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="./CSS/stylesheet_menu.css" />
<!-- Titre -->
<title>TriAnnot_Consultation</title>
</head>
<!-- Fin Haut de page -->
<!-- Corps de page -->
<body>
<div id='content'>
<!------------------------------------>
<!-- Premier "Bloc": Entête et Menu -->
<!------------------------------------>
<?
include('entete.html'); // Nous appelons l'entete du site
?>
<!-- Fin du premier Bloc -->
<!------------------------------------------>
<!-- Deuxième "Bloc": Affichage Dynamique -->
<!------------------------------------------>
<table border="0" height="100%" style="margin-left: auto; margin-right: auto; position:inherit">
<tr>
<td width="85%" style="text-align:center">
<?php
/*********************************************************************************/
/* Le bloc de code php ci-dessous est utilisé ici afin de sécuriser le site web: */
/* Seul un nombre limité de page peut ainsi être affiché. */
/* Une URL incorrecte renvoit à l'acceuil du site */
/*********************************************************************************/
// Liste des pages autorisées
$pageOK = array('nb_critere' => 'nb_critere.php',
'criteria' => 'selection_critere.php',
'col_tri_1' => 'traitement1.php',
'col_tri_2' => 'traitement2.php',
'col_tri_3' => 'traitement3.php',
'res_tri' => 'resultat_triannot.php',
'res_gene' => 'resultat_genefarm.php',
'acceuil' => 'default.html',
'tutorial' => 'tutorial.html',
'logout' => 'logout.php');
// La page appartient t'elle à la liste des pages autorisées ??
if ( (isset($_GET['page'])) && (isset($pageOK[$_GET['page']])) ) {
include($pageOK[$_GET['page']]); // Pages principales
}else{
include('default.html'); // Page par défaut ( Se charge à la place d'une page non autorisées )
}
?>
</td>
</tr>
</table>
<!-- Fin du deuxième Bloc -->
</div>
<div id='footer'>test Pied de page</div>
</body>
<!-- Corps de page -->
</html>
Et la partie de css pouvant intervenir sur ce code est celle donné par Hermès:
Code : Tout sélectionner
html body {
margin:0;
padding:0;
height:100%;
}
div#content {
height:auto;
display:block;
min-height:100%;
}
div#footer {
clear:both;
position:relative;
bottom:0px;
}
Voyez vous le problème ?
Posté : 29 mars 2006, 09:42
par Hermès
Après quelques essais, ça fonctionne en supprimant ta ligne
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Posté : 29 mars 2006, 09:48
par Darkbibou
Quel doctype dois je utiliser alors ?
Je vais tester si avec les pages includes ca marche en enlevant le doctype
Posté : 29 mars 2006, 09:57
par Hermès
Aucune idée, je peux pas dire que je maitrise les notions de doctype...
Posté : 29 mars 2006, 10:01
par Darkbibou
Apres un test rapide (pas trop long de mettre une ligne en commentaire
) je remarque que j'ai bien le pied de page placé correctement mais tout le reste de mon interface ce met a ne plus fonctionner correctement:
Mon corps de page se retrouve placé loin vers le bas avec un grand blanc avant lui et avant le pied de page. Mon menu horizontal en css n'affiche plus ses sous menu, etc...
Je vais doner ici le code de la page d'acceuil qui est est include dans le corps de page apres l'entete comme exemple:
<table border="1" width="100%" style="margin-left: auto; margin-right: auto;">
<tr><td colspan="100%"><font class="titre_page">Welcome on TriAnnot Consultation Tools</font></td></tr>
<tr>
<td style="height: 40pt" colspan="100%"></td>
</tr>
<tr>
<td width="13%"> </td>
<td width="74%" style="font-size:16px; "><b>This easy and friendly interface, based on a multi criteria research tools (species, chromosomes, BAC ID, Genes), allows rapid links to the TriAnnot GBrowse viewer and/or the GeneFarm database, as well as NCBI-GenBank, EBI-EMBL and SwissProt.</b></td>
<td width="13%"> </td>
</tr>
<tr>
<td style="height: 30pt" colspan="100%"></td>
</tr>
<tr>
<td width="13%"> </td>
<td width="74%" style="font-size:16px; "><b>For example you may have a rapid access to a list of genes belonging to a specific species/chromosome/BAC; or all the BAC containing a gene family, or all the BAC available on a specific chromosome species; and so one. The research process is intuitive and user-friendly.</b></td>
<td width="13%"> </td>
</tr>
<tr>
<td style="height: 30pt" colspan="100%"></td>
</tr>
<tr>
<td width="13%"> </td>
<td width="74%" style="font-size:16px; "><b>Click <a href="?page=tutorial">here</a> to access to the tutorial and FAQ</b></td>
<td width="13%"> </td>
</tr>
</table>
Le problème peut'il venir du fait que j'insere une table dans une autre ?
Posté : 29 mars 2006, 10:10
par Cyrano
Le DOCTYPE indique selon quel standard sont codées les lignes de la page. Selon qu'on utilise une version transitional ou Strict, certaines balises ou certains attributs dans certaines balises seront autorisés, tolérés ou carrément interdits.
Le DOCTYPE fait appel à une DTD (Document Type Definition) qui est intégrée dans le navigateur, si elle ne l'est pas, elle est chargée à l'adresse indiquée dans la balise DOCTYPE.
En enlevant la ligne DOCTYPE, tu auras alors une interprétation selon le standard HTML4 la plus laxiste qui soit.
Ton problème de positionnement relatif : pose toi la question : relatif par rapport à quoi ? Réponse : par rapport à l'élément précédent. Dans ton cas, l'élément précédent du bloc #footer, c'est non pas body mais #content.
Essaye donc de le mettre en position absolute et dans ce cas, le positionnement se fera par rapport à la fenêtre et ton pied de page sera bien collé à 20px du bord inférieur de la fenêtre. Proposition en XHTML 1.0 Strict :
Code : Tout sélectionner
<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title>Positionnement d'un pied de page</title>
<meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" />
<style type="text/css">
/* <![CDATA[ */
html body {
margin:0;
padding:0;
height:100%;
}
div#content {
height:auto;
display:block;
min-height:100%;
}
div#footer {
clear:both;
position: absolute;
bottom:20px;
}
/* ]]> */
</style>
</head>
<body>
<div id="content">
Le contenu de ma page
</div>
<div id="footer">
Mon pied de page
</div>
</body>
</html>
Note importante : en XHTML, les valeurs d'attributs doivent être entre guillemets et non entre apostrophes.
Posté : 29 mars 2006, 10:28
par Darkbibou
Quand j'essaye de tester en remplacant le haut de ma page par ton code easy php me sort une erreur sur la ligne :
<?php
// Ouverture de la session utilisateur:
session_start();
?>
<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title>TriAnnot_Consultation</title>
<meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" />
<style type="text/css">
/* <![CDATA[ */
html body {
margin:0;
padding:0;
height:100%;
}
div#content {
height:auto;
display:block;
min-height:100%;
}
div#footer {
clear:both;
position: absolute;
bottom:20px;
}
/* ]]> */
</style>
</head>
A quoi est ce du ? a quoi sert cette ligne et celle de <![CDATA[ ? Pourquoi mettre deux balise meta http equiv ?
Merci d'avance