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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [css] hauteur de calque adaptive

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[css] hauteur de calque adaptive

n°1265321
attentio
Posté le 13-12-2005 à 11:15:33  profilanswer
 

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

mood
Publicité
Posté le 13-12-2005 à 11:15:33  profilanswer
 

n°1267202
omega2
Posté le 15-12-2005 à 13:22:25  profilanswer
 

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.


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

  [css] hauteur de calque adaptive

 

Sujets relatifs
[CSS] Problème hauteur d'un bloc dans IE[Javascript] longueur de Calque dynamique
Span : display none qui "prend de la hauteur" sous IE.[CSS] probleme hauteur de cadre
Problème Css calque sous dreamweaverretour chariot sur un calque
Div de 1px de hauteur[Firefox] Hauteur background image qui ne s'allonge pas [edit]
[css]Opéra hauteur 100% en absoluDonner la même hauteur à deux div
Plus de sujets relatifs à : [css] hauteur de calque adaptive


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