Lightbox otwiera się do połowy


(IcyMat) #1

Witam.

Szukałem na forum rozwiązania mojego problemu, ale nie udało mi się go znaleźć. Jeśli taki temat już był prosiłbym o odpowiedniego linka i przepraszam za duplikację.

Otóż przygotowałem nową wersję mojej strony. Wszystko pięknie ładnie ale lightbox zakrywa tylko połowę strony (scren na końcu posta). Nie wiem co może być przyczyną dlatego wklejam mojego CSS'a i screna. HTML jest wporządku bo wczesniej działało, ale też podam fragment z galerią.

CSS

body {

	color: black;

	font-family: "Arial";

	background-color: white;

	font-size: 10pt;

	margin-right: auto;

	margin-left: auto;

	width: 1000px;

}


.them {

	color: #2F3699;

}


A:link {

	color: #2F3699;

	text-decoration: none;

	font-family: "Arial";

	font-size: 10pt;

}


A:visited {

	color: #2F3699;

	text-decoration: none;

	font-family: "Arial";

	font-size: 10pt;

}


A:active {

	color: #2F3699;

	text-decoration: none;

	font-family: "Arial";

	font-size: 10pt;

}


A:hover {

	color: #4D6DF3;

	text-decoration: none;

	font-family: "Arial";

	font-size: 10pt;

}


img {

	border: 0;

}


.imgavatar {

	border: 0;

	float: left;

}


h1 {

	color: #2F3699;

	font-size: 10pt;

	text-decoration: none;

	font-weight: normal;

}


td {

	border: 0px;

	font-size: 10pt;

}


.td {

	border: 0;

	background-image: url('../image/news1.jpg');

	background-repeat: repeat;

	background-position: center center;

	color: black;

	font-size: 12pt;

	width: 739px;

	height: 30px;

}


.td2 {

	border: 1px solid black;

	background-color: aqua;

	font-size: 10pt;

	width: 90%;

}


.tddownloadopis {

	border: 1px;

}


.tdmenu {

	border: 0px;

	border-style: dashed;

	border-color: #2F3699;

	background-image: url('../image/menu.jpg');

	color: black;

	font-size: 12pt;

	width: 203px;

	height: 25px;

}


.tdtresc {

	border: 0px;

	background-image: url('../image/tresc.png');

	background-repeat: repeat;

	background-position: left top;

	color: black;

	font-size: 12pt;

	width: 810px;

	height: 33px;

}


.tdkom {

	border: 0;

	background-image: url('../image/tresc.jpg');

	background-repeat: repeat;

	background-position: center center;

	color: black;

	font-size: 12pt;

	width: 500px;

	height: 26px;

}


.tdgalery {

	border: 0px;

	font-size: 10pt;

	width: 20%;

}


.tdkontakt {

	border: 0px;

	font-size: 10pt;

}


.ngl {

	border: 0;

	background-image: url('../image/tabelka/gl.jpg');

	background-repeat: repeat;

	background-position: right bottom;

	width: 3px;

	height: 4px;

}


.ngs {

	border: 0;

	background-image: url('../image/tabelka/gs.jpg');

	background-repeat: repeat;

	background-position: center bottom;

	width: 140px;

	height: 4px;

}


.ngp {

	border: 0;

	background-image: url('../image/tabelka/gp.jpg');

	background-repeat: repeat;

	background-position: left bottom;

	width: 3px;

	height: 4px;

}


.nbl {

	border: 0;

	background-image: url('../image/tabelka/bl.jpg');

	background-repeat: repeat;

	background-position: right center;

	width: 4px;

	height: 4px;

}


.nbp {

	border: 0;

	background-image: url('../image/tabelka/bp.jpg');

	background-repeat: repeat;

	background-position: left center;

	width: 3px;

	height: 4px;

}


.ndl {

	border: 0;

	background-image: url('../image/tabelka/dl.jpg');

	background-repeat: repeat;

	background-position: right top;

	width: 3px;

	height: 4px;

}


.nds {

	border: 0;

	background-image: url('../image/tabelka/ds.jpg');

	background-repeat: repeat;

	background-position: center top;

	width: 140px;

	height: 4px;

}


.ndp {

	border: 0;

	background-image: url('../image/tabelka/dp.jpg');

	background-repeat: repeat;

	background-position: left top;

	width: 3px;

	height: 4px;

}


#top {

	width: 1000px;

}


#NAGLOWEK {

	width: 100%;

	height: 200px;

	background-color: white;

}


#MENU {

	width: 150px;

	float: left;

	overflow: hidden;

	background-color: white;

}


#INFORMACJE {

	width: 150px;

	float: right;

	overflow: hidden;

	background-color: white;

}


#TRESC {

	text-align: justify;

	width: 700px;

	float: left;

	overflow: hidden;

	background-color: white;

}


#STOPKA {

	clear: both;

	width: 100%;

	background-color: white;

	text-align: center;

}


#lightbox{

	position: absolute;

	left: 0;

	width: 100%;

	z-index: 100;

	text-align: center;

	line-height: 0;

}



#lightbox img{

	width: auto;

	height: auto;

}



#lightbox a img{

	border: none;

}




#outerImageContainer{

	position: relative;

	background-color: #fff;

	width: 250px;

	height: 250px;

	margin: 0 auto;

}



#imageContainer{

	padding: 10px;

}




#loading{

	position: absolute;

	top: 40%;

	left: 0%;

	height: 25%;

	width: 100%;

	text-align: center;

	line-height: 0;

}



#hoverNav{

	position: absolute;

	top: 0;

	left: 0;

	height: 100%;

	width: 100%;

	z-index: 10;

}



#imageContainer>#hoverNav{

	left: 0;

}



#hoverNav a{

	outline: none;

}




#prevLink, #nextLink{

	width: 49%;

	height: 100%;

	background-image: url(image/gif);

	/* Trick IE into showing hover */ display: block;

}



#prevLink {

	left: 0;

	float: left;

}



#nextLink {

	right: 0;

	float: right;

}



#prevLink:hover, #prevLink:visited:hover {

	background: url(../image/prevlabel.gif) left 15% no-repeat;

}



#nextLink:hover, #nextLink:visited:hover {

	background: url(../image/nextlabel.gif) right 15% no-repeat;

}




#imageDataContainer{

	font: 10px Verdana, Helvetica, sans-serif;

	background-color: #fff;

	margin: 0 auto;

	line-height: 1.4em;

	overflow: auto;

	width: 100%;

}




#imageData{

	padding:0 10px;

	color: #666;

}



#imageData #imageDetails{

	width: 70%;

	float: left;

	text-align: left;

}



#imageData #caption{

	font-weight: bold;

}



#imageData #numberDisplay{

	display: block;

	clear: left;

	padding-bottom: 1.0em;

}



#imageData #bottomNavClose{

	width: 66px;

	float: right;

	padding-bottom: 0.7em;

	outline: none;

}




#overlay{

	position: absolute;

	top: 0;

	left: 0;

	z-index: 90;

	width: 100%;

	height: 500px;

	background-color: #000;

}

HTML (tylko jeden obrazek bo reszta była robiona za pomocą kopiuj-wklej

|
obraz.jpg
|
[/code]

Z góry dziękuję za pomoc i jeszcze raz przepraszam jeśli duplikuje temat

IcyMat


(Mariuszs) #2

Podaj link do strony. Chciałbym spojrzeć głębiej w kod.


(system) #3

reklama go zasłania.


(IcyMat) #4
  1. Posiadam płatny serwer co oznacza brak reklam :slight_smile:

  2. Rozwiązałem już problem, ale dziękuję za zainteresowanie :slight_smile:


(_mnich) #5

a mi google ten adres powiedziało http://www.icymat.eu/galery/gal3.php


(Mariuszs) #6

Usunąłeś problematyczny cień. Można i tak. :slight_smile:


(IcyMat) #7

Jakie to Google mądre :smiley: