[Résolu] position d'un div tout en bas d'une page

position d'un div tout en bas d'une page [Résolu] - HTML/CSS - Programmation

Marsh Posté le 08-08-2007 à 15:30:12    

Bonjour, à l'instar de ce schema mon site contient un bloc div contenant les données à afficher tout en bas de ma page.
 
http://www.siteduzero.com/uploads/fr/files/5001_6000/5663.jpg
 
Cependant lorsque le texte de mon "corps" est petit, mon div "pied de page" n'est plus en bas de la page mais dans à la position du corps.
Le menu de gauche étant en float left.
 
Comment faire en sorte que le div de bas de page soit obligatoirement en dessous d'une certaine position (le bas extreme de la page) ?


Message édité par Pulsar- le 11-08-2007 à 13:43:55
Reply

Marsh Posté le 08-08-2007 à 15:30:12   

Reply

Marsh Posté le 08-08-2007 à 15:38:20    

met ton div en "clear: left;" ou même "clear: both;" pour qu'il soit positionné sous le float: left et éventuellement sous un float: right avec "both"


---------------
The Rom's, à votre service
Reply

Marsh Posté le 08-08-2007 à 15:52:10    

Merci !
J'ai trouvé également pour positionner le bloc du bas à la position désiré. Merci ;)

Reply

Marsh Posté le 09-08-2007 à 18:36:29    

En fait j'ai du me passer d'un .css pour la position de ce div qui se situe dans un fichier .php qui n'appelle pas le fichier .css
 
Alors que ca fonctionnait avec le fichier .css cela ne fonctionne plus en mettant esl paramètres directement dans la balise div et c'est là que j'ai besoin de vous pour effectuer cette conversion.
 
le code qui fonctionnait :
 

Code :
  1. #vide
  2. {
  3. clear:left;
  4. float:left;
  5. height:500px;
  6. }


 
Le nouveau code qui ne fonctionne pas :
 

Code :
  1. <div style="clear:left," style="float:left" height="500px">

Reply

Marsh Posté le 09-08-2007 à 18:50:55    

<div style="clear:left; float:left; height:500px;"> [:spamafote]


---------------
The Rom's, à votre service
Reply

Marsh Posté le 10-08-2007 à 15:47:13    

Merci Ca fonctionne ... et ca fonctionne pas, en fait la solution que j'avais trouvé n'est pas la bonne puisque ne fait pas ce que j'en attends.
Je pensais qu'en mettant ce div "de vide" ca empecherait le div du bas d'etre trop haut mais en fait ca lui impose juste d'etre en dessous du corps de 500px or ce que je voudrais c'est que le div du bas soit en dessous du menu de 500px et non du corps.
Une idée ?

Reply

Marsh Posté le 10-08-2007 à 16:58:46    

Une solution qui peut marcher :  
 
1) Tu mets tout le contenu de ton site (menu et autre texte, sauf le div du bas) dans un autre div, auquel tu donne un id "divSite". A cote de ca, mets un id divBas sur le div censé apparaître en bas :
 

Code :
  1. <body>
  2. <div id="divSite">
  3.   <!-- Contenu du site ... blabla ... -->
  4. </div>
  5. <div id="divBas">
  6.   <!-- Ici c'est le div du bas -->
  7. </div>
  8. </body>


 
2) Niveau CSS, tu fais qqchose comme ca :
 

Code :
  1. body {
  2.    margin: 0;
  3.    height: 100%;
  4. }
  6. div#divSite {
  7.    height: 100%;
  8. }
  10. div#divBas {
  11.    height: 100px;
  12.    margin-top: -100px;
  13. }


 
Bien sûr, la valeur du margin-top de ton #divBas doit être égale à la somme padding + border-top + border-bottom + height du div.
Le "margin: 0" du body permet d'éviter de rajouter la barre de défilement vertical, qui apparait si la marge n'est pas nulle.
 
Voila :)

Reply

Marsh Posté le 10-08-2007 à 17:33:30    

Merci.
Le concept est bon mais chez moi pas moyen d'avoir le divSite faisant toute la page. Ce qui fait que le divBas lui colle juste après et ne se situe pas en ba de la page mais en dessous de la derniere écriture du divSite.
 
Comme si le "height : 100%;" ne fonctionnait pas. S'il fonctionnait le problème serait résolu.

Reply

Marsh Posté le 10-08-2007 à 18:29:58    

non mais tu mets ton div "footer" en "clear: both;" et ça va marcher du moment que l'ordre de tes div dans le HTML c'est header, menu, corps, footer


---------------
The Rom's, à votre service
Reply

Marsh Posté le 10-08-2007 à 18:33:55    

Pour ma technique, il faut bien faire attention à ce que le body ait aussi "height: 100%", sinon, effectivement, il n'est pas pris en compte pour le divSite :)

Reply

Marsh Posté le 10-08-2007 à 18:33:55   

Reply

Marsh Posté le 10-08-2007 à 19:36:52    

Ya rien a faire ce height:100% ne passe pas.

 

J'ai minimalisé le truc car ca commence à m'enquiquiner.

 
Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  3.     <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5.  <link rel="stylesheet" media="screen" type="text/css" title="Style" href="style.css" />
  6.     </head>
  7.     <body>
  8.  <div id="body">
  9.   <p>coucou</p>
  10.  </div>
  11.  <div id="divBas">
  12.   <p>pouet</p>
  13.  </div>
  14. </body>
  15. </html>
 

et le style.css :

 
Code :
  1. body
  2. {
  3. height: 100%;
  4. margin: 0; 
  5. } 
  6. #body
  7. {
  8. height: 100%;
  9. }
  10. #divBas
  11. {
  12. height: 100px;
  13. margin-top: 0px;
  14. clear:both;
  15. }
 

Et meme ca ca ne fonctionne pas !


Message édité par Pulsar- le 10-08-2007 à 19:38:18
Reply

Marsh Posté le 10-08-2007 à 19:51:56    

:heink:  :??:  :??:  
"clear: both;" c'est pour quand t'as des float avant, "height" ne sert à rien pour les div

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  3. <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5.   <title>Titre</title>
  6.   <style>
  7. body {
  8.   margin: 0;
  9. }
  11. #header {
  12.   width: 100%;
  13.   border: solid 1px black;
  14. }
  16. #menu {
  17.   width: 20%;
  18.   float: left;
  19.   border: solid 1px black;
  20. }
  22. #menu a {
  23.   display: block;
  24. }
  26. #body {
  27.   margin-left: 20%;
  28.   border: solid 1px black;
  29. }
  31. #footer {
  32.   clear: both;
  33.   width: 100%;
  34.   border: solid 1px black;
  35. }
  36.   </style>
  37. </head>
  38. <body>
  39.   <div id="header">Header ici</div>
  40.   <div id="menu">
  41.    <a href=".">lien1</a>
  42.    <a href=".">lien2</a>
  43.    <a href=".">lien3</a>
  44.    <a href=".">lien4</a>
  45.    <a href=".">lien5</a>
  46.    <a href=".">lien6</a>
  47.    <a href=".">lien7</a>
  48.   </div>
  49.   <div id="body">
  50. Sed maximum est in amicitia parem esse inferiori. Saepe enim excellentiae quaedam sunt, qualis erat Scipionis in nostro, ut ita dicam, grege. Numquam se ille Philo, numquam Rupilio, numquam Mummio anteposuit, numquam inferioris ordinis amicis, Q. vero Maximum fratrem, egregium virum omnino, sibi nequaquam parem, quod is anteibat aetate, tamquam superiorem colebat suosque omnes per se posse esse ampliores volebat.
  51.   </div>
  52.   <div id="footer">Footer ici, footer ici, footer ici, footer ici, footer ici, footer ici, footer ici, footer ici, footer ici, footer ici, footer ici, footer ici</div>
  53. </body>
  54. </html>

C'est pourtant pas compliqué ! [:spamafote]


---------------
The Rom's, à votre service
Reply

Marsh Posté le 10-08-2007 à 20:39:46    

Alors c'est que tu n'as peut etre pas compris ce que j'attendais.
 
Je veux que le footer soit au bas de la page et non pas à la suite du texte du body. Or c'est ce que fais ton code.
 
Si j'ai laissé le clear:both c'est parce que j'ai oublié de l'enlever, il prevenait de mon ancien code.
 
Et meme en reprenant ton code et en mettant un height:100% dans le body ca ne donne pas ce que j'attends. Le div footer se situe toujours à la suite du body. [:spamafote]

Message cité 1 fois
Reply

Marsh Posté le 10-08-2007 à 20:42:30    

Mais apparemment les premiers resultat d'une recherche google laissent à penser que ce n'est pas si simple que ca ...
 
http://www.google.fr/search?source [...] ogle&meta=

Reply

Marsh Posté le 10-08-2007 à 20:53:40    

Pulsar- a écrit :

Alors c'est que tu n'as peut etre pas compris ce que j'attendais.
 
Je veux que le footer soit au bas de la page et non pas à la suite du texte du body. Or c'est ce que fais ton code.
 
Si j'ai laissé le clear:both c'est parce que j'ai oublié de l'enlever, il prevenait de mon ancien code.
 
Et meme en reprenant ton code et en mettant un height:100% dans le body ca ne donne pas ce que j'attends. Le div footer se situe toujours à la suite du body. [:spamafote]


 
Tu mens :o  
http://img404.imageshack.us/img404/7742/footerad4.th.jpg
 :pfff:


Message édité par TheRom_S le 10-08-2007 à 20:55:48

---------------
The Rom's, à votre service
Reply

Marsh Posté le 10-08-2007 à 22:46:28    

Oui, c'est bien ce que je disais tu n'a pas compris ce que je voulais.
Peut-etre me suis mal exprimé aussi ...
 
Voilà ce que j'attends:
 
http://img116.imageshack.us/img116/250/sanstitreni2.th.jpg

Reply

Marsh Posté le 10-08-2007 à 23:14:24    

Effectivement, après vérification, ma méthode ne marche que sans le doctype :)
 
Ca m'apprendra à ne pas le mettre quand je fais un fichier test.html ...

Reply

Marsh Posté le 11-08-2007 à 04:49:14    

Ok désolé, sous FF, c'est facile mais pour que ça marche sous IE, faut faire autre chose donc voilà (le résultat est pas tellement identique dans les deux mais ça devrait aller si tu met pas de border
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  3. <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5.   <title>Titre</title>
  6.   <style>
  7. body {
  8.   margin: 0;
  9.   padding: 3px;
  10. }
  12. div {
  13.   margin: 0;
  14.   padding: 5px;
  15. }
  17. #header {
  18.   border: solid 1px black;
  19. }
  21. #menu {
  22.   width: 194px;
  23.   float: left;
  24. /* solution FF
  25.   min-height: 600px;
  26. */
  27.   border: solid 1px black;
  28. }
  30. #menu a {
  31.   display: block;
  32. }
  34. #body {
  35.   margin-left: 206px;
  36. /* solution FF
  37.   min-height: 600px;
  38. */
  39.   border: solid 1px black;
  40. }
  42. /* hack IE */
  43. #minheight {
  44.   height: 600px;
  45.   float: right;
  46.   width: 1px;
  47. }
  49. /* hack IE */
  50. #minclear {
  51.   clear: both;
  52.   height: 1px;
  53.   overflow: hidden;
  54. }
  56. #footer {
  57.   clear: both;
  58.   border: solid 1px black;
  59. }
  60.   </style>
  61. </head>
  62. <body>
  63.   <div id="header">Header ici</div>
  64.   <div id="menu">
  65.    <!-- hack IE -->
  66.    <div id="minheight"></div>
  67.    <a href=".">lien1</a>
  68.    <a href=".">lien2</a>
  69.    <a href=".">lien3</a>
  70.    <a href=".">lien4</a>
  71.    <a href=".">lien5</a>
  72.    <a href=".">lien6</a>
  73.    <a href=".">lien7</a>
  74.    <!-- hack IE -->
  75.    <div id="minclear"></div>
  76.   </div>
  77.   <div id="body">
  78.    <!-- hack IE -->
  79.    <div id="minheight"></div>
  80. Sed maximum est in amicitia parem esse inferiori. Saepe enim excellentiae quaedam sunt, qualis erat Scipionis in nostro, ut ita dicam, grege. Numquam se ill$
  81.    <!-- hack IE -->
  82.    <div id="minclear"></div>
  83.   </div>
  84.   <div id="footer">Footer ici, footer ici, footer ici, footer ici, footer ici, footer ici, footer ici, footer ici, footer ici, footer ici, footer ici, foote$
  85. </body>
  86. </html>


---------------
The Rom's, à votre service
Reply

Marsh Posté le 11-08-2007 à 13:08:25    

Super !
Merci beaucoup à toi (a vous) pour votre aide ;) !

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed