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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Div central extensible

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Div central extensible

n°1907859
laurent0
Posté le 23-07-2009 à 10:36:14  profilanswer
 

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
mood
Publicité
Posté le 23-07-2009 à 10:36:14  profilanswer
 

n°1907895
Pascal le ​nain
Posté le 23-07-2009 à 11:41:27  profilanswer
 

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
n°1907902
laurent0
Posté le 23-07-2009 à 11:56:34  profilanswer
 

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
n°1907906
Pascal le ​nain
Posté le 23-07-2009 à 12:01:38  profilanswer
 

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
n°1908080
gatsu35
Blablaté par Harko
Posté le 23-07-2009 à 18:22:58  profilanswer
 

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
n°1908218
Pascal le ​nain
Posté le 24-07-2009 à 10:39:45  profilanswer
 

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

Message cité 1 fois
n°1908242
gatsu35
Blablaté par Harko
Posté le 24-07-2009 à 11:20:16  profilanswer
 

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
n°1908253
laurent0
Posté le 24-07-2009 à 11:59:26  profilanswer
 

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

n°1908257
gatsu35
Blablaté par Harko
Posté le 24-07-2009 à 12:18:21  profilanswer
 

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
n°1908324
laurent0
Posté le 24-07-2009 à 14:55:19  profilanswer
 

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

mood
Publicité
Posté le 24-07-2009 à 14:55:19  profilanswer
 

n°1908329
gatsu35
Blablaté par Harko
Posté le 24-07-2009 à 15:12:39  profilanswer
 

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


---------------
Blablaté par Harko
n°1908336
laurent0
Posté le 24-07-2009 à 15:16:23  profilanswer
 

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!

n°1908377
gatsu35
Blablaté par Harko
Posté le 24-07-2009 à 15:51:05  profilanswer
 

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
n°1908746
laurent0
Posté le 27-07-2009 à 09:52:52  profilanswer
 

merci :)


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

  Div central extensible

 

Sujets relatifs
Positionnement de DIVDIV rebelle
Hauteur du site extensible[résolu] Div en overflow:auto, garder le focus en bas ?
[RESOLU]Affichage DIV sur place dispo avec ascensseur[batch] rapatrier automatiquement vers un serveur central des données
Menu en DIV (id ou class ?)Espace sous Div avec IE7
Comment ne charger qu'un DIV en cliquant sur un lien du menu ?Faire un titre avec fond extensible
Plus de sujets relatifs à : Div central extensible

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

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