mise en page à l'aide de div

mise en page à l'aide de div - HTML/CSS - Programmation

Marsh Posté le 17-07-2007 à 21:11:32    

Bonjour,
 
je ne sais pas si je suis dans la bonne rubrique, dites moi si je dois changer.
 
je suis en train de réaliser un site perso, où sera regroupé plusieurs sujet (memento programmation, carte postale ancienne, galerie de photo, ma généalogie ajout de rubrique au fur et à mesure).
 
j'ai un souci concernant la mise en page, certaine page ne font pas la hauteur de l'ecran quand elle ne sont pas assez remplie.  
comment faire pour forcé la hauteur de la page sur la hauteur de l'écran.
 
je gère la mise en page à l'aide de <div>
 
Voilà comment sont placés mes <div>
 
Code :
 

Code :
  1. <div id="conteneur">
  2.        <div id="entete">
  3.        </div>
  4.      
  5.        <div id="contenupage">
  6.          <div id="menugauche"></div>
  7.          <div id="menudroite"></div>
  8.          <div id="milieu"></div>
  9.        </div>
  10.      
  11.        <div id="pied">
  12.        </div>
  13.       </div>


 
 
style css des <div>

Code :
  1. div#conteneur
  2. {
  3. width: 1024px ;
  4. height:inherit;
  6. margin: 0 auto ;
  7. text-align: left ;
  8. /*border: 1px solid #44526B ;*/
  9. border-left:1px solid #44526B;
  10. border-right:1px solid #44526B;
  11. background: #D7DDE6 ;
  12. }
  13. div#entete
  14. {
  15. height: 100px ;
  16. margin: 0 ;
  17. background-color: #C5C8D6;/*D6*/
  18. }
  20. p#entete2
  21. {
  22. height: 100px ;
  23. margin: 0 ;
  24. background: url(../img/haut.jpg) no-repeat center top ;
  25. }
  26. p#pied {
  27. margin: 0 ;
  28. padding-right: 10px ;
  29. line-height: 30px ;
  30. text-align: center ;
  31. color:#000000;
  32. font-family:Verdana;
  33. font-size:11px;
  34. background-color: #C5C8D6;
  35. }
  36. div#contenu
  37. {
  38. padding: 0px 0px 0px 0px ;
  39. /* background: url(bg_page.gif) no-repeat 15px 15px ;*/
  40. background: #D7DDE6;/*D7DDE6*/
  41. vertical-align:top; 
  43. /*height:800px;*/
  44. }
  46. div#milieu_gauche {
  47. float: left;
  48. width: 140px;
  49. background-color: #D7DDE6;
  51. height:inherit;
  52. }  
  53. div#milieu_contenu {
  54. height:inherit;
  56. margin-top: 0px;
  57. margin-left: 140px;
  58. margin-right: 140px;   
  59. border-left:1px solid #44526B;
  60. border-right:1px solid #44526B;
  61. background-color: #FFFFFF;
  62. vertical-align:top; 
  63. }
  64. div#milieu_droite {
  65. float: right;
  66. width: 140px;
  67. background-color: #D7DDE6;
  69. height:inherit;
  70.   
  71. }


 
 
 
 
voici l'adresse rambeaux.damien.free.fr
 
 
de plus, n'étant pas du tout graphiste, j'aimerais avoir vos avis sur ce que je pourrais réalisé niveau graphisme sur la sur la bande en haut.
 
merci

Reply

Marsh Posté le 17-07-2007 à 21:11:32   

Reply

Marsh Posté le 17-07-2007 à 21:54:43    

height 100%; :??:


Message édité par Profil supprimé le 17-07-2007 à 21:54:50
Reply

Marsh Posté le 17-07-2007 à 21:58:58    

J'ai essayé de le mettre un peu partout, mais ca ne change rien.
 
les height : inherit; sont aussi un test, si je les enleve ca ne change rien.
 
dans le div "contenu" j'avais mis un height : 800px comme ça, ça fonctionne, mais je trouve que ce n'est pas propre.

Reply

Marsh Posté le 17-07-2007 à 23:23:29    

ça se fait pas ;)

Reply

Marsh Posté le 18-07-2007 à 07:57:14    

Ca ne se fait effectivement pas
 
Le mieux est de laisser les colonnes telles quelles, avec la hauteur qu'elles ont naturellement. Au mieux on peut tricher avec un faux-column pour faire style elles ont la même taille.
 
Ou alors t'es roots, t'as pas peur, t'es un dur, et t'ose faire un :

Code :
  1. #contenupage {
  2.   overflow: hidden;
  3. }
  4. #menugauche, #menudroite, #milieu {
  5.   padding-bottom: 32767px;
  6.   margin-bottom: -32767px;
  7. }


Mais attention, c'est explosif...

Reply

Sujets relatifs:

Leave a Replay

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