Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS]Bezwzględne pozycjonowanie
lobopol
post
Post #1





Grupa: Zarejestrowani
Postów: 1 729
Pomógł: 346
Dołączył: 4.04.2009

Ostrzeżenie: (0%)
-----


Próbuje dodać na stronie wtyczkę lightbox (jquery), ale mam proble z poprawnym wyświetleniem zdjęcia na środku przeglądarki, tak aby element był niezależny od reszty divów (strona jest bardzo szeroka). Na standardowym css dodanym do plugina zdjęcie wyświetla mi się poniżej wszystkich divów
css
  1. @charset "utf-8";
  2. body {
  3. font: 100% Verdana, Arial, Helvetica, sans-serif;
  4. background: #666666;
  5. margin: 0;
  6. padding: 0;
  7. text-align: center;
  8. color: #000000;
  9.  
  10. }
  11. #container {
  12. width:4000px;
  13. margin: 0 auto;
  14. text-align: left; /
  15. }
  16. #left{
  17. float:left;
  18. }
  19. #top-left{
  20. height:2000px;
  21. width:2000px;
  22. background: #09F;
  23. }
  24. #bottom-left{
  25. height:2000px;
  26. width:2000px;
  27. background: #999;
  28. }
  29.  
  30. #right{
  31. float:right;
  32. }
  33. #top-right{
  34. height:2000px;
  35. width:2000px;
  36. background: #F00;
  37. }
  38. #bottom-right{
  39. height:2000px;
  40. width:2000px;
  41. background: #3C0;
  42. }
  43.  
  44. .inner{
  45. margin:0;
  46. padding:20px;
  47. width:980px;
  48. }
  49. .left-side{
  50. float:left;
  51. width:570px;
  52.  
  53. }
  54. #map{
  55. float:left;
  56. width: 400px;
  57. height: 400px;
  58. margin:10px 0 10px 10px;
  59. }
  60. #under-map{
  61. float:right;
  62. width: 400px;
  63. margin:0 0 10px 10px;
  64. }
  65. .menu{
  66. width:900px;
  67. display:inline-block;
  68. }
  69. li{
  70. list-style:none;
  71. float:left;
  72. padding:10px;
  73. }
  74. a, a:visited{
  75. text-decoration:none;
  76. color:#000;
  77. text-transform:uppercase;
  78. }
  79.  
  80. #gallery {
  81.  
  82. padding: 10px;
  83. width: 900px;
  84. }
  85. #gallery ul { list-style: none; }
  86. #gallery ul li { display: inline; }
  87. #gallery ul img {
  88. border: 5px solid #3e3e3e;
  89. border-width: 5px 5px 20px;
  90. }
  91. #gallery ul a:hover img {
  92. border: 5px solid #fff;
  93. border-width: 5px 5px 20px;
  94. color: #fff;
  95. }
  96. #gallery ul a:hover { color: #fff; }
  97.  
  98.  
  99. #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
  100. #lightbox img{ width: auto; height: auto;}
  101. #lightbox a img{ border: none; }
  102.  
  103. #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
  104. #imageContainer{ padding: 10px; }
  105.  
  106. #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
  107. #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
  108. #imageContainer>#hoverNav{ left: 0;}
  109. #hoverNav a{ outline: none;}
  110.  
  111. #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
  112. #prevLink { left: 0; float: left;}
  113. #nextLink { right: 0; float: right;}
  114. #prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
  115. #nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }
  116.  
  117. #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
  118.  
  119. #imageData{ padding:0 10px; color: #666; }
  120. #imageData #imageDetails{ width: 70%; float: left; text-align: left; }
  121. #imageData #caption{ font-weight: bold; }
  122. #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
  123. #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
  124.  
  125. #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 22.08.2025 - 15:22