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
[HTML] pobierz, plaintext 
  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; }
[HTML] pobierz, plaintext