[CSS] div contener qui s'adapte au contenu

div contener qui s'adapte au contenu [CSS] - HTML/CSS - Programmation

Marsh Posté le 21-07-2008 à 13:55:07    

Bonjour,
voila j'ai une succesion les un a coté des autres de divs carrés (class="cadre" ) ...jusque la tout marche !
sauf que je voudrais les imbriquer dans un div "contener" mais ça semble fonctionner sous IE mais pas sous firefox, sans doute a cause des floats qui sont sur les carrés
je ne sais pas trop comment m'y prendre pour remédier à cela

Code :
  1. <html ><head>
  2. <style>
  3. .cadre{
  4. float:left;
  5. height:136px;
  6. width:136px;
  7. border:1px #999999 solid;
  8. margin-left:10px;
  9. margin-right:10px;
  10. margin-bottom:20px;
  11. text-align:center;
  12. cursor:pointer;
  13. }
  14. #contener{
  15. clear: left;
  16. background-color:yellow;
  17. border:1px red solid;
  18. width:100%
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div id="contener">&nbsp;
  24. <div class="cadre">&nbsp;</div>
  25. <div class="cadre">&nbsp;</div>
  26. <div class="cadre">&nbsp;</div>
  27. <div class="cadre">&nbsp;</div>
  28. <div class="cadre">&nbsp;</div>
  29. <div class="cadre">&nbsp;</div>
  30. <div class="cadre">&nbsp;</div>
  31. <div class="cadre">&nbsp;</div>
  32. <div class="cadre">&nbsp;</div>
  33. <div class="cadre">&nbsp;</div>
  34. <div class="cadre">&nbsp;</div>
  35. <div class="cadre">&nbsp;</div>
  36. ...
  37. </div>
  38. </body></html>


 
merci de votre aide


Message édité par attentio le 21-07-2008 à 14:15:20
Reply

Marsh Posté le 21-07-2008 à 13:55:07   

Reply

Marsh Posté le 21-07-2008 à 14:17:53    

Code :
  1. #contener{
  2. background-color:yellow;
  3. border:1px red solid;
  4. zoom:1;
  5. overflow:hidden;
  6. _overflow:visible;
  7. }

Reply

Marsh Posté le 21-07-2008 à 14:37:28    

super... merci pour ton aide ... ca semble marcher
petite question ... a quoi sert le zoom ?

Reply

Marsh Posté le 21-07-2008 à 15:02:02    

avec l'overflow:hidden j'applique un contexte de formatage en CSS, ca permet au conteneur de garder une véritable hauteur, même si tous ses éléments enfants sont flottés.  
Ensuite l'overflow:hidden, ne fonctionne pas sous IE6, mais le contexte de formatage s'applique à partir du moment ou on force le "hasLayout" (concept IE), ce hasLayout s'applique dès qu'on met un width (autre que auto), un float, un display:inline-block, ou une propriété qui ne fait rien, zoom avec la valeur 1

Reply

Sujets relatifs:

Leave a Replay

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