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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] : Plusieurs Div dans un Div conteneur

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[CSS] : Plusieurs Div dans un Div conteneur

n°1833789
jeremy13
Posté le 04-01-2009 à 19:42:37  profilanswer
 

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
 
++

mood
Publicité
Posté le 04-01-2009 à 19:42:37  profilanswer
 

n°1833801
Profil sup​primé
Posté le 04-01-2009 à 19:45:08  answer
 

même pb, suis intéressé.

n°1833805
FlorentG
Unité de Masse
Posté le 04-01-2009 à 19:46:52  profilanswer
 

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

n°1833808
Profil sup​primé
Posté le 04-01-2009 à 19:47:58  answer
 

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

n°1833811
jeremy13
Posté le 04-01-2009 à 19:49:25  profilanswer
 

nan le overflow:hidden ne marche pas...

n°1833812
FlorentG
Unité de Masse
Posté le 04-01-2009 à 19:49:56  profilanswer
 

C'est quoi qui marche pas ?

n°1833818
jeremy13
Posté le 04-01-2009 à 19:53:43  profilanswer
 

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 ?

n°1833822
FlorentG
Unité de Masse
Posté le 04-01-2009 à 19:59:26  profilanswer
 

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

n°1833823
jeremy13
Posté le 04-01-2009 à 20:03:48  profilanswer
 

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

n°1833824
FlorentG
Unité de Masse
Posté le 04-01-2009 à 20:05:02  profilanswer
 

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

Message cité 2 fois
mood
Publicité
Posté le 04-01-2009 à 20:05:02  profilanswer
 

n°1833831
jeremy13
Posté le 04-01-2009 à 20:28:08  profilanswer
 

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

n°1833965
jeremy13
Posté le 05-01-2009 à 12:17:49  profilanswer
 

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:  


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

  [CSS] : Plusieurs Div dans un Div conteneur

 

Sujets relatifs
Menu horizontal depliant en CSS : Bug sous IE7JMF - Plusieurs connexions -> Problemes de ports
Changer plusieurs images simultanément dans un tableauAvoir une fct unique pour plusieurs events avec paramètres différents
[VBA] Mise à jour macro dans plusieurs fichiers...Access - requete pour regrouper plusieurs champs en 1 seul
JLabel sur plusieurs lignesCoin arrondis en Css.
Problème alignement bloc CSS [terminé]Tableau plusieurs dimensions et chaine de caractères
Plus de sujets relatifs à : [CSS] : Plusieurs Div dans un Div conteneur

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

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