Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] Rozciagajace sie okienko
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
R2D2
Witam! Napotkałem następujący problem.
Mam coś takiego w body:
  1. <div class="popup" style="visibility: visible">
  2. <div class="bg_white"></div>
  3. <div class="visible">
  4. <div class="window">
  5. <div class="top">
  6. <span class="left"></span>
  7. <a href="#">
  8. <span class="right"></span>
  9. </a>
  10. <span class="middle">
  11. Tytuł Popupa
  12. </span>
  13. </div>
  14. <div class="bottom">
  15. Zawartość!
  16. <div style="clear: both"></div>
  17. </div>
  18. </div>
  19. </div>


CSS dotyczacy tego kawalka:
  1. div.popup {
  2. width: 100%;
  3. padding-bottom: 100%;
  4. top: 0;
  5. position:fixed;
  6. _position:absolute;
  7. }
  8. div.bg_white {
  9. width: 100%;
  10. padding-bottom: 100%;
  11. _padding-bottom: 105%;
  12. z-index:2;
  13. top: 0;
  14. position:absolute;
  15. background: #808080;
  16. opacity:0.8;
  17. filter : alpha(opacity=80)
  18. }
  19. div.visible {
  20. z-index:3;
  21. width: 100%;
  22. position: absolute;
  23. margin: 0 auto;
  24. margin-top: 150px;
  25. _margin-top: 410px;
  26. }
  27. div.window {
  28. margin-left: auto;
  29. margin-right: auto;
  30. width: auto;
  31. max-width: 700px;
  32. _width: 450px;
  33. }
  34. .window div.top
  35. {
  36. width: 100%;
  37. height: 26px;
  38. }
  39. .window div.top span.left {
  40. width: 16px;
  41. height: 27px;
  42. float: left;
  43. background: url(../images/ba_l.gif) no-repeat;
  44. }
  45. .window div.top span.middle
  46. {
  47. height: 25px;
  48. margin-left: 16px;
  49. margin-right: 31px;
  50. display: block;
  51. _margin:0;
  52. _float: left;
  53. _width: 403px;
  54. border-top: 1px #f0cca3 solid;
  55. border-bottom: 1px #f0cca3 solid;
  56. background: #f58300;
  57. color: #ffffff;
  58. font-weight: bold;
  59. }
  60. .window div.top span.right
  61. {
  62. width:31px;
  63. height: 27px;
  64. display: block;
  65. float: right;
  66. cursor: pointed;
  67. background: url(../images/ba_r.gif) no-repeat;
  68. }
  69. .window div.bottom {
  70. width: 100% -2px;
  71. border: 1px #f0cca3 solid;
  72. background: #ecf6ff;
  73. border-top: 0px;
  74. clear: both;
  75. }


Chciałbym to tak napisać... By moje okienko rozciągało się proporcjonalnie do zawartości(w poziomie i pionie). Ktoś już walczył z podobnymi przypadkami ?
methyl
Dla IE: zoom: 1
Dla reszty: overflow:hidden
Pozdro!
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.