[css] div jusqu'en bas de la page

div jusqu'en bas de la page [css] - HTML/CSS - Programmation

Marsh Posté le 11-06-2008 à 22:23:31    

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
Reply

Marsh Posté le 11-06-2008 à 22:23:31   

Reply

Marsh Posté le 12-06-2008 à 00:06:32    

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

Reply

Marsh Posté le 12-06-2008 à 10:23:24    

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
Reply

Marsh Posté le 12-06-2008 à 10:30:58    

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/

Reply

Sujets relatifs:

Leave a Replay

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