[CSS] : Plusieurs Div dans un Div conteneur

: Plusieurs Div dans un Div conteneur [CSS] - HTML/CSS - Programmation

Marsh Posté le 04-01-2009 à 19:42:37    

Bonjour,
 
je suis en train de faire mon site perso mais je rencontre un problème avec le CSS ; voici mon problème :  
J'ai un Div conteneur qui doit contenir :  
- un Header (la bannière)
- la liste des boutons (horizontal)
- le div centrale
- le footer
 
Malheureusement, la liste des div ne s'insère pas dans le conteneur, je suis obligé de mettre une hauteur, moi j'aimerai que la hauteur soit automatique...  
 
http://img237.imageshack.us/img237/350/capturery2.png
 
En rouge, vous avez le fond du conteneur.
 
Voici le code intéressant :  
 

Code :
  1. .div_globale
  2. {
  3. background-color: red;
  4.     position:absolute;
  5. left: 50%;
  6.     width: 700px;
  7.     margin-left: -350px; /* moitié de la largeur */
  8. height: 550px;
  9.     border: 2px solid #fc0;
  10. }


 

Code :
  1. .div_banniere
  2. {
  3. background-color: black;
  4.     position: absolute;
  5. padding-bottom: 25px;
  6. left: 50%;
  7.     width: 700px;
  8. height: 143px;
  9.     margin-left: -350px; /* moitié de la largeur */
  10.     border: 1px solid #000;
  11. }


 

Code :
  1. .div_bouton
  2. {
  3. background-color: yellow;
  4. position: absolute;
  5. margin-top: 143px;
  6. left: 50%;
  7. width: 700px;
  8. height: 30px;
  9. margin-left: -350px;
  10. border: 1px solid #000;
  11. }


 

Code :
  1. .div_pied
  2. {
  3. background-color: blue;
  4. position: absolute;
  5. margin-bottom: 5px;
  6. left: 50%;
  7. width: 700px;
  8. height: 30px;
  9. margin-left: -350px;
  10. }


 
http://img201.imageshack.us/img201/3718/codehtmlxj9.png
 
Donc pour résumer, j'aimerai ne pas spécifier une hauteur au conteneur mais que la hauteur soit ajusté à la hauteur totale de tous les div.
Merci d'avance pour votre aide, si ça peut vous aider j'ai le même problème que cette personne : http://www.webmaster-hub.com/lofiv [...] t6172.html
 
++

Reply

Marsh Posté le 04-01-2009 à 19:42:37   

Reply

Marsh Posté le 04-01-2009 à 19:45:08    

même pb, suis intéressé.

Reply

Marsh Posté le 04-01-2009 à 19:46:52    

Rien compris [:petrus dei]
 
Pour un overflow: hidden; sur le central ? Ou une div spacer ?

Reply

Marsh Posté le 04-01-2009 à 19:47:58    

ah non j'ai pas le même pb [:petrus75]

Reply

Marsh Posté le 04-01-2009 à 19:49:25    

nan le overflow:hidden ne marche pas...

Reply

Marsh Posté le 04-01-2009 à 19:49:56    

C'est quoi qui marche pas ?

Reply

Marsh Posté le 04-01-2009 à 19:53:43    

FlorentG > le fait que si je ne spécifie pas de height dans le conteneur, les div enfant ne s'insère pas le div parent...Enfin le fait de mettre height est une manière artificielle d'insérer les div enfant dans le div parent (conteneur). Je suis clair ?

Reply

Marsh Posté le 04-01-2009 à 19:59:26    

Si tu mets un height, ça bloque la taille, donc ça devrait pas l'faire pour les divs enfants trop grandes.
 
A moins que tu n'utilise IE6-caca

Reply

Marsh Posté le 04-01-2009 à 20:03:48    

justement je ne veux pas bloquer la taille, je veux que la hauteur de mon conteneur soit dynamique

Reply

Marsh Posté le 04-01-2009 à 20:05:02    

Ben si ça marche pas avec un overflow hidden, c'est qu'il y a un problème quelque part

Message cité 2 fois
Reply

Marsh Posté le 04-01-2009 à 20:05:02   

Reply

Marsh Posté le 04-01-2009 à 20:28:08    

FlorentG a écrit :

Ben si ça marche pas avec un overflow hidden, c'est qu'il y a un problème quelque part


 
Oui il doit y avoir un autre problème car j'ai ça avec un overflow:hidden :  
 
http://img528.imageshack.us/img528/8416/overflowmc2.png

Reply

Marsh Posté le 05-01-2009 à 12:17:49    

FlorentG a écrit :

Ben si ça marche pas avec un overflow hidden, c'est qu'il y a un problème quelque part


 
Voili j'ai résolu mon problème, en fait il fallait bien rajouter le overflow:hidden dans le conteneur mais mon erreur était que mes div enfant étaient en position:absolute alors qu'elle devaient être en position:relative... :pt1cable:  
 

Code :
  1. .div_globale
  2. {
  3. background-color: blue;
  4.         position:absolute;
  5. left: 50%;
  6.         width: 700px;
  7. overflow: hidden;
  8.         margin-left: -350px; /* moitié de la largeur */
  9. height: auto;
  10.         border: 2px solid #0f0;
  11. }
  12. .div_banniere
  13. {
  14. background-color: black;
  15.         position: relative;
  16. padding-bottom: 2px;
  17. left: 50%;
  18.         width: 700px;
  19. overflow: hidden;
  20. height: 143px;
  21.         margin-left: -350px; /* moitié de la largeur */
  22.         border: 0 solid #f00;
  23. }
  24. .div_bouton
  25. {
  26. background-color: yellow;
  27. position: relative;
  28. margin-top: 143px;
  29. left: 50%;
  30. width: 700px;
  31. height: 30px;
  32. margin-left: -350px;
  33. margin-top: 0;
  34. border: 0 solid #0f0;
  35. }
  36. .div_centrale
  37. {
  38. background-color: white;
  39. position: relative;
  40. margin-top: 0;
  41. height: auto;
  42. left: 50%;
  43. width: 700px;
  44. margin-left: -350px;
  45. border: 0 solid #000;
  46. overflow: hidden;
  47. }
  48. .div_pied
  49. {
  50. background-color: black;
  51.         position: relative;
  52. padding: 5px;
  53. margin:0;
  54. left: 50%;
  55.         width: 700px;
  56. overflow: hidden;
  57. height: 10px;
  58.         margin-left: -350px;
  59.         border: 0 solid #f00;
  60. font-style: Arial;
  61. font-size: 10px;
  62. text-align: center;
  63. font-weight: 550;
  64. color: white;
  65. }


 
Merci pour votre aide !!  :hello:  

Reply

Sujets relatifs:

Leave a Replay

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