28220 sujets

CSS et mise en forme, CSS3

[resolu]Pied de page

Bonjour a tous,
J'ai un probleme avec le site que je suis en train de réaliser, je souhaite inserer un pied de page en bas de chaque page.
Ce site est structuré ainsi:
un menu a gauche, une bannière en haut, et le coprs du texte au centre. Ces trois partie sont des calques positionnées en absolue.
Voici le css:

.div_box
{
  position: relative;
  background-image:url(../fond/Fond_site.gif);
  height: 100% ;
  width: 732px;
  text-align :left;
  margin-left: auto;
  margin-right: auto;
}
.menu
{
  background-color:#ffe697;
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
}
.titre
{
  z-index: 1;
  position: absolute;
  top: 0;
  left: 150px;
  width: 582px;
  height: 140px;
}
.contenu
{
  position:absolute;
  background-image:url(../fond/Fond_site.gif);
  background-repeat:repeat-y;
  text-align: justify;
  top: 150px;
  left: 0px;
  width: 732px - 150px;
  padding-left: 170px;
  padding-right: 50px;
}

le div_box est le calque qui contient tout ces calques et permet un centrage du site (genre free.fr).
et voici le code html/php d'une page:


<html>
<head>
<?	include ("includes/head.php");	?>
</head>

<body>

<? $session=14 ?>
<div class="div_box">

  <div class="menu">
<? include("includes/Menu.php"); ?>
  </div>

  <div class="titre">
<? include("includes/Titre.php"); ?>
  </div>
  
  <div class="contenu">
   blablablablablabla
   blablablablablabla
  </div>
</div>

</body>
</html>


Ce que je souhaite faire, c'est un pied de page qui se situe en bas de la fenetre quand le contenue ne remplie pas toute la fentre, et en bas du contenu quand il depasse la fenetre.

Merci d'avance pour votre aide Smiley biggrin
Stevo
Modifié par stevo77 (26 Jul 2005 - 12:10)
bon, j'ai trouvé une petite bidouille pour arriver a mes fin,
voici le css du calque du pied de page:

.footer
{
position:absolute;
bottom:0px;
}


ensuite le placement dans la source depende du contenu, si le contenu est plus petit que le menu, voici le code html:

<div class="div_box">

<div class="menu">
<? include("includes/Menu.php"); ?>
</div>

<div class="titre">
<? include("includes/Titre.php"); ?>
</div>

<div class="contenu">
blablablablablabla
blablablablablabla
</div>
[#red]<div class="footer">
<hr>
pied de page
</div>[/#]
</div>


et si le contenu depasse le menu:

<div class="div_box">

<div class="menu">
<? include("includes/Menu.php"); ?>
</div>

<div class="titre">
<? include("includes/Titre.php"); ?>
</div>

<div class="contenu">
blablablablablabla
blablablablablabla
[#red]<br><br>
<div class="footer>
<hr>
pied de page
</div>[/#]
</div>
</div>


bon c'est vraiment pas la meilleur solution, quand le texte est un peu plus grand que le menu mais que l'on a une grande resolution d'ecran, le pied n'est pas au pied de la page.
Je suis prenneur si quelqu'un trouve une methode un peu plus orthodoxe.

edit: faute d'orthographe corrigée Smiley cligne
Modifié par stevo77 (26 Jul 2005 - 12:09)
Si tu as trouvé une solution, ça mérite un [Résolu] dans ton titre Smiley smile

(au fait, contenu ne prend pas de 'e' ...)
en fait, ça n'est pas vraiment résolu puisque la solution ne merche pas comme il faut, mais je crois bien que j'ai trouvé une solution qui marche bien, encore un probleme avec un windows.onload sous firefox a regler at apres ca sera bon je pense, je mettrais la solution a ce moment.
bon, finalement j'ai réussi a m'en sortir avec un javascript. apparament j'ai pas de bug.
donc voici les modifications du css:

[#red]#[/#]contenu
{
  background-image:url(../fond/Fond_site.gif);
  background-repeat:repeat-y;
  text-align: justify;
  width: 732px - 150px;
  padding-left: 170px;
  padding-right: 50px;
  [#red]padding-bottom: 20px;
  padding-top:150px;
  min-height:400px;
  height:600px; /*bidouille pour le min-height sous ie: la valuer de 600px sera prise par defaut et etiré si necessaire*/
}
html>body #contenu /*alors que cette re-definition non interpreté par ie retablira la normal pour les autres navigateurs*/
{
height:auto;
}

#footer
{
background-image:url(../fond/Fond_site.gif);
position: absolute;
padding-bottom: 0px;
padding-left:170px;
}[/#]


et pour le corps de la page:

<html>
<head>
<?	include ("includes/head.php");	?>
[#red]<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('contenu').offsetHeight;
					var footerElement = document.getElementById('footer');
					var footerHeight  = footerElement.offsetHeight;
					if (windowHeight - (contentHeight + footerHeight) >= 0) {
						footerElement.style.position = 'absolute';
						footerElement.style.top = (windowHeight - footerHeight) + 'px';
					}
					else {
						footerElement.style.position = 'static';
					}
				}
			}
		}
		//-->
		</script>
[/#]
</head>

<body[#red] onLoad="setFooter()" onResize="setFooter()"[/#]>

<? $session=14 ?>
<div class="div_box">

  <div class="menu">
<? include("includes/Menu.php"); ?>
  </div>

  <div class="titre">
<? include("includes/Titre.php"); ?>
  </div>
  
  <div [#red]id[/#]="contenu">
  blablabla
  </div>
  [#red]<div style="position: absolute; text-align:left" id="footer">
<br>
<hr>  
pied de page
 </div>[/#]
</div>
</body>
</html>


voila, ça pourra peut-etre etre util a quelqu'un... sait on jamais Smiley cligne

edit: petite modif sur le script, le pied de page ne s'afficahait pas au chargement sous ie Smiley lol
Modifié par stevo77 (26 Jul 2005 - 14:57)
Salut!
Merci pour ton script c'est exactement ce dont j'ai besoin. par contre est ce qu il marche sous firefox? parce que chez moi ca ne marche qu'avec IE...oui c'est pas logique a priori Smiley cligne

Merci d'avance!
g oublié de preciser que j'utilise une background-image pour le body, je ne sais pas si ca peut influer
C'est bizarre, normalement ça marche sous ff, je fait tout mes test dessus et quand ca marche nikel, je rajoute les bidouilles pour ie ( Smiley langue ).
pour le background-image du body, je ne pense pas que ca pose de problemes, moi je les met dans les div uniquement pour que l'image de fond soit centré.
Peut tu nous donner tes sources pour voir?
Sujet clos
Aller à