[css] hauteur de calque adaptive

hauteur de calque adaptive [css] - HTML/CSS - Programmation

Marsh Posté le 13-12-2005 à 11:15:33    

bonjour,
voila j'ai un calque contener qui contient deux calque (bloc_1 et bloc_2), qui doivent se chevaucher.
l'un est en position relative et l'autre en absolu et je voudrais que la hauteur de ce calque contener s'adapte a la hauteur de l'un ou l'autre calque.
mais actuellement il s'adapte uniquement a celui qui en en position relative (la hauteur du bloc_1 en position absolu est completement ignorée).
donc ma question est comment faire pour que ce calque contener s'adapte a la fois, a l'un ou l'autre calque qu'il contient et que ces deux calque puissent se chevaucher ?
 
voici le code de ma page actuellement :  

Code :
  1. <html>
  2. <head>
  3. <style>
  4. body {text-align: center;margin-bottom : 0;margin-left : 0;margin-right : 0;margin-top : 0;}
  5. #global{z-index:1;
  6. width:100%;
  7. text-align:center;
  8. position:relative;
  9. top:0;left:0;
  10. border:0px solid black;
  11. background-color:red;
  12. }
  13. #contener{
  14. position:relative;
  15. text-align:left;
  16. z-index:2;
  17. margin-left: auto;
  18. margin-right: auto;
  19. width:550px;
  20. height:100%;
  21. border:0px solid black;
  22. background-color:purple;
  23. }
  24. #bloc_1{
  25. z-index:2;
  26. position:absolute;
  27. width:180px;
  28. left:0px;
  29. top:0px;
  30. height:100%;
  31. background-color:yellow;
  32. }
  33. #bloc_2{
  34. z-index:3;
  35. position:relative;
  36. width:80px;
  37. margin-top:170px;
  38. margin-left:20px;
  39. background-color:orange;
  40. }
  41. </style>
  42. </head></body>
  43. <div id="global">
  44. <div id="contener">
  45. <div id="bloc_1">
  46. 1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1<BR>1
  47. </div>
  48. <div id="bloc_2">
  49. 2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>
  50. </div></div></div>
  51. </body></html>


testé uniquement sous IE
 
merci de votre aide

Reply

Marsh Posté le 13-12-2005 à 11:15:33   

Reply

Marsh Posté le 15-12-2005 à 13:22:25    

position:absolut  = positioné en dehors de tous les blocs.
Donc il n'est plus affiché dans le bloc qui le contient au niveau html.
Donc il ne joue plus du tout sur la taille du bloc en question.
 
Donc pour résoudre ton probléme, il va te faloir mettre ton élément en position relative.

Reply

Sujets relatifs:

Leave a Replay

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