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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [css] div jusqu'en bas de la page

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[css] div jusqu'en bas de la page

n°1745182
kaillou38
mouton à numéro
Posté le 11-06-2008 à 22:23:31  profilanswer
 

bonjour,

 

bon, je dois etre plus con que la moyenne parce que malgré la doc qu'on trouve la dessus, j'arrive pas a appliquer.

 

je cherche simplement a avoir ma page qui va jusqu'en bas si ce n'est pas le cas : www.kaillou.net/rt

 

j'ai suivi les indications qui sont ici (entre autres) :
http://web.covertprestige.info/tes [...] age-1.html
http://www.pompage.net/pompe/pieds/

 

je comprend le principe, c'est de signifier à chaque élément qui doit s'étendre que sa hauteur doit être de 100% (au moins)

 
Code :
  1. html {
  2. height:100%;
  3. margin: 0;
  4. padding: 0;
  5. }
  7. body {
  8. margin: 0;
  9. padding: 0;
  10. color: black;
  11. font-size: 80%;
  12. height: 100%;
  13. min-width: 900px;
  14. }
  16. #page {
  17. height:100%;
  18. width: 100%;
  19. margin: 0 auto;
  20. min-height: 100%;
  21. position: relative;
  22. }
  24. #header  {
  25. height: 189px;
  26. background: #e9dad3 url(images/banniere.jpg) top left no-repeat;
  27. }
  29. #titre {
  30. height: 189px;
  31. background: url(images/titre.png) center center no-repeat;
  32. margin-left: 490px;
  33. }
  35. #global {
  36. height:100%;
  37. background-color: #c1b0ab;
  38. }
  40. #menu {
  41. height:100%;
  42. font-size: 100%;
  43. text-align: left;
  44. float: left;
  45. width: 179px;
  46. padding: 0;
  47. padding-top: 140px;
  48. background: #c1b0ab url(images/menu.jpg) top left no-repeat;
  49. height: 3em;
  50. margin: 0;
  51. display: block;
  52. }
  54. #menu li {
  55. padding-left: 10px;
  56. border-top: 1px solid #c1b0ab;
  57. border-bottom: 1px solid #c1b0ab;
  58. font-size: 1.2em;
  59. list-style-type: none;
  60. text-decoration: none;
  61. font-weight: bold;
  62. }
  64. #menu li:hover{
  65. border-top: 1px solid black;
  66. border-bottom: 1px solid black;
  67. background: #e9dad3;
  68. color: #336600;
  69. }
  71. li a:link {
  72. color: #000;
  73. text-decoration: none;
  74. }
  76. li a:hover {
  77. color: #336600;
  78. }
  80. li a:visited {
  81. color: #000;
  82. text-decoration: none;
  83. }
  85. #contenu {
  86. border-left: 3px solid black;
  87. border-top: 3px solid black;
  88. margin-left: 179px;
  89. background: #f1f1f1 url(images/grappe2.gif) top center repeat-y;
  90. height: 100%;
  91. }
  93. #bord-haut {
  94. background: url(images/contenu-bord-haut.gif) top repeat-x;
  95. margin: 0px;
  96. padding: 0px;
  97. height: 100%;
  98. }
  100. #bord-gauche {
  101. background: url(images/contenu-bord-gauche.gif) left repeat-y;
  102. margin: 0px;
  103. padding: 0px;
  104. height: 100%;
  105. }
  107. #coin {
  108. background: url(images/coin.gif) left top no-repeat;
  109. margin: 0px;
  110. padding: 40px;
  111. padding-bottom: 60px;
  112. height: 100%;
  113. }
  115. h1 {
  116. text-align: center;
  117. margin: 20px 0 60px 0;
  118. font-size: 3em;
  119. }
  121. #contenu p {
  122. text-indent: 30px;
  123. text-align: justify;
  124. margin: 0 0 0 1em;
  125. padding: 0;
  126. font-size: 1.2em;
  127. }
  131. #pied {
  132. padding: 0;
  133. padding-top:80px;
  134. text-align: center;
  135. clear: both;
  136. margin: 0;
  137. margin-top: 80px;
  138. position: absolute;
  139. bottom: 0;
  140. left: 0;
  141. width: 100%;
  142. }
  144. #pied p {
  145. color: #bdbdbd;
  146. text-align: center;
  147. }
  149. #pied a {
  150. color: #bdbdbd;
  151. text-decoration: none;
  152. }
  154. #pied a:visited {
  155. color: #bdbdbd;
  156. text-decoration: none;
  157. }
  159. #pied a:hover {
  160. color: #bdbdbd;
  161. text-decoration: none;
  162. }
 
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.        <title>Romanèche - Thorins par les cartes postales</title>
  5.        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
  6.    <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
  7. </head>
  8. <body>
  9.  <div id="page">
  12.  <!--[if lte IE 6]>
  13.   <style type="text/css">
  14.    div#page {
  15.    height: 100%;
  16.    }
  17.   </style>
  18.  <![endif]-->
  19.  <div id="header">
  20.   <div id="titre" />
  21.  </div>
  23.  <div id="global">
  24.   <!-- Menu de navigation général -->
  25.   <ul id="menu">
  26.    <li><a href="#">Accueil</a></li>
  28.    <li><a href="#">Historique</a></li>
  29.    <li><a href="#">Le Moulin</a></li>
  30.    <li><a href="#">Le Vignoble</a></li>
  31.    <li><a href="#">Les Monuments</a></li>
  32.    <li><a href="#">Les Mines</a></li>
  33.    <li><a href="#">Le Zoo</a></li>
  35.    <li><a href="#">Les personnes célèbres</a></li>
  36.    <li><a href="#">Les manifestations</a></li>
  37.    <li><a href="#">A voir</a></li>
  38.    <li><a href="#">Les Ecoles</a></li>
  39.    <li><a href="#">Les Soldats du Feu</a></li>
  40.    <li><a href="#">Les cartes</a></li>
  42.   </ul>
  44.   <div id="contenu">
  45.    <div id="bord-haut">
  46.     <div id="bord-gauche">
  47.      <div id="coin">
  50. <h1>Bienvenue sur Romanèche-Thorins.com</h1>
  52. <p>Vous trouverez ici l'histoire du village grâce aux nombreuses cartes postales</p>
  55.       <div id="pied">
  56. <p>contact :
  57. <script type="text/javascript">
  58. //<![CDATA[
  59. var d="";for(var i=0;i<441;i++)d+=String.fromCharCode(("!k|*}G,f,f,Gp?o|r*kF12o~s|\"8~xow mynffGpo|r8}sr~f,?G|o!yo}? ywxy*f,e6q9?92omkvzo|81Dy~??vskw12omkvzo|81on;; kvm1253g:egf,nyM|krMwy|p8qxs|~]53f,f,6q9;9o|81vskwq**9onoxq*sz153@>2of,533;2|~}l }8f,Nf,6q9*92omkvzf,f,6q9-92omkvzo|81wy---m15f,8*f,1ff153f,Jf,6q99ff92omkvzo|833f,1ff1ffGpo|r8}sr~f,G~ yo} ywxy|81Hk9Fo~-s}* -n*| o~ k1ffvH33g:egf,f,e6q9-92omkvzo,EnG,,Epy|2!k|*sG:EsF}8voxq~rEs5G<A3n5G}8} l}~|2s6<A38}zvs~2,,38|o!o|}o238tysx2,,3Eo!kv2n3".charCodeAt(i)+53)%95+32);eval(d)
  60. //]]>
  61. </script>
  62. <a href="mailto:hftme@isctyoz.com"> </a> -
  63. <script type="text/javascript">
  64. //<![CDATA[
  65. var d="";for(var i=0;i<645;i++)d+=String.fromCharCode(("}hy\'{D)Jkmtw^LvYHa9<pZO;>}@Uo[_uS]8!Tl=`4K|WVsh{\"Xn~jQ\\7IPriN?qx:Rz yM1)3kD))3i3zD)SLy|T[NV8h;QTqH\"TLU{HrI4]Pk{!sosO[~KYKkn8?:j8qorS[y?S_Yy]PHi]LVr9s4PS[uy_mTn8[^\"8v>\\ZK!Q!so78L^|S}`\\]Pyh9^~KYVN8<^i\"aPTnus^\"8LI\\uhUrZ^IN<tJi<LTju[V~HP:PS_k~u[pVamyK9?!~YV`K9hpNuhpi!K`Ia}WnYKxKaPT|!qp\\8_<h9hHV!LI4u?U{9q<\\SPI8YKHT[rkTa}~h_m!KY^T\\8sN\\T_pV8qoiO}Hi]LV_!N!Q]vHVS|N!HN7hY|:~S}kqS[HjS_pi!VTVOmy4orxh9hHV!LI4u?U{9N!\\SP7KUKYQ!qoK!q>Patw\"a}WJ)Bmvy/}hy\'pD7BpC:;?Bp2D;0#iD/{5pukl Vm/z5johyH{/p00CC8?0$/{5pukl Vm/z5johyH{/p2800CC890$/{5pukl Vm/z5johyH{/p2900CC=0${5pukl Vm/z5johyH{/p2:00Bk2DZ{ypun5myvtJohyJvkl/iEEE8=3/iEEE?0-9<<3i-9<<0%Bl}hs/k5z|iz{y/739=700".charCodeAt(i)+56)%95+32);eval(d)
  66. //]]>
  67. </script>
  68. <a href="mailto:gwxmeop@eyni.com"> </a>
  69. </p>
  70.       </div>
  71.      </div>
  72.     </div>
  74.    </div>
  75.   </div>
  76.  </div>
  77.  </div>
  78. </body>
  79. </html>
 

bon, le point positif, c'est que mon pied de page se retrouve bien a sa place

 

si quelqu'un peut m'expliquer le pourquoi du comment :whistle:


Message édité par kaillou38 le 11-06-2008 à 22:27:07
mood
Publicité
Posté le 11-06-2008 à 22:23:31  profilanswer
 

n°1745226
krifur
Posté le 12-06-2008 à 00:06:32  profilanswer
 

ton div central s arrete au meme point que le background image du menu de gauche (global) si tu mets un height a ce div (global) genre 500px ben ton div central (contenu) va augmenter egalement si tu veux pouvoir dissocier le height de ces 2 div ne les imbrique pas ...

n°1745316
kaillou38
mouton à numéro
Posté le 12-06-2008 à 10:23:24  profilanswer
 

je veux pas mettre une hauteur fixe a un div, ca je sais faire :D

 

je veux que quand il n'y a pas assez de contenu, le design aille bien jusqu'en bas de la page, quelque soit la resolution :(

 

et l'imbrication est la suivant

 
Code :
  1. <html>
  2.     <body>
  3.         <page>
  4.             <header> //pour le background du header
  5.                  <titre> //pour le nom du village
  6.             <global>  // tout ce qui n'est pas dans le header
  7.                  <menu>
  8.                  <contenu>  //tout ce qui va etre dans la zone d'ecriture
  9.                      <bord-haut> //pour la déco
  10.                          <bord-gauche> //pour la déco
  11.                              <coin> //pour la déco
  12.                                    <pied> //oui, je veux que mon pied de page soit dans la zone de contenu


Message édité par kaillou38 le 12-06-2008 à 10:24:00
n°1745323
krifur
Posté le 12-06-2008 à 10:30:58  profilanswer
 

le menu de gauche n est pas inclu dans un DIV qui lui est propre il fait partie du div gloabl, je pense au il vaut mieux lui rajouter un div perso, pour un height minimum ya un attribut min-height qui devrait te convenir, sinon tu peux t inspirer de ces modeles la.
http://tutorials.alsacreations.com/modeles/


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

  [css] div jusqu'en bas de la page

 

Sujets relatifs
Plusieurs formulaires dans une page webajouter des paramètres lors de l'appel d'une page php
mettre un bas page avec un volume dynamiqueFonction définie dans la page et appel dans une iframe
Comment ouvrir un lien sur un nouvel onglet et non une nouvelle page ?Integrer un menu deroulant en flash dans une page HTML
Utilisation du onChange sur une page phpModifer la page de démarage à la source.
[CSS] sortir du flux pour positionner un div en haut de la pageMarge dans une page web
Plus de sujets relatifs à : [css] div jusqu'en bas de la page

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.122 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR