[RESOLU] Probleme pour augmenter un DIV en fonction d'un autre

Probleme pour augmenter un DIV en fonction d'un autre [RESOLU] - HTML/CSS - Programmation

Marsh Posté le 25-09-2007 à 11:14:10    

Bonjour,  
 
Je suis en train de faire un site en SPIP et j'ai un problème au niveau de ma feuille de style : Je souhaiterai que mon bloc de menu s'allonge automatique jusqu'à mon pied de page.
 
Voilà deux screen-shot pour vous permettre de comprendre mon problème.
http://lousfaiences.free.fr/spip/f [...] r_menu.JPG
http://lousfaiences.free.fr/spip/forum/menu.JPG
 
Je souhaiterai donc que mon bloc #navigation s'allonge et aille toucher systèmatiquement le bloc #pied quelque soit la taille de mon contenu.
 
Voilà mon fichier html :  

Code :
  1. <body class="page_rubrique">
  2. <div id="page">
  4. [(#REM) Entete de la page + titre du site ]
  5. <INCLURE{fond=inc-entete}>
  7. <div id="conteneur">
  8.  [(#REM) Menu de navigation laterale ]
  9.  <div id="navigation">
  11.   [(#REM) Menu de navigation par rubriques ]
  12.   <INCLURE{fond=inc-rubriques}{id_rubrique}>
  14.   [(#REM) Menu de navigation mots-cles ]
  15.   <B_mots>
  16.   <div class="divers">
  17.    <h2 class="menu-titre"><:mots_clefs:></h2>
  18.    <ul>
  19.     <BOUCLE_mots(MOTS) {id_rubrique} {par titre}>
  20.     <li><a href="#URL_MOT" rel="tag">#TITRE</a></li>
  21.     </BOUCLE_mots>
  22.    </ul>
  23.   </div>
  24.   </B_mots>
  26.  </div><!-- fin navigation -->
  27.  [(#REM) Contenu principal : contenu de la rubrique ]
  28.  <div id="contenu">
  29. [(#REM) Fil d'Ariane ]
  30. <div id="hierarchie"><a href="#URL_SITE_SPIP/"><:accueil_site:></a><BOUCLE_ariane(HIERARCHIE){id_rubrique}> &gt; <a href="#URL_RUBRIQUE">[(#TITRE|couper{80})]</a></BOUCLE_ariane>[ &gt; (#TITRE|couper{80})]</div>
  32.   ...
  35.  </div><!-- fin contenu -->
  39. </div><!-- fin conteneur -->
  41. [(#REM) Pied de page ]
  42. <INCLURE{fond=inc-pied}{skel=#SQUELETTE}>
  44. </div><!-- fin page -->
  45. </body>


 
Le fichier inc-rubriques.html :  

Code :
  1. <B_rubriques>
  2. <div class="rubriques">
  3. <!--<h2 class="menu-titre"><:rubriques:></h2>-->
  4. <ul>
  5. <BOUCLE_rubriques(RUBRIQUES) {racine} {par num titre} {tout}>
  6.  <li>
  7.   <img src="#CHEMIN{puce_orange.png}" alt="puce" class="format_png" />  <a href="#URL_RUBRIQUE"[ class="(#EXPOSE)"]>[(#TITRE|couper{80})]</a>
  9.   <B_sous_rubriques>
  10.   <ul>
  11.    <BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par num titre, titre}>
  12.     <BOUCLE_test_expose(RUBRIQUES)
  13.      {id_enfant}>#EXPOSE{' '}
  14.     </BOUCLE_test_expose>
  15.     <li><img src="#CHEMIN{puce_bleue.png}" alt="puce" class="format_png" />
  16.      <a href="#URL_RUBRIQUE"[ class="(#EXPOSE)"]>
  17.       [(#TITRE|couper{80})]
  18.      </a>
  19.      <BOUCLE_re(BOUCLE_sous_rubriques)></BOUCLE_re>
  20.     </li>
  21.     </B_test_expose>
  22.    </BOUCLE_sous_rubriques>
  23.   </ul>
  24.   </B_sous_rubriques>
  26.  </li>
  27. </BOUCLE_rubriques>
  28. </ul>
  30. </div>
  31. </B_rubriques>


 
Et ma css :  

Code :
  1. body {
  2. background: #FFF;
  3. margin: 1.5em;
  4. text-align: center;
  5. font-size: 1em;
  6. color: #333;
  7. }
  9. /*  ------------------------------------------
  10. /*  Disposition a l'ecran des blocs principaux
  11. /*  ------------------------------------------ */
  12. #page {
  13. width: 48em;
  14. text-align: left;
  15. margin-left: auto;
  16. margin-right: auto;
  17. }
  19. #conteneur { width: 100%;}
  21. #conteneur #contenu {
  22. float: left;
  23. width: 27em;
  24. margin-left:2em;
  25. }
  27. #conteneur #navigation {
  28. float: left;
  29. width: 10.5em;
  30. text-align: center;
  31. /*min-height:Inherit;*/
  32. background-image:url(fond_menu_degrade.jpg);  
  33. }
  35. /* Entete */
  36. #entete {
  37. width: 100%;  
  38. height:80px;}
  39. #entete #nom_site_spip, #entete a .spip_logos {
  40. display: block;
  41. float: left;
  42. font-weight: bold;
  43. font-size: 1.5em; }
  44. #entete a { text-decoration: none; }
  45. #entete .formulaire_recherche { float: right; }
  48. /* Fil d'Ariane */
  49. #hierarchie {
  50. /*clear: both;*/
  51. margin-bottom: 2em;
  52. left:15em;
  53. font-size: 0.71em;/*0.77em KCA 23/09/07*/
  54. }
  56. /* Pied de page */
  57. #pied {
  58. clear: both;
  59. width: 100%;
  60. /*margin-top: 4em;*/
  61. border-top: 1px dotted #CCC;
  62. /*padding: 2px;*/
  63. text-align: center;
  64. background: #c7d8ec;  
  65. }
  66. #pied small { font-size: 0.77em;}
  67. #pied img { vertical-align: bottom; }
  69. /*  ------------------------------------------
  70. /*  Habillage des menus et de la navigation
  71. /*  ------------------------------------------ */
  73. /*  Habillage general des menus de navigation
  74. ---------------------------------------------- */
  75. .rubriques, .breves, .syndic, .forums, .divers {
  76. min-width: 10em;
  77. border: 0px solid #CCC;
  78. margin-bottom: 0em;
  79. font-size: 0.77em;
  80. }
  82. .menu-titre {
  83. /*padding: 0.2em 0.4em;*/
  84. /*border-bottom: 1px dotted #CCC;*/
  85. text-align: center;
  86. font-weight: bold;
  87. }
  89. #navigation p, .encart p { margin: 0; padding: 0.2em 0.7em; text-align: left;  }
  90. #navigation ul, .encart ul { margin: 0; padding: 0.2em 0; text-align: left; list-style: none; }
  91. #navigation li, .encart li { margin: 0; margin-top: 1em; padding: 0 0.7em; }
  93. /*  Des couleurs specifiques selon les types de menus
  94. ---------------------------------------------- */
  95. .rubriques { /*background: #002f55;*//*EAFFEA KCA 23/09/07 */
  96.   background-image:url(fond_menu_degrade.jpg);
  97.   color:#FFF; /*KCA*/
  98.   }
  99. .rubriques a{color:#FFF;
  100. text-decoration:none;}
  101. .rubriques a:hover{color:#B1540F;
  102. text-decoration:none;}
  103. .rubriques .menu-titre { background: #002f55; } /*F2FFF2 KCA 23/09/07*/
  106. /*  ------------------------------------------
  107. /*  Habillage du contenu
  108. /*  ------------------------------------------ */
  110. /*  Cartouche et titraille
  111. ---------------------------------------------- */
  112. .cartouche { margin-bottom: 2em;}
  114. .cartouche .titre {
  115. font-size: 1.27em;
  116. font-weight: bold;
  117. color: #B1540F; border-bottom: 1px dashed #C7D8EC;}
  118. #contenu .surtitre, #contenu .soustitre { font-size: 0.82em;color: #B1540F; }
  120. .cartouche .spip_logos {
  121. float: right;
  122. margin-left: 16px;
  123. margin-bottom: 16px; }
  125. .cartouche p { margin: 0; padding: 0; clear: left; }
  126. .cartouche small { font-size: 0.71em; }
  128. .cartouche .traductions { font-size: 0.71em; }
  129. .cartouche .traductions * { display: inline; }
  130. .cartouche .traductions li { padding-left: 1em; }
  133. /*  Mise en forme des textes du contenu
  134. ---------------------------------------------- */
  135. .chapo {
  136. margin-bottom: 1.5em;
  137. font-weight: bold;
  138. line-height: 1.4em; }
  140. .lien {
  141. background: #EEE;
  142. margin: 1em;
  143. margin-bottom: 1.5em;
  144. padding: 0.82em;
  145. border: 1px solid #CCC;
  146. font-size: 0.82em;
  147. font-weight: bold; }
  149. .texte { color: #000; font-size: 0.96em; }
  151. .ps, .notes {
  152. margin-top: 1.4em;
  153. padding-top: 2px;
  154. border-top: 2px solid #CCC; }
  155. .ps { font-size: 0.82em; }
  156. .notes { clear: both; font-size: 0.77em; }
  157. .ps h2, .notes h2 { font-size: 1.19em; font-weight: bold; }
  160. /*  Listes de documents joints (a un article ou une rubrique)
  161. ---------------------------------------------- */
  162. #documents_joints {
  163. margin-top: 1.4em;
  164. padding-top: 2px;
  165. border-top: 2px solid #CCC; }
  166. #documents_joints h2 { margin-bottom: 0.4em; font-size: 0.88em; font-weight: bold; }
  167. #documents_joints ul { margin: 0; padding: 0; list-style: none; }
  168. #documents_joints li { margin-bottom: 0.4em; }
  169. #documents_joints li .spip_doc_titre {}
  170. #documents_joints li .spip_doc_titre small { font-weight: normal; }
  171. #documents_joints li .spip_doc_descriptif {}
  173. /* Listes d'articles et extraits introductifs
  174. ----------------------------------------------- */
  175. .liste-articles ul { margin: 0; padding: 0; list-style: none; }
  176. .liste-articles li { margin-bottom: 1em; clear: both; color:#B1540F}
  178. .liste-articles li .titre {
  179. font-size: 1.03em;
  180. font-weight: bold;
  181. color:#B1540F;}
  183. .liste-articles li .spip_logos {
  184. float: right;
  185. margin-left: 16px;
  186. margin-bottom: 16px;
  187. clear: right; }
  189. .liste-articles li p { margin: 0; padding: 0; }
  191. .liste-articles li .enclosures {
  192. float: right;
  193. text-align: right;
  194. max-width: 60%;
  195. margin: 0; }
  197. .liste-articles li small {
  198. display: block;
  199. font-size: 0.71em; }
  201. .liste-articles li .texte {
  202. margin-top: 5px;
  203. margin-bottom: 2em;
  204. border: 1px solid #CCC;
  205. padding: 0.9em;
  206. font-size: 0.82em;
  207. line-height: 1.4em; }
  209. .pagination { font-size: 0.90em; }
  211. /*  ------------------------------------------
  212. /*  Habillage specifique du plan du site
  213. /*  ------------------------------------------ */
  215. .page_plan .cartouche { display: none; }
  217. .page_plan #contenu h2 {
  218. clear: both;
  219. background: #EEE;
  220. border: 1px solid #CCC;
  221. padding: 0.5em;
  222. margin-bottom: 1em;
  223. font-weight: bold;
  224. text-align: center; }
  226. .page_plan #contenu .contre-encart ul {
  227. display: block;
  228. clear: left;
  229. margin-top: 0;
  230. margin-bottom: 1em;
  231. padding-top: 0; }
  232. .page_plan #contenu .contre-encart li {}


 
J'ai essayé plusieurs choses au niveau du bloc #navigation
entre les min-height, height, mettre la valeur en %, je ne vois pas du tout comment je peux faire ça et surtout si c'est possible.
Merci de votre aide
 
Karine :hello:


Message édité par karinou le 25-09-2007 à 14:19:53
Reply

Marsh Posté le 25-09-2007 à 11:14:10   

Reply

Marsh Posté le 25-09-2007 à 14:20:24    

Problème résolu grâce à un tutoriel sur alsacreations :  
http://css.alsacreations.com/Faire [...] me-hauteur

Reply

Sujets relatifs:

Leave a Replay

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