Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
1579 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1597253
Pulsar-
Posté le 08-08-2007 à 15:30:12  profilanswer
 

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
mood
Publicité
Posté le 08-08-2007 à 15:30:12  profilanswer
 

n°1597264
TheRom_S
Posté le 08-08-2007 à 15:38:20  profilanswer
 

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
n°1597275
Pulsar-
Posté le 08-08-2007 à 15:52:10  profilanswer
 

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

n°1597933
Pulsar-
Posté le 09-08-2007 à 18:36:29  profilanswer
 

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

n°1597937
TheRom_S
Posté le 09-08-2007 à 18:50:55  profilanswer
 

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


---------------
The Rom's, à votre service
n°1598255
Pulsar-
Posté le 10-08-2007 à 15:47:13  profilanswer
 

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 ?

n°1598332
astryad
Posté le 10-08-2007 à 16:58:46  profilanswer
 

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. }
  5. div#divSite {
  6.    height: 100%;
  7. }
  8. div#divBas {
  9.    height: 100px;
  10.    margin-top: -100px;
  11. }


 
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 :)

n°1598345
Pulsar-
Posté le 10-08-2007 à 17:33:30  profilanswer
 

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.

n°1598379
TheRom_S
Posté le 10-08-2007 à 18:29:58  profilanswer
 

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
n°1598382
astryad
Posté le 10-08-2007 à 18:33:55  profilanswer
 

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 :)

mood
Publicité
Posté le 10-08-2007 à 18:33:55  profilanswer
 

n°1598404
Pulsar-
Posté le 10-08-2007 à 19:36:52  profilanswer
 

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. #body
  6. {
  7. height: 100%;
  8. }
  9. #divBas
  10. {
  11. height: 100px;
  12. margin-top: 0px;
  13. clear:both;
  14. }
 

Et meme ca ca ne fonctionne pas !


Message édité par Pulsar- le 10-08-2007 à 19:38:18
n°1598407
TheRom_S
Posté le 10-08-2007 à 19:51:56  profilanswer
 

: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. }
  10. #header {
  11.   width: 100%;
  12.   border: solid 1px black;
  13. }
  14. #menu {
  15.   width: 20%;
  16.   float: left;
  17.   border: solid 1px black;
  18. }
  19. #menu a {
  20.   display: block;
  21. }
  22. #body {
  23.   margin-left: 20%;
  24.   border: solid 1px black;
  25. }
  26. #footer {
  27.   clear: both;
  28.   width: 100%;
  29.   border: solid 1px black;
  30. }
  31.   </style>
  32. </head>
  33. <body>
  34.   <div id="header">Header ici</div>
  35.   <div id="menu">
  36.    <a href=".">lien1</a>
  37.    <a href=".">lien2</a>
  38.    <a href=".">lien3</a>
  39.    <a href=".">lien4</a>
  40.    <a href=".">lien5</a>
  41.    <a href=".">lien6</a>
  42.    <a href=".">lien7</a>
  43.   </div>
  44.   <div id="body">
  45. 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.
  46.   </div>
  47.   <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>
  48. </body>
  49. </html>

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


---------------
The Rom's, à votre service
n°1598424
Pulsar-
Posté le 10-08-2007 à 20:39:46  profilanswer
 

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]

n°1598427
Pulsar-
Posté le 10-08-2007 à 20:42:30  profilanswer
 

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=

n°1598434
TheRom_S
Posté le 10-08-2007 à 20:53:40  profilanswer
 

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
n°1598495
Pulsar-
Posté le 10-08-2007 à 22:46:28  profilanswer
 

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

n°1598497
astryad
Posté le 10-08-2007 à 23:14:24  profilanswer
 

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

n°1598520
TheRom_S
Posté le 11-08-2007 à 04:49:14  profilanswer
 

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. }
  11. div {
  12.   margin: 0;
  13.   padding: 5px;
  14. }
  15. #header {
  16.   border: solid 1px black;
  17. }
  18. #menu {
  19.   width: 194px;
  20.   float: left;
  21. /* solution FF
  22.   min-height: 600px;
  23. */
  24.   border: solid 1px black;
  25. }
  26. #menu a {
  27.   display: block;
  28. }
  29. #body {
  30.   margin-left: 206px;
  31. /* solution FF
  32.   min-height: 600px;
  33. */
  34.   border: solid 1px black;
  35. }
  36. /* hack IE */
  37. #minheight {
  38.   height: 600px;
  39.   float: right;
  40.   width: 1px;
  41. }
  42. /* hack IE */
  43. #minclear {
  44.   clear: both;
  45.   height: 1px;
  46.   overflow: hidden;
  47. }
  48. #footer {
  49.   clear: both;
  50.   border: solid 1px black;
  51. }
  52.   </style>
  53. </head>
  54. <body>
  55.   <div id="header">Header ici</div>
  56.   <div id="menu">
  57.    <!-- hack IE -->
  58.    <div id="minheight"></div>
  59.    <a href=".">lien1</a>
  60.    <a href=".">lien2</a>
  61.    <a href=".">lien3</a>
  62.    <a href=".">lien4</a>
  63.    <a href=".">lien5</a>
  64.    <a href=".">lien6</a>
  65.    <a href=".">lien7</a>
  66.    <!-- hack IE -->
  67.    <div id="minclear"></div>
  68.   </div>
  69.   <div id="body">
  70.    <!-- hack IE -->
  71.    <div id="minheight"></div>
  72. 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$
  73.    <!-- hack IE -->
  74.    <div id="minclear"></div>
  75.   </div>
  76.   <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$
  77. </body>
  78. </html>


---------------
The Rom's, à votre service
n°1598561
Pulsar-
Posté le 11-08-2007 à 13:08:25  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
Page qui s'affiche bien avec le navigateur mais mal sur le bureauappel javascript impossible dans page appelée en ajax
Différence entre membre dans et hors __init__ [RESOLU]Résolu - Arrayliste, exemple COMPLET
[résolu] CSS zoom limité à 30 images ?Tri de réponses chiffre/caractère [resolu]
[Résolu][MYSQL] lister les doublons + rapidementEnregistrer le contenu d'une page dans une variable
Affichage des données dans une position bien définiRésolu
Plus de sujets relatifs à : [Résolu] position d'un div tout en bas d'une page


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR