Pied de page

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Pied de page

par Darkbibou » 29 mars 2006, 11:56

Bon je suis entrain de faire quelque test avec les remarques que vous avez faites :)

par Hermès » 29 mars 2006, 11:18

Oui mais je m'emmêle souvent les pinceaux avec les em (peut-être une mauvaise connaissance du fonctionnement).

De plus, si le contenu est dynamique (enfin normalement un footer a pas un contenu dynamique mais bon...)

par Cyrano » 29 mars 2006, 11:16

Rien à ma connaissance n'interdit de mettre les dimensions d'un bloc en em au lieu dedimensionner en px : c'est valable pour le positionnement.

par Hermès » 29 mars 2006, 11:12

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.
C'est vrai que c'est bien plus logique (halte à la multiplication des div !).
Par contre, est-il systématiquement nécessaire de préciser bottom:20px; ?
N'est-il pas possible d'avoir un footer collé au bas de la page sans avoir à préciser sa hauteur ? Autrement dit, on prendrait en compte non pas le bord du haut du pied de page mais justement le bord du bas.

En fait, je note toutes mes polices en em, pour permettre à l'utilisateur d'augmenter la police et je galère à chaque fois que je veux faire des décalages en em (bottom:1em).

Bref, j'aimerais coller mon pied de page sans préciser sa hauteur et sans qu'il me mette une barre de défilement dans le cas d'une page dont le contenu est plus petit que l'écran. Est-ce possible ?
Note importante : en XHTML, les valeurs d'attributs doivent être entre guillemets et non entre apostrophes.
Argh, depuis que j'ai lu une page de tests d'optimisation signalant que les simple quote étaient bien plus rapides que les double (en php bien sur, pas en html (quoique ?)), j'ai tendance à prendre l'habitude d'utiliser surtout des simple quote (d'ailleurs j'ai l'impression que ModeliXe apprécie pas trop).

par Cyrano » 29 mars 2006, 10:30

Avec PHP, tu devras mettre cette ligne d'une autre manière:
<?php
echo("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n");
?>
Sinon, il y a conflit à cause du "<?"

par Darkbibou » 29 mars 2006, 10:28

Quand j'essaye de tester en remplacant le haut de ma page par ton code easy php me sort une erreur sur la ligne :

Code : Tout sélectionner

<?xml version="1.0" encoding="iso-8859-1" ?>
<?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

par Cyrano » 29 mars 2006, 10:10

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.

par Darkbibou » 29 mars 2006, 10:01

Apres un test rapide (pas trop long de mettre une ligne en commentaire :P) 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%">&nbsp;</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%">&nbsp;</td>
	</tr>
	
	<tr>
		<td style="height: 30pt" colspan="100%"></td>
	</tr>
	
	<tr>
		<td width="13%">&nbsp;</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%">&nbsp;</td>
	</tr>
	
	<tr>
		<td style="height: 30pt" colspan="100%"></td>
	</tr>
	
	<tr>
		<td width="13%">&nbsp;</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%">&nbsp;</td>
	</tr>
	
</table>
Le problème peut'il venir du fait que j'insere une table dans une autre ?

par Hermès » 29 mars 2006, 09:57

Aucune idée, je peux pas dire que je maitrise les notions de doctype...

par Darkbibou » 29 mars 2006, 09:48

Quel doctype dois je utiliser alors ?

Je vais tester si avec les pages includes ca marche en enlevant le doctype

par Hermès » 29 mars 2006, 09:42

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">

par Darkbibou » 29 mars 2006, 09:31

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 ?

par Darkbibou » 29 mars 2006, 08:37

Merci je vais essayer tout ca :)

par Hermès » 28 mars 2006, 17:18

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...

par albat » 28 mars 2006, 16:56

:oops:

Me suis un peu couché tard hier soir...