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
| [/code]http://www.d07.yoyo.pl/upl/lightbox.jpg
Z góry dziękuję za pomoc i jeszcze raz przepraszam jeśli duplikuje temat
IcyMat