Div central extensible

Div central extensible - HTML/CSS - Programmation

Marsh Posté le 23-07-2009 à 10:36:14    

Bonjour, je ne trouve pas la solution à ce que je souhaite réaliser.
Je voudrai que mon site prenne toute la largeur de la page.
Sur mon site, j'ai un menu en colonne à gauche et un menu en colonne à droite, de 200px chacun.
Je voudrai que la div central s'étende en fonction de la place restant entre ces 2 menus.
Voici mon code.
 

Code :
  1. <div id="Partie2">
  3. <div id="Section4">Colonne gauche
  5. </div>
  7. <div id="Section5">Contenu
  9. </div>
  11. <div id="Section6">Colonne droite
  13. </div>
  15. </div>


 

Code :
  1. #Partie2{ /* main */
  2.    float: left;
  3.    border: 2px dotted yellow;
  4.    width: 100%;
  5.    }
  6. #Section4{ /* Colonne gauche */
  7.    float: left;
  8. width: 100px;
  10.    margin: 0 0 1.2em;
  11.    border: 1px dashed silver; }
  13. #Section5{ /* Contenu */
  15. padding: 10px 20px;
  16.     border: 1px dashed silver;
  17. width: 100%;
  18. float: left;
  19. }
  21. #Section6{ /* Colonne droite */
  23. float: right;
  24. width: 100px;
  25.    margin: 0 0 1.1em;
  27.    background-color: #eee; border: 1px dashed silver; }


 
Merci d'avance pour votre aide :)


Message édité par laurent0 le 23-07-2009 à 10:36:43
Reply

Marsh Posté le 23-07-2009 à 10:36:14   

Reply

Marsh Posté le 23-07-2009 à 11:41:27    

Hello,
 
Retire le 'width: 100%;' de #Section5.
 
C'est à cause du float que ca merde.
Actuellement tu lui demande de prendre toute la largeur du conteneur.
Alors évidement les barres de gauche et de droite sont obligé de passer à la ligne.  ;)


Message édité par Pascal le nain le 23-07-2009 à 11:52:46
Reply

Marsh Posté le 23-07-2009 à 11:56:34    

Merci pour ton aide!  
 
J'ai modifié, comme tu m'as dit mais lorsque le contenu de la section central est trop large, le menu de droite est décalé en dessous.  
Y a t-il une fonction css pour qu'il se mette toujours à droite du contenu et que le contenu prenne l'espace libre entre les 2 menus en fonction de la largeur de l'écran?
Et je n'ai pas trop envie d'utilisé de position absolue...
 
Merci d'avance


Message édité par laurent0 le 23-07-2009 à 11:56:49
Reply

Marsh Posté le 23-07-2009 à 12:01:38    

Je n'ai pas de solution a te proposer.
La plupart des sites n'ont qu'une barre a gauche ou a droite, ou pas de barre du tout.
Ceux qui en ont des deux cotés utilisent un tableau, mais c'est un peu crade (exemple : analyse la mise en page de http://www.phpdebutant.org/)


Message édité par Pascal le nain le 23-07-2009 à 12:02:06
Reply

Marsh Posté le 23-07-2009 à 18:22:58    

contexte de formatage power

Code :
  1. <div id="Partie2">
  2. <div id="Section4">Colonne gauche
  3. </div>
  4. <div id="Section6">Colonne droite
  5. </div>
  6. <div id="Section5">Contenu
  7.  tu verras je suis bien centré sans dépasser et je m'etends sur toute la page :D
  8. </div>
  10. </div>
  12. <style>
  13. #Partie2 {overflow:hidden; zoom:1;}
  14. #Section4 {float:left; width:100px; }
  15. #Section6 {float:right; width:100px;}
  16. #Section5 {overflow:hidden; zoom:1;background:blue;}
  17. </style>
 
Pascal le nain a écrit :

Je n'ai pas de solution a te proposer.
La plupart des sites n'ont qu'une barre a gauche ou a droite, ou pas de barre du tout.
Ceux qui en ont des deux cotés utilisent un tableau, mais c'est un peu crade (exemple : analyse la mise en page de http://www.phpdebutant.org/)


le code HTML de ce site est juste une horreur à ne pas imiter


Message édité par gatsu35 le 23-07-2009 à 18:23:58

---------------
Blablaté par Harko
Reply

Marsh Posté le 24-07-2009 à 10:39:45    

héhé joli ;)
J'avais pas pensé à jouer sur l'overflow.

Message cité 1 fois
Reply

Marsh Posté le 24-07-2009 à 11:20:16    

Pascal le nain a écrit :

héhé joli ;)
J'avais pas pensé à jouer sur l'overflow.


jouer sur le contexte de formatage :o, c'est l'overflow qui entraine le contexte de formatage


---------------
Blablaté par Harko
Reply

Marsh Posté le 24-07-2009 à 11:59:26    

je n'ai qu'une chose à dire magnifique. je désespérais et n'avais aucune envie de tout faire avec des tableaux :)
par contre encore une petite question, que signifie zoom:1???
 
Un grand merci à vous

Reply

Marsh Posté le 24-07-2009 à 12:18:21    

c'est une propriété propre à IE6 et IE7 qui permet d'activer le haslayout sur les éléments HTML, et lorsqu'on active le haslayout, le contexte de formatage s'applique sur ces éléments.


---------------
Blablaté par Harko
Reply

Marsh Posté le 24-07-2009 à 14:55:19    

Je me suis réjouis un peu trop vite... sous firefox, rien ne s'affiche...?

Reply

Marsh Posté le 24-07-2009 à 14:55:19   

Reply

Marsh Posté le 24-07-2009 à 15:12:39    

montre tout ton code stp, code HTML et CSS, merci


---------------
Blablaté par Harko
Reply

Marsh Posté le 24-07-2009 à 15:16:23    

Voici, htlm et css
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <link href="css/template.css" rel="stylesheet" type="text/css" />
  7. </head>
  8. <body>
  9. <div id="Partie1">
  11. <div id="top">top
  13. </div>
  14. <div id="breadcrumbs">breadcrumbs</div>
  15. </div>
  17. <div id="Partie2">
  18. <div id="Section1">Colonne gauche </div>
  20. <div id="Section3">Colonne droite</div>
  22. <div id="Section2">Contenu</div>
  24. </div>
  26. <div id="Partie3">
  28. <div id="footer">footer</div>
  29. </div>
  31. </body></html>


 

Code :
  1. body{
  2.    font-size: 12px;
  3.    font-family: Helvetica,Arial,sans-serif;
  4.    margin: 0 auto;
  5. }
  7. #Partie1{ /* header */
  8.    float: left;
  9.    width: 100%;
  11. }
  13. #top{ /* En-tête */
  14.    float: left;
  15.    width: 100%;
  16.    height:120px; 
  17.    background-image:url(../images/head.jpg);
  18.    background-repeat:no-repeat;
  19.    background-position:left ;
  20.    margin: 0;
  21. }
  23. #breadcrumbs{ /* Breadcrumbs */
  25. width: 100%;
  26. overflow: hidden;
  27. height:25px;
  28. font-family: Verdana;
  29. font-size: 12px;
  30. background-color:#F19A80;
  31. font-weight: bold;
  32. text-align: center;
  33. vertical-align: center;
  34. }
  36. #Partie2{ /* Partie principale */
  37. overflow:hidden;
  38. zoom:1;
  39.  
  40.    }
  42. #Section1{ /* Colonne gauche */
  43.    float: left;
  44. width: 179px;
  45. background-color:#6D4F4B;
  46. height:400px; 
  47.     background-image:url(../images/background_menu_left.gif);
  48.     background-repeat:no-repeat;
  49.     background-position:left top;
  52. }
  54. #Section2{ /* Contenu */
  56. overflow:hidden;
  57. zoom:1;
  58.     margin: 0 auto;
  59. background-image:url(../images/background_centre.gif);
  60. background-position:left top;
  61. height:400px;
  62. border-left: solid 1px #F19A80;
  63. border-right: solid 1px #F19A80;
  64. }
  66. #Section3{ /* Colonne droite */
  68. float: right;
  69. width: 180px;
  70. background-color:#6D4F4B;
  71. vertical-align: top;
  72. height:400px;
  73. }
  75. #Partie3{ /* Pied */
  76.    clear:both;
  77.    background-color: #red;
  78. }
  80. #footer{ /* Pied */
  82.    background-color: #red;
  83.    }
  84.  
  85. img {
  86. border: none
  87. }


 
Un grand merci pour votre aide!

Reply

Marsh Posté le 24-07-2009 à 15:51:05    

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <style type="text/css" media="screen">
  5. body{
  6.    font-size: 12px;
  7.    font-family: Helvetica,Arial,sans-serif;
  8.    margin: 0 auto;
  9. }
  10. #Partie1{ /* header */
  11. }
  12. #top{ /* En-tête */
  13.    height:120px;
  14.    background-image:url(../images/head.jpg);
  15.    background-repeat:no-repeat;
  16.    background-position:left ;
  17.    margin: 0;
  18. }
  19. #breadcrumbs{ /* Breadcrumbs */
  20.  overflow: hidden;
  21.  height:25px;
  22.  font-family: Verdana;
  23.  font-size: 12px;
  24.  background-color:#F19A80;
  25.  font-weight: bold;
  26.  text-align: center;
  27.  vertical-align: center;
  28. }
  29. #Partie2{ /* Partie principale */
  30.  overflow:hidden;
  31.  zoom:1;
  32. }
  33. #Section1{ /* Colonne gauche */
  34.     float: left;
  35.  width: 179px;
  36.  background-color:#6D4F4B;
  37.  height:400px;
  38.     background-image:url(../images/background_menu_left.gif);
  39.     background-repeat:no-repeat;
  40.     background-position:left top;
  41. }
  42. #Section2{ /* Contenu */
  43.  overflow:hidden;
  44.  zoom:1;
  45.     margin: 0 auto;
  46.  background-image:url(../images/background_centre.gif);
  47.  background-position:left top;
  48.  height:400px;
  49.  border-left: solid 1px #F19A80;
  50.  border-right: solid 1px #F19A80;
  51. }
  52. #Section3{ /* Colonne droite */
  53.  float: right;
  54.  width: 180px;
  55.  background-color:#6D4F4B;
  56.  vertical-align: top;
  57.  height:400px;
  58. }
  59. #Partie3{ /* Pied */
  60.    clear:both;
  61.    background-color: #red;
  62. }
  63. #footer{ /* Pied */
  64.    background-color: #red;
  65.    }
  67. img {
  68. border: none
  69. }
  70. </style>
  71. </head>
  72. <body>
  73. <div id="Partie1">
  74. <div id="top">top</div>
  75. <div id="breadcrumbs">breadcrumbs</div>
  76. </div>
  77. <div id="Partie2">
  78. <div id="Section1">Colonne gauche </div>
  79. <div id="Section3">Colonne droite</div>
  80. <div id="Section2">Contenu</div>
  81. </div>
  82. <div id="Partie3">
  83. <div id="footer">footer</div>
  84. </div>
  85. </body>
  86. </html>
 

je ne vois vraiment pas pourquoi tu fous sur le #top un float:left; width:100%; ça sert à rien à part créer des problèmes


Message édité par gatsu35 le 24-07-2009 à 15:51:52

---------------
Blablaté par Harko
Reply

Marsh Posté le 27-07-2009 à 09:52:52    

merci :)

Reply

Sujets relatifs:

Leave a Replay

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