Se connecter avec
S'enregistrer | Connectez-vous

un bloc qui s'arrete à 120px du bas de la page ?

Dernière réponse : dans Programmation

Bonjour

Je bloque pour faire une mise en page qui a pourtant l'air toute simple...

____________________________
|------------------------------|
|-----------bloc 1-------------|
|------------------------------|
|------------------------------|
|------------------------------|
|__________________________|
|------------bloc2-------------|
|__________________________|


Le bloc 2 fait 120px de hauteur, s'adapte en largeur à celle de la fenetre, et est collé au bas de la page avec un "bottom:0".

Comment faire pour que le bloc 1 prenne la place restante, en s'arretant bien à 120px du bas pour ne pas se supperposer avec le bloc 2 ?

J'ai essayé avec "margin-bottom: 120px" mais ce n'est pas ça.

Autres pages sur : bloc arrete 120px bas page

Lassé par la pub ? Créez un compte

Voilà ce que je te propose:
  1. <div id="main">
    

  2.  
  3. <div id="bloc1">
    

  4. </div>
    

  5.  
  6. <div id="bloc2">
    

  7. </div>
    

  8.  
  9. </div>

  1. #main {
    

  2. 	margin: 0;
    

  3. 	pading: 0;
    

  4. 	position: relative;
    

  5. 	width: 700px;
    

  6. 	height: 700px;
    

  7. }
    

  8.  
  9. #bloc1 {
    

  10. 	margin: 0;
    

  11. 	padding: 0;
    

  12. 	position: relative;
    

  13. 	width: 100%;
    

  14. 	height: 100%;
    

  15. 	border: 1px solid #000;
    

  16. 	background: #AAA;
    

  17. }
    

  18.  
  19. #bloc2 {
    

  20. 	bottom: 0;
    

  21. 	padding: 0;
    

  22. 	position: absolute;
    

  23. 	width: 100%;
    

  24. 	height: 120px;
    

  25. 	border: 1px solid blue;
    

  26. 	background: #777;
    

  27. }

Ma page ne ferait que 700x700 dans ce cas... Je veux utiliser toute la place disponible, sinon j'utiliserai des valeurs fixes.
Et puis, si la hauteur de bloc1 = 100%, une partie de bloc1 va se retrouver derriere bloc2, et je ne veux pas qu'ils se supperposent...

nan, j'ai mis 700 comme exemple, apres tu mets ce que tu veux comme largeur.
Pour ce qui est de la superposition des blocs, je sais que c'est pas exactement ce que tu veux, mais dans ce cas, tu vires main, tu mets ton bloc2 en relative, et c'est ton bloc1 que tu dois figer en hauteur.
Ou sinon, attends que qu'elqu'un daigne te proposer une autre solution. mais un bloc en position relative ne peut etre placé quà partir du bloc qui le précède, et non comme on veut sur la page. en absolute il est placé par rapport au haut gauche de son parent (bloc conteneur)

Arf, je me doutais que ça ne serait pas possible...

Je vais donner quelques précisions :

Le bloc 2 contient deux liens en rapport avec la page, une pub, et le copyright. Je veux qu'il reste toujours collé en bas de la page, même lorsqu'on baisse l'ascensseur du bloc 1 pour voir la totalité du contenu de la page. Sa hauteur doit donc etre fixe à 120px, et sa position à bottom = 0.

Le bloc 1 est le contenu de la page. Comme il contient tout le vrai contenu de la page, c'est le seul bloc à avoir un overflow=auto, comme ça tous les autres blocs restent en place quand on baisse l'ascensseur. Je ne veux pas lui donner une hauteur fixe, car dans ce cas soit ce sera trop grand pour les petites résolutions, soit trop petit pour les grandes résolutions..... J'aimerai qu'il occupe simplement la place que le bloc 2 n'utilise pas, c'est à dire 100% de la largeur, et "100% - 120px" de la hauteur.

Pour sa largeur, j'utilise 100% mais avec en fait un "margin-left: 290px" pour qu'il laisse la place à un bloc de menu dont je n'ai pas parlé pour ne pas compliquer inutilement la chose. Pour la largeur, ça fonctionne, le bloc 1 prend la largeur que le bloc menu ne prend pas. J'ai donc essayé de faire pareil pour mon probleme, avec un "margin-bottom:120px" mais ça ne fonctionne pas : il continu de descendre jusqu'en bas...
J'ai essayé de lui donner "100% - 120px" comme hauteur, mais je vois qu'on ne peut pas mettre un calcul comme valeur, puisque les deux navigateurs ont alors fait comme si je n'avais pas spécifié de hauteur...

Donc voilà. Mon idée avec deux blocs n'est peut-etre pas la meilleur, si quelqu'un a une autre solution à me proposer pour pouvoir mettre mes deux liens, ma pub, et mon copyright, toujours en bas sans gêner le contenu de la page, je suis preneur.



boubpopsyteam :
Les "hacks" en questions fonctionnent chez tout le monde ou juste chez certains comme le javascript ?

Bon, j'arrive maintenant à faire fonctionner "margin-bottom: 120px" mais seulement lorsque je remplace mon
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
    

  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" xml:lang="fr" lang="fr">
par
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

et uniquement avec Internet Explorer. :sweat: 

Firefox a t-il un bug qui l'empeche de comprendre "margin-bottom: 120px" ?

"margin-bottom: 120px" ça ne respecte pas les standards xhtml ???

oui, je mets bien mes ";".

Voici ma page de test : http://dj.dom.free.fr/v3/images_fr.php (En gros, c'est une gallerie de dessins et peintures.)

son code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    

  2. <html>
    

  3. <head>
    

  4.  
  5.   <title>Mes images - Le site de Dominique Bray</title>
    

  6.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    

  7.   <meta name="keywords" content="Dominique Bray, dessins, animations, infographie, 2D, 3D, peintures, huile, aquarelle, numériques" />
    

  8.   <meta name="Description" content="Le petit monde de Dominique Bray, réalisateur de dessins animés 2D 3D, dessinateur, peintre, musicien, compositeur, auteur, et un peu DJ." />
    

  9.   <meta name="author" content="BRAY Dominique" lang="fr" />
    

  10.   <meta name="copyright" content="Dominique Bray" />
    

  11.   <meta name="identifier-url" content="<a href="http://dj.dom.free.fr" target="_blank">http://dj.dom.free.fr</a>" />
    

  12.   <link rel="shortcut icon" href="mon_favicon.ico" />
    

  13.   <link rel="stylesheet" type="text/css" href="style1.css" />
    

  14.  
  15. </head>
    

  16.  
  17.  
  18. <body alink="#51C7FF" link="#51C7FF" vlink="#51C7FF">
    

  19.  
  20.  
  21.  
  22.  
  23. <div id="Panda"><img alt="" src="<a href="http://dj.dom.free.fr/v3/data/panda-peinture.png" target="_blank">http://dj.dom.free.fr/v3/data/panda-peinture.png</a>" /></div>
    

  24.  
  25. <? include("+pub1.htm"); ?>
    

  26.  
  27. <? include("+menu_fr.htm"); ?>
    

  28.  
  29. <div id="Langues">
    

  30. 	<a href="<a href="http://dj.dom.free.fr/v3/accueil_fr.php" target="_blank">http://dj.dom.free.fr/v3/accueil_fr.php</a>"><img alt="" id="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/drapeau-fr.png" target="_blank">http://dj.dom.free.fr/v3/data/drapeau-fr.png</a>" /></a> 
    

  31. 	<a href="<a href="http://dj.dom.free.fr/v3/accueil_en.php" target="_blank">http://dj.dom.free.fr/v3/accueil_en.php</a>"><img alt="" id="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/drapeau-en.png" target="_blank">http://dj.dom.free.fr/v3/data/drapeau-en.png</a>" /></a> 
    

  32. 	<a href="<a href="http://dj.dom.free.fr/v3/accueil_es.php" target="_blank">http://dj.dom.free.fr/v3/accueil_es.php</a>"><img alt="" id="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/drapeau-es.png" target="_blank">http://dj.dom.free.fr/v3/data/drapeau-es.png</a>" /></a> 
    

  33. </div>
    

  34.  
  35.  
  36.  
  37.  
  38. <div id="mainContent">
    

  39.  
  40. 	<center><img alt="" src="<a href="http://dj.dom.free.fr/v3/data/titre-images_fr.png" target="_blank">http://dj.dom.free.fr/v3/data/titre-images_fr.png</a>" /></center>
    

  41.  
  42. 	<br /><br />Bienvenue sur mon tout nouveau site !<br /><br />
    

  43.  
  44. 	Voici mes plus belles créations mélangeant 2D et 3D. J'ai utilisé Vue Esprit, Blender, Painter, et Photoshop.<br />
    

  45.  
  46. 	<center>
    

  47. 	<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" target="_blank">http://dj.dom.free.fr/v3/data/preview-pepe&meme.png</a>" /><br />Nom - date<br />Description</div>
    

  48. 	<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" target="_blank">http://dj.dom.free.fr/v3/data/preview-pepe&meme.png</a>" /><br />Nom - date<br />Description</div>
    

  49. 	<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" target="_blank">http://dj.dom.free.fr/v3/data/preview-pepe&meme.png</a>" /><br />Nom - date<br />Description</div>
    

  50. 	<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" target="_blank">http://dj.dom.free.fr/v3/data/preview-pepe&meme.png</a>" /><br />Nom - date<br />Description</div>
    

  51. 	<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" target="_blank">http://dj.dom.free.fr/v3/data/preview-pepe&meme.png</a>" /><br />Nom - date<br />Description</div>
    

  52. 	<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" target="_blank">http://dj.dom.free.fr/v3/data/preview-pepe&meme.png</a>" /><br />Nom - date<br />Description</div>
    

  53. 	<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" target="_blank">http://dj.dom.free.fr/v3/data/preview-pepe&meme.png</a>" /><br />Nom - date<br />Description</div>
    

  54. 	<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" target="_blank">http://dj.dom.free.fr/v3/data/preview-pepe&meme.png</a>" /><br />Nom - date<br />Description</div>
    

  55. 	<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" target="_blank">http://dj.dom.free.fr/v3/data/preview-pepe&meme.png</a>" /><br />Nom - date<br />Description</div>
    

  56. 	<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" target="_blank">http://dj.dom.free.fr/v3/data/preview-pepe&meme.png</a>" /><br />Nom - date<br />Description</div>
    

  57. 	<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" target="_blank">http://dj.dom.free.fr/v3/data/preview-pepe&meme.png</a>" /><br />Nom - date<br />Description</div>
    

  58. 	<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" target="_blank">http://dj.dom.free.fr/v3/data/preview-pepe&meme.png</a>" /><br />Nom - date<br />Description</div>
    

  59. 	<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" target="_blank">http://dj.dom.free.fr/v3/data/preview-pepe&meme.png</a>" /><br />Nom - date<br />Description</div>
    

  60. 	<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" target="_blank">http://dj.dom.free.fr/v3/data/preview-pepe&meme.png</a>" /><br />Nom - date<br />Description</div>
    

  61. 	<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" target="_blank">http://dj.dom.free.fr/v3/data/preview-pepe&meme.png</a>" /><br />Nom - date<br />Description</div>
    

  62. 	<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" target="_blank">http://dj.dom.free.fr/v3/data/preview-pepe&meme.png</a>" /><br />Nom - date<br />Description</div>
    

  63. 	<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" target="_blank">http://dj.dom.free.fr/v3/data/preview-pepe&meme.png</a>" /><br />Nom - date<br />Description</div>
    

  64. 	<div id="CasePourPreview"><img alt="pépé et mémé noël" id="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/preview-pepe&meme.png" target="_blank">http://dj.dom.free.fr/v3/data/preview-pepe&meme.png</a>" /><br />Nom - date<br />Description</div>
    

  65. 	</center>
    

  66.  
  67. <br /><br /><br /><br />
    

  68.  
  69. </div>
    

  70.  
  71.  
  72.  
  73.  
  74. <div id="BlocBas">
    

  75. 	<center><div id="Bas">
    

  76. 		<a href="<a href="http://dj.dom.free.fr/forums/fsb/sujet.php?message=139#139" target="_blank">http://dj.dom.free.fr/forums/fsb/sujet.php?message=139#...</a>">Commentez mes images</a> - 
    

  77. 		<a href="<a href="http://dj.dom.free.fr/v3/news.htm" target="_blank">http://dj.dom.free.fr/v3/news.htm</a>">Restez informe(e) des nouveautes</a> - 
    

  78. 	</div></center>
    

  79. 	<center><? include("+pub2.htm"); ?></center>
    

  80. 	<center><? include("+copyright_fr.htm"); ?></center>
    

  81. </div>
    

  82.  
  83.  
  84.  
  85.  
  86. </body>
    

  87. </html>


et mon fichier .css :
  1. <style type="text/css">
    

  2.  
  3. html { margin: 0; padding:0; width: 100%; height: 100%; overflow:hidden;}
    

  4.  
  5. body{  margin:0px;  padding:0px;  overflow:hidden;  height:100%; width: 100%-300px; margin-left: 330px; margin-bottom: 120px; color: rgb(255, 255, 255); background-color: #023554; text-align: center; font-weight: bold; font-size: 16px;}
    

  6.  
  7. #mainContent{  height:100%; width:100%; overflow:auto;}
    

  8.  
  9. #BlocBas { position: absolute; width: 100%; height: 111px; bottom:0px; left:0; overflow:hidden; text-align: center;}
    

  10.  
  11. #Bas { position: relative; text-align: center;}
    

  12.  
  13. #Pub2 { position: relative; top:3px;}
    

  14.  
  15. #Copyright { position: relative; top:2px;}
    

  16.  
  17. #Panda { position: absolute; bottom:0px; right:0px; text-align: right;}
    

  18.  
  19. #Pub1 { position: absolute; bottom:0; left:0}
    

  20.  
  21. #Langues { position: absolute; top:17px; right:20px;}
    

  22.  
  23. #ImageLien{ border: 0pt none ;}
    

  24.  
  25. #CasePourPreview{ border: 0pt none ; width: 250px; height:215px; float: left; font-size: 12px; text-align: center; margin-left:25px; margin-right:25px;}
    

  26.  
  27. #Menu { position: absolute; top:0px; left:0; text-align: left; width:290px; height:100%; background-image: url(<a href="http://dj.dom.free.fr/v3/data/menu_fr.png" target="_blank">http://dj.dom.free.fr/v3/data/menu_fr.png</a>); background-repeat: no-repeat;}
    

  28.  
  29. #MenuLienAccueil { position: absolute; top:49px; left:28px; width:56px; height:15px;}
    

  30. #MenuLienImages { position: absolute; top:72px; left:28px; width:91px; height:15px;}
    

  31. #MenuLienAnimations { position: absolute; top:94px; left:28px; width:119px; height:15px;}
    

  32. #MenuLienMusiques { position: absolute; top:116px; left:28px; width:109px; height:15px;}
    

  33. #MenuLienJeuxVideos { position: absolute; top:138px; left:28px; width:119px; height:15px;}
    

  34. #MenuLienLivres { position: absolute; top:160px; left:28px; width:78px; height:15px;}
    

  35. #MenuLienCommissions { position: absolute; top:182px; left:28px; width:101px; height:15px;}
    

  36. #MenuLienBoutique { position: absolute; top:204px; left:28px; width:91px; height:15px;}
    

  37. #MenuLienForum { position: absolute; top:226px; left:28px; width:134px; height:15px;}
    

  38. #MenuLienContact { position: absolute; top:248px; left:28px; width:60px; height:15px;}
    

  39.  
  40. #MenuLienZoo { position: absolute; top:349px; left:20px; width:133px; height:13px;}
    

  41. #MenuLienMix { position: absolute; top:368px; left:20px; width:169px; height:13px;}
    

  42. #MenuLienAMPP { position: absolute; top:387px; left:20px; width:161px; height:13px;}
    

  43. #MenuLienPresid2007 { position: absolute; top:405px; left:20px; width:184px; height:13px;}
    

  44. #MenuLienPartenaires { position: absolute; top:424px; left:20px; width:118px; height:13px;}
    

  45.  
  46. <!--
    

  47. a:link {text-decoration:none}
    

  48. a:visited {text-decoration:none}
    

  49. -->
    

  50.  
  51. </style>

J'encadre un élément entre des balises "center" pour le centrer horizontalement. Mais apparement ça ne sert à rien...

Voilà, j'ai presque tout corrigé, et ma page est valide.
http://dj.dom.free.fr/v3/images_fr.php

Il y a juste ça que je ne comprend pas :
Citation :
Warning Line 25 column 25: processing instruction does not start with name.
<? include("+pub1.htm"); ?>


Mais ça ne fonctionne toujours pas avec le xhtml. Dans Ie j'ai deux barres de défilement vertical, dans Firefox je n'en ai plus...
Et Firefox continu d'ignorer mon "margin-bottom: 120px".

Citation :
Mais ça ne fonctionne toujours pas avec le xhtml. Dans Ie j'ai deux barres de défilement vertical, dans Firefox je n'en ai plus...

normal: une pour le div (overflow: auto; ) et une pour la page complete. en gros, ton bloc du bas est trop bas ! la fentre FF est moins fournie en icones et onglets que IE, et donc il affiche plus d'info dans une page.

Citation :
normal: une pour le div (overflow: auto; ) et une pour la page complete.
J'ai mis "overflow:hidden" pour body, car aucun élément ne peut dépasser la taille de la page, sauf si je fais une erreur dans mon css. Sur l'ancienne version de mon site, j'avais fait la meme chose, et je n'avais qu'une seule barre, regardes : http://dj.dom.free.fr/pro/images2d3d.htm .
Quoi qu'il en soit, je n'ai plus du tout de barre maintenant... Enfin si, IE en met une mais elle reste grisée.


Citation :
Voilà quelques liens qui devraient apporter des réponses précises à ton problème :

Mon code applique la méthode de ton premier lien, avec pour seule différence que le contenu est (sensé être) limité à "100%-120px" de la hauteur de la fenetre.

Mais ce n'est toujours pas bon : http://dj.dom.free.fr/v3/images_fr.php

Non seulement "mainContent" ne s'arrete pas à 120px du bas comme il devrait avec son "padding-bottom: 120px", mais en plus il n'affiche pas de scrolling vertical alors que j'ai bien mis "overflow:auto" et que son contenu dépasse sa taille....
J'ai définie la hauteur de la même manière que la largeur : "100%-120px" et "100%-290px". La largeur fait bien "100%-290px" et ne dépasse pas de la page, mais la hauteur reste à 100% et atteint le bas de la page alors que je m'arrache les cheveux depuis deux jours pour qu'il s'arrete avant. :fou: 
Je ne comprend vraiment pas ce qui cloche dans mon code.

mon css :
  1. <style type="text/css">
    

  2.  
  3. html { margin: 0; padding:0; width: 100%; height: 100%; overflow:hidden;}
    

  4.  
  5. body{  margin:0;  padding:0;  overflow:hidden;  height:100%; width: 100%; color: rgb(255, 255, 255); background-color: #023554; text-align: center; font-weight: bold; font-size: 16px; A:active {color: #51C7FF;}; A:link {color: #51C7FF;}; A:visited {color: #51C7FF;};}
    

  6.  
  7. #mainContent {width:100%-290px; height:100%-120px; padding-bottom: 120px; margin-left: 290px; overflow:auto;}
    

  8.  
  9. #BlocBas { position: absolute; width: 100%; height: 111px; bottom:0px; left:0; overflow:hidden; text-align: center;}
    

  10.  
  11. #Bas { position: relative; text-align: center;}
    

  12.  
  13. #Pub2 { position: relative; top:3px;}
    

  14.  
  15. #Copyright { position: relative; top:2px;}
    

  16.  
  17. #Panda { position: absolute; bottom:0px; right:16px; text-align: right;}
    

  18.  
  19. #Pub1 { position: absolute; bottom:0; left:0}
    

  20.  
  21. #Langues { position: absolute; top:17px; right:20px;}
    

  22.  
  23. .ImageLien{ border: 0 none ;}
    

  24.  
  25. .CasePourPreview{ border: 0pt none ; width: 300px; height:215px; float: left;}
    

  26. .CasePourPreview2{ border: 0pt none ; width: 250px; height:215px; font-size: 12px; text-align: center; margin-left:auto; margin-right:auto;}
    

  27.  
  28. #Menu { position: absolute; top:0px; left:0; text-align: left; width:290px; height:100%; background-image: url(<a href="http://dj.dom.free.fr/v3/data/menu_fr.png" target="_blank">http://dj.dom.free.fr/v3/data/menu_fr.png</a>); background-repeat: no-repeat;}
    

  29.  
  30. #MenuLienAccueil { position: absolute; top:49px; left:28px; width:56px; height:15px;}
    

  31. #MenuLienImages { position: absolute; top:72px; left:28px; width:91px; height:15px;}
    

  32. #MenuLienAnimations { position: absolute; top:94px; left:28px; width:119px; height:15px;}
    

  33. #MenuLienMusiques { position: absolute; top:116px; left:28px; width:109px; height:15px;}
    

  34. #MenuLienJeuxVideos { position: absolute; top:138px; left:28px; width:119px; height:15px;}
    

  35. #MenuLienLivres { position: absolute; top:160px; left:28px; width:78px; height:15px;}
    

  36. #MenuLienCommissions { position: absolute; top:182px; left:28px; width:101px; height:15px;}
    

  37. #MenuLienBoutique { position: absolute; top:204px; left:28px; width:91px; height:15px;}
    

  38. #MenuLienForum { position: absolute; top:226px; left:28px; width:134px; height:15px;}
    

  39. #MenuLienContact { position: absolute; top:248px; left:28px; width:60px; height:15px;}
    

  40.  
  41. #MenuLienZoo { position: absolute; top:349px; left:20px; width:133px; height:13px;}
    

  42. #MenuLienMix { position: absolute; top:368px; left:20px; width:169px; height:13px;}
    

  43. #MenuLienAMPP { position: absolute; top:387px; left:20px; width:161px; height:13px;}
    

  44. #MenuLienPresid2007 { position: absolute; top:405px; left:20px; width:184px; height:13px;}
    

  45. #MenuLienPartenaires { position: absolute; top:424px; left:20px; width:118px; height:13px;}
    

  46.  
  47. <!--
    

  48. a:link {text-decoration:none}
    

  49. a:visited {text-decoration:none}
    

  50. -->
    

  51.  
  52. </style>



ma page :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
    

  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" xml:lang="fr" lang="fr">
    

  3. <head>
    

  4.  
  5.   <title>Mes images - Le site de Dominique Bray</title>
    

  6.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    

  7.   <meta name="keywords" content="Dominique Bray, dessins, animations, infographie, 2D, 3D, peintures, huile, aquarelle, numériques" />
    

  8.   <meta name="Description" content="Le petit monde de Dominique Bray, réalisateur de dessins animés 2D 3D, dessinateur, peintre, musicien, compositeur, auteur, et un peu DJ." />
    

  9.   <meta name="author" content="BRAY Dominique" lang="fr" />
    

  10.   <meta name="copyright" content="Dominique Bray" />
    

  11.   <meta name="identifier-url" content="<a href="http://dj.dom.free.fr" target="_blank">http://dj.dom.free.fr</a>" />
    

  12.   <link rel="shortcut icon" href="mon_favicon.ico" />
    

  13.   <link rel="stylesheet" type="text/css" href="style1.css" />
    

  14.  
  15. </head>
    

  16.  
  17.  
  18. <body>
    

  19.  
  20.  
  21.  
  22.  
  23. <div id="Panda"><img alt="" src="<a href="http://dj.dom.free.fr/v3/data/panda-peinture.png" target="_blank">http://dj.dom.free.fr/v3/data/panda-peinture.png</a>" /></div>
    

  24.  
  25. <? include("+pub1.htm"); ?>
    

  26.  
  27. <? include("+menu_fr.htm"); ?>
    

  28.  
  29. <div id="Langues">
    

  30. 	<a href="<a href="http://dj.dom.free.fr/v3/accueil_fr.php" target="_blank">http://dj.dom.free.fr/v3/accueil_fr.php</a>"><img alt="" class="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/drapeau-fr.png" target="_blank">http://dj.dom.free.fr/v3/data/drapeau-fr.png</a>" /></a> 
    

  31. 	<a href="<a href="http://dj.dom.free.fr/v3/accueil_en.php" target="_blank">http://dj.dom.free.fr/v3/accueil_en.php</a>"><img alt="" class="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/drapeau-en.png" target="_blank">http://dj.dom.free.fr/v3/data/drapeau-en.png</a>" /></a> 
    

  32. 	<a href="<a href="http://dj.dom.free.fr/v3/accueil_es.php" target="_blank">http://dj.dom.free.fr/v3/accueil_es.php</a>"><img alt="" class="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/drapeau-es.png" target="_blank">http://dj.dom.free.fr/v3/data/drapeau-es.png</a>" /></a> 
    

  33. </div>
    

  34.  
  35.  
  36.  
  37.  
  38. <div id="mainContent">
    

  39.  
  40. 	<img alt="" src="<a href="http://dj.dom.free.fr/v3/data/titre-images_fr.png" target="_blank">http://dj.dom.free.fr/v3/data/titre-images_fr.png</a>" />
    

  41.  
  42. 	<br /><br />Bienvenue sur mon tout nouveau site !<br /><br />
    

  43.  
  44. 	Voici mes plus belles créations mélangeant 2D et 3D. J'ai utilisé Vue Esprit, Blender, Painter, et Photoshop.<br />
    

  45.  
  46. 	<div class="CasePourPreview"><div class="CasePourPreview2"><a href=""><img alt="pépé et mémé noël" class="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/preview-pepe-meme.png" target="_blank">http://dj.dom.free.fr/v3/data/preview-pepe-meme.png</a>" /></a><br />Nom - date<br />Description</div></div>
    

  47. 	<div class="CasePourPreview"><div class="CasePourPreview2"><a href=""><img alt="Demetan la petite grenouille et son amie Renatan." class="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/preview-demetan.png" target="_blank">http://dj.dom.free.fr/v3/data/preview-demetan.png</a>" /></a><br />Nom - date<br />Description</div></div>
    

  48. 	<div class="CasePourPreview"><div class="CasePourPreview2"><a href=""><img alt="Une image abstraite." class="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/preview-abstrait1.png" target="_blank">http://dj.dom.free.fr/v3/data/preview-abstrait1.png</a>" /></a><br />Nom - date<br />Description</div></div>
    

  49. 	<div class="CasePourPreview"><div class="CasePourPreview2"><a href=""><img alt="Ma premiere peinture numerique." class="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/preview-peinture-num1.png" target="_blank">http://dj.dom.free.fr/v3/data/preview-peinture-num1.png</a>" /></a><br />Nom - date<br />Description</div></div>
    

  50. 	<div class="CasePourPreview"><div class="CasePourPreview2"><a href=""><img alt="Soucoupes volantes" class="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/preview-soucoupes.png" target="_blank">http://dj.dom.free.fr/v3/data/preview-soucoupes.png</a>" /></a><br />Nom - date<br />Description</div></div>
    

  51. 	<div class="CasePourPreview"><div class="CasePourPreview2"><a href=""><img alt="Le printemps" class="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/preview-printemps.png" target="_blank">http://dj.dom.free.fr/v3/data/preview-printemps.png</a>" /></a><br />Nom - date<br />Description</div></div>
    

  52. 	<div class="CasePourPreview"><div class="CasePourPreview2"><a href=""><img alt="Attends-moi petite princesse" class="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/preview-attends-moi-petite-princesse.png" target="_blank">http://dj.dom.free.fr/v3/data/preview-attends-moi-petit...</a>" /></a><br />Nom - date<br />Description</div></div>
    

  53. 	<div class="CasePourPreview"><div class="CasePourPreview2"><a href=""><img alt="Aquarium" class="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/preview-aquarium.png" target="_blank">http://dj.dom.free.fr/v3/data/preview-aquarium.png</a>" /></a><br />Nom - date<br />Description</div></div>
    

  54. 	<div class="CasePourPreview"><div class="CasePourPreview2"><a href=""><img alt="I want to meet you" class="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/preview-i-want-to-2.png" target="_blank">http://dj.dom.free.fr/v3/data/preview-i-want-to-2.png</a>" /></a><br />Nom - date<br />Description</div></div>
    

  55. 	<div class="CasePourPreview"><div class="CasePourPreview2"><a href=""><img alt="I want to meet you" class="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/preview-i-want-to-1.png" target="_blank">http://dj.dom.free.fr/v3/data/preview-i-want-to-1.png</a>" /></a><br />Nom - date<br />Description</div></div>
    

  56. 	<div class="CasePourPreview"><div class="CasePourPreview2"><a href=""><img alt="Winnie the DJ" class="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/preview-winnie-dj.png" target="_blank">http://dj.dom.free.fr/v3/data/preview-winnie-dj.png</a>" /></a><br />Nom - date<br />Description</div></div>
    

  57.  
  58. 	<div class="CasePourPreview"><div class="CasePourPreview2"><a href=""><img alt="Dom n Friends - Code Lyoko" class="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/preview-dom-friends-code-lyoko.png" target="_blank">http://dj.dom.free.fr/v3/data/preview-dom-friends-code-...</a>" /></a><br />Nom - date<br />Description</div></div>
    

  59. 	<div class="CasePourPreview"><div class="CasePourPreview2"><a href=""><img alt="Dom n Friends - Simpson" class="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/preview-dom-friends-simpson.png" target="_blank">http://dj.dom.free.fr/v3/data/preview-dom-friends-simps...</a>" /></a><br />Nom - date<br />Description</div></div>
    

  60. 	<div class="CasePourPreview"><div class="CasePourPreview2"><a href=""><img alt="Dom n Friends - Charlotte Spitz" class="ImageLien" src="<a href="http://dj.dom.free.fr/v3/data/preview-dom-friends-charlotte.png" target="_blank">http://dj.dom.free.fr/v3/data/preview-dom-friends-charl...</a>" /></a><br />Nom - date<br />Description</div></div>
    

  61.  
  62. <br /><br /><br /><br />
    

  63.  
  64. </div>
    

  65.  
  66.  
  67.  
  68.  
  69. <div id="BlocBas">
    

  70. 	<div id="Bas">
    

  71. 		<a href="<a href="http://dj.dom.free.fr/forums/fsb/sujet.php?message=139#139" target="_blank">http://dj.dom.free.fr/forums/fsb/sujet.php?message=139#...</a>">Commentez mes images</a> - 
    

  72. 		<a href="<a href="http://dj.dom.free.fr/v3/news.htm" target="_blank">http://dj.dom.free.fr/v3/news.htm</a>">Restez informe(e) des nouveautes</a> - 
    

  73. 	</div>
    

  74. 	<? include("+pub2.htm"); ?>
    

  75. 	<? include("+copyright_fr.htm"); ?>
    

  76. </div>
    

  77.  
  78.  
  79.  
  80.  
  81. </body>
    

  82. </html>
Expert Programmation

Je crois que tu ferais bien de lire les liens que je t'ai donné ce matin.

Ton site est tout bonnement non utilisable actuellement du moment que tu as un écran dont la résolution est inférieure à 1024*768 (OK, c'est pas la majorité ; mais nombreux sont ceux qui utilise leur navigateur en mode fenêtre et non plein écran...)



Ils sont où les ascenseurs ?

Les ascenseurs ont disparu et je ne comprend pas pourquoi, je viens de le dire... Je suis en en 1280x960 et il est aussi inutilisable puisque sans ascenseurs je ne vois pas les cinq dernières images de la gallerie.

J'avais déjà lu tes deux derniers liens lors de recherches hier. Je les ai relu mais cela ne m'a pas aidé. J'ai changé mon code pour qu'il reprenne la méthode de ton premier lien, et je ne comprend donc justement pas pourquoi ça ne fonctionne pas.

Mais là je m'apprete à copier/coller le code de ton premier lien et y adapter un par un mes éléments à moi, comme ça je verrai là où je fais une erreur. ;) 

Si je ne met pas "height: 100%-120px;" le bloc est trop grand. En retirant "padding-bottom: 120px;" je ne note aucun changement, mais je le laisse puisqu'il est dans le code du premier lien que m'a donné martien.

J'ai copié/collé le code du premier lien de marsien, en ajoutant juste "height: 100%;" au bloc "container" pour limiter sa hauteur à celle de la fenetre. Je lui ai aussi mis "overflow:hidden;" puisque son contenu ne peut pas dépasser la fenetre si sa hauteur y est limitée.
Le bloc "mainContent" étant plus grand que la fenetre, j'ai voulu lui limiter à lui aussi sa hauteur, avec un "height:100%-120px;", et je lui ai donné "overflow:auto;".

Mais ça ne fonctionne pas.... Dans les deux navigateurs, le bloc "mainContent" continu d'être trop grand, et de ne pas afficher son ascenseur vertical..... J'ai donc forcé l'affichage de ses ascenseurs avec un "overflow: scroll;" au lieu de auto.
Comme vous pouvez le voir : http://dj.dom.free.fr/v3/images_fr.php , les ascenseurs apparaissent mais sont grisés.... Apparement la hauteur de "mainContent" continu de se comporter comme si elle était "auto", alors que je l'ai fixé à "100%-120px", et que le bloc "container" dans lequel il se trouve a lui-aussi une hauteur fixée à "100%".

J'ai bien donné "margin: 0; padding:0; width: 100%; height: 100%;" à "body" et "html", donc les 100% de mes blocs se réfèrent bien à quelque-chose.

Votre explication ?

Je vous propose de me suivre dans mon raisonnement, pas à pas, et de me dire où je me trompe svp.

Je prend le code de l'exemple du lien que m'a donné martien : http://pompage.net/IMG/html/pieds/footer_css2.html
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
    

  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" xml:lang="en" lang="en"><head>
    

  3.  
  4. 		<title>Exemple 2 : Positionner un footer avec CSS - étape 2</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    

  5. 		<style type="text/css">
    

  6. 		<!--
    

  7. 			html, body {
    

  8. 				height: 100%;
    

  9. 			}
    

  10. 			body {
    

  11. 				margin: 0;
    

  12. 				padding: 0;
    

  13. 				font: 12px/1.5 verdana, arial, helvetica, sans-serif;
    

  14. 			}
    

  15. 			#container {
    

  16. 				position: relative;
    

  17. 				min-height: 100%;
    

  18. 			}
    

  19. 			#content {
    

  20. 				padding: 10px;
    

  21. 				background-color: #6caad9;
    

  22. 				padding-bottom: 48px;
    

  23. 			}
    

  24. 			#footer {
    

  25. 				position: absolute;
    

  26. 				bottom: 0;
    

  27. 				padding: 10px;
    

  28. 				background-color: #0066b2;
    

  29. 				width: 75%;
    

  30. 			}
    

  31. 			#footer h1 {
    

  32. 				color: #fff;
    

  33. 				padding-bottom: 0;
    

  34. 			}
    

  35. 			h1, p {
    

  36. 				margin: 0;
    

  37. 				padding-bottom: 1em;
    

  38. 			}
    

  39. 			h1 {
    

  40. 				font-size: 12px;
    

  41. 				line-height: 1.5em;
    

  42. 			}
    

  43. 		-->
    

  44. 		</style></head>
    

  45.  
  46. 	<body>
    

  47. 		<div id="container">
    

  48. 			<div id="content">
    

  49. 				<h1>Content</h1>
    

  50. 				<p>Redimensionnez votre fenêtre pour observer comment se comporte votre pied de page 100% CSS.</p>
    

  51. 				<p>Lorem
    

  52. ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
    

  53. nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
    

  54. convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
    

  55. Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
    

  56. pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
    

  57. justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
    

  58. urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
    

  59. Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
    

  60. fermentum a, accumsan et, neque.</p>
    

  61. 			</div>
    

  62. 			<div id="footer">
    

  63. 				<h1>Footer</h1>
    

  64. 			</div>
    

  65. 		</div>
    

  66. 	</body></html>


Je répete le contenu de "content" plusieurs fois, pour que cela soit plus grand que la fenetre.

Je m'aperçois que le pied de page suit le flux de la page et n'est donc plus visible, à moins bien-sur que l'on baisse avec l'ascenseur. Mais comme moi je veux qu'il soit tout le temps visible, je limite la hauteur de "container" en ajoutant " height: 100%;" et "overflow:hidden;" à son style.

Mon pied de page est maintenant fixé en bas de la fenetre. Mais il n'y a plus d'ascenseur, et il m'en faut un pour voir la totalité du contenu de "Content".

Puisque c'est le contenu de "Content" qui doit défiler et non celui de "Container", j'ajoute "overflow: auto;" et "height: 100%;" au style du bloc "Content".

J'obtiens alors le code suivant, qui me semble suffisant pour obtenir ce que je souhaite :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
    

  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" xml:lang="en" lang="en"><head>
    

  3.  
  4. 		<title>Exemple 2 : Positionner un footer avec CSS - étape 2</title><meta 
    

  5.  
  6. http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    

  7. 		<style type="text/css">
    

  8. 		<!--
    

  9. 			html, body {
    

  10. 				height: 100%;
    

  11. 			}
    

  12. 			body {
    

  13. 				margin: 0;
    

  14. 				padding: 0;
    

  15. 				font: 12px/1.5 verdana, arial, helvetica, sans-serif;
    

  16. 				overflow:hidden;
    

  17. 			}
    

  18. 			#container {
    

  19. 				position: relative;
    

  20. 				min-height: 100%;
    

  21. 				height: 100%;
    

  22. 				overflow:hidden;
    

  23. 			}
    

  24. 			#content {
    

  25. 				padding: 10px;
    

  26. 				background-color: #6caad9;
    

  27. 				padding-bottom: 48px;
    

  28. 				overflow: auto;
    

  29. 				height: 100%;
    

  30. 			}
    

  31. 			#footer {
    

  32. 				position: absolute;
    

  33. 				bottom: 0;
    

  34. 				padding: 10px;
    

  35. 				background-color: #0066b2;
    

  36. 				width: 75%;
    

  37. 			}
    

  38. 			#footer h1 {
    

  39. 				color: #fff;
    

  40. 				padding-bottom: 0;
    

  41. 			}
    

  42. 			h1, p {
    

  43. 				margin: 0;
    

  44. 				padding-bottom: 1em;
    

  45. 			}
    

  46. 			h1 {
    

  47. 				font-size: 12px;
    

  48. 				line-height: 1.5em;
    

  49. 			}
    

  50. 		-->
    

  51. 		</style></head>
    

  52.  
  53. 	<body>
    

  54. 		<div id="container">
    

  55. 			<div id="content">
    

  56. 				<h1>Content</h1>
    

  57. 				<p>Redimensionnez votre fenêtre pour observer comment se comporte votre 
    

  58.  
  59. pied de page 100% CSS.</p>
    

  60. 				<p>Lorem
    

  61. ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
    

  62. nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
    

  63. convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
    

  64. Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
    

  65. pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
    

  66. justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
    

  67. urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
    

  68. Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
    

  69. fermentum a, accumsan et, neque.</p>
    

  70. 				<h1>Content</h1>
    

  71. 				<p>Redimensionnez votre fenêtre pour observer comment se comporte votre 
    

  72.  
  73. pied de page 100% CSS.</p>
    

  74. 				<p>Lorem
    

  75. ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
    

  76. nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
    

  77. convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
    

  78. Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
    

  79. pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
    

  80. justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
    

  81. urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
    

  82. Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
    

  83. fermentum a, accumsan et, neque.</p>
    

  84. 				<h1>Content</h1>
    

  85. 				<p>Redimensionnez votre fenêtre pour observer comment se comporte votre 
    

  86.  
  87. pied de page 100% CSS.</p>
    

  88. 				<p>Lorem
    

  89. ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
    

  90. nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
    

  91. convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
    

  92. Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
    

  93. pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
    

  94. justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
    

  95. urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
    

  96. Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
    

  97. fermentum a, accumsan et, neque.</p>
    

  98. 				<h1>Content</h1>
    

  99. 				<p>Redimensionnez votre fenêtre pour observer comment se comporte votre 
    

  100.  
  101. pied de page 100% CSS.</p>
    

  102. 				<p>Lorem
    

  103. ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
    

  104. nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
    

  105. convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
    

  106. Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
    

  107. pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
    

  108. justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
    

  109. urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
    

  110. Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
    

  111. fermentum a, accumsan et, neque.</p>
    

  112. 				<h1>Content</h1>
    

  113. 				<p>Redimensionnez votre fenêtre pour observer comment se comporte votre 
    

  114.  
  115. pied de page 100% CSS.</p>
    

  116. 				<p>Lorem
    

  117. ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
    

  118. nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
    

  119. convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
    

  120. Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
    

  121. pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
    

  122. justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
    

  123. urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
    

  124. Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
    

  125. fermentum a, accumsan et, neque.</p>
    

  126. 				<h1>Content</h1>
    

  127. 				<p>Redimensionnez votre fenêtre pour observer comment se comporte votre 
    

  128.  
  129. pied de page 100% CSS.</p>
    

  130. 				<p>Lorem
    

  131. ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
    

  132. nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
    

  133. convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
    

  134. Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
    

  135. pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
    

  136. justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
    

  137. urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
    

  138. Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
    

  139. fermentum a, accumsan et, neque.</p>
    

  140. 				<h1>Content</h1>
    

  141. 				<p>Redimensionnez votre fenêtre pour observer comment se comporte votre 
    

  142.  
  143. pied de page 100% CSS.</p>
    

  144. 				<p>Lorem
    

  145. ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
    

  146. nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
    

  147. convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
    

  148. Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
    

  149. pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
    

  150. justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
    

  151. urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
    

  152. Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
    

  153. fermentum a, accumsan et, neque.</p>
    

  154. 				<h1>Content</h1>
    

  155. 				<p>Redimensionnez votre fenêtre pour observer comment se comporte votre 
    

  156.  
  157. pied de page 100% CSS.</p>
    

  158. 				<p>Lorem
    

  159. ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
    

  160. nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
    

  161. convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
    

  162. Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
    

  163. pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
    

  164. justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
    

  165. urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
    

  166. Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
    

  167. fermentum a, accumsan et, neque.</p>
    

  168. 				<h1>Content</h1>
    

  169. 				<p>Redimensionnez votre fenêtre pour observer comment se comporte votre 
    

  170.  
  171. pied de page 100% CSS.</p>
    

  172. 				<p>Lorem
    

  173. ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
    

  174. nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
    

  175. convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
    

  176. Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
    

  177. pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
    

  178. justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
    

  179. urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
    

  180. Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
    

  181. fermentum a, accumsan et, neque.</p>
    

  182. 				<h1>Content</h1>
    

  183. 				<p>Redimensionnez votre fenêtre pour observer comment se comporte votre 
    

  184.  
  185. pied de page 100% CSS.</p>
    

  186. 				<p>Lorem
    

  187. ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut
    

  188. nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis,
    

  189. convallis vel, mauris. Ut sed mauris vel metus pretium pretium.
    

  190. Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus
    

  191. pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
    

  192. justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel,
    

  193. urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo.
    

  194. Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a,
    

  195. fermentum a, accumsan et, neque.</p>
    

  196. 			</div>
    

  197. 			<div id="footer">
    

  198. 				<h1>Footer</h1>
    

  199. 			</div>
    

  200. 		</div>
    

  201. 	</body></html>


Mais ça ne fonctionne pas.

Dans les deux navigateurs, le bloc "content" est trop grand, et descends lègerement en dessous de la taille de la fenetre, alors que moi je veux qu'il s'arrete avant le bas de la fenetre. Que fait "Content" de son "padding-bottom: 48px;" ?

Les blocs "content" et "footer" se supperposent, alors qu'ils ne devraient pas.

Dans Firefox, je n'ai qu'un ascenseur vertical : celui du bloc "content". C'est ce que je voulais ! Mais dans Internet Explorer, je me retrouve avec deux ascenseurs verticaux... Celui de "Content" est là, c'est bien, mais celui de la page n'a rien à faire là puisque aucun bloc ne peut dépasser de la page (leur taille étant fixée à 100% de la fenetre). Donc j'ajoute "overflow:hidden;" au style de "body", mais ça ne change rien.

Je désespère un peu... :pfff: 

Vous qui avez bien plus d'expérience que moi, voyez-vous où se trouve mon erreur ?

#content : tu lui a mis height:100% plus un padding-bottom:48px alors il est à 100% + 48px de haut. Tu n'as pas besoin de donner une hauteur à content, vu que tu en donnes une à container. Content prendra sa hauteur en fonction de son contenu, et grandira tout seul, puis l'overflow apparaitra.

J'ai retiré "height:100%" mais dans ce cas ce serait l'overflow de "Container" qui serait utilisé, puisque la hauteur de "Content" n'est plus limitée. Mais j'ai mis l'overflow de "Container" en "hidden" sinon le pied de page bougerait aussi. Je veux que mon pied de page soit fixé en bas de la page, donc seul "Contener" doit avoir un overflow.

Citation :
plus un padding-bottom:48px alors il est à 100% + 48px de haut.
Je croyais que ça allait dans l'autre sens. Je lui ai donné une valeur négative et il ne descend plus en dessous, mais il ne s'arrete toujours pas à 48px du bas de la page.

As-tu une idée pour faire disparaitre la scrolling bar inutile de Internet Explorer ? C'est bizarre, ça ne le fait pas avec mon ancien site qui est en html, ni quand je mets cetta page en html. Serait-ce un bug de IE avec le xhtml ?

Je viens de m'apercevoir de quelque-chose de très étrange... :ouch: 

Dans le code que j'ai repris de l'example, le style est inclus dans la page. Moi je préfère le mettre dans un fichier css, comme ça il sert à toutes les autres pages. Mais dès que je déplace les lignes de style dans un fichier .css, et que j'ajoute ma ligne pour appeler ce fichier css, le pied de page n'est plus fixé dans Firefox.... Tout le reste continu de fonctionner, mais ça, ça bug... Je remet les lignes de style dans le code de la page, et je retire la ligne pour appeler le fichier css, et ça marche à nouveau !
Je n'y comprend rien... :pt1cable:  :cry: 
Quelqu'un a du lancer un sort vaudoo à mon site, je ne vois que ça...

bon alors pour commencer, laisse ton css hors du html, dans un fichier à part, c'est nettement mieux.
C'est bien ce que tu as fait là, je vien sd'aller voir. Juste ton panda dépasse de qq pixels sur la droite... t'es arrivé au résultat escompté ?

Non, je n'ai toujours pas réussi à faire s'arreter mon bloc à 120px du bas de la fenetre. Mais j'ai eu une brillante idée pour tricher : mettre un petit png contenant un dégradé de transparence en background de mon bloc "BlocBas". Ainsi, au lieu de s'arreter à 120px du bas, mon bloc de contenu disparait progressivement. :) 
Ca ne fonctionne pas encore avec IE car les png en background sont plus compliqués à lui faire avaler qu'en simple image, mais je vais surement trouver.
edit : J'ai trouvé ! Au lieu de le mettre en background, j'ai créé un bloc "Degrade" supperposé derriere "BlocBas", avec dedans mon png auquel j'ai donné 3000px comme largeur (il ne fait que 2px sinon). Ca fonctionne dans IE maintenant.

Par contre je n'ai pas encore de solution pour le double ascenseur vertical. Je pense que c'est un bug de IE avec le xhtml, car en html il ne le fait pas.

Voilà c'est corrigé.

Je remarque sur ta capture d'écran qu'une de mes images n'a pas été chargée... Chez moi aussi j'ai souvent des images de mon site qui ne se chargent pas la première fois, puis qui se chargent normalement lorsqu'on presse F5. C'est dû à quoi ? Mes images sont-elles trop lourdes ? Ou mal insérées ?
Expert Programmation

Elle fait quelle taille ta page ? Je pense que c'est les accès disques qui posent problème aux serveurs de Free. Entre les pages php avec includes, les css, les javascripts, les documents multimédias, les photos, tu as un nombre conséquent d'accès disque pour récupérer tous ces fichiers. Et là, ça coince. Je me trompe pet-être, mais c'est ce que j'en ai conclu de mon expérience.

Y'a t-il un code d'erreur pour les pages qui ne se sont pas chargées entièrement ? Si oui, on pourrait mettre dans le .htaccess une ligne qui fait recharger la page automatiquement s'il manque quelque-chose. Ca éviterait aux visiteurs de presser F5.
Lassé par la pub ? Créez un compte

Créer un nouveau sujet