[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>
  3. <style>
  4. .cadre{
  5. float:left;
  6. height:136px;
  7. width:136px;
  8. border:1px #999999 solid;
  9. margin-left:10px;
  10. margin-right:10px;
  11. margin-bottom:20px;
  12. text-align:center;
  13. cursor:pointer;
  14. }
  15. #contener{
  16. clear: left;
  17. background-color:yellow;
  19. border:1px red solid;
  20. width:100%
  21. }
  22. </style>
  23. </head>
  25. <body>
  26. <div id="contener">&nbsp;
  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. <div class="cadre">&nbsp;</div>
  37. <div class="cadre">&nbsp;</div>
  38. <div class="cadre">&nbsp;</div>
  39. ...
  40. </div>
  41. </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