lightbox opent niet helemaal op de voorgrond

[Patjera]

ik gebruik lightbox reeds jaren op mijn website bocciapatrick.tk. Op een van de pagina's staat de foto niet helemaal op de voorgrond als ik op de foto klik. Het gaat goed tot ongeveer halverwege de pagina en dan staan ineens de miniaturen voor de foto i.p.v achter de foto

de pagina waarop dit gebeurd is bocciatijdslijn 2012-2013 . Het is een tijdslijn. Het verloopt goed tot en met december. Als je vanaf januari klikt op een foto dan komen er delen van de achtergrond voor de lightboxfoto. Indien je vanaf begin de foto's via lightbox bekijkt is er geen probleem. je klikt op next en alles verloopt prima. Indien je pas vanaf januari op een foto klikt dan is er wel dat probleem. Iemand een idee hoe ik dit kan verhelpen. Het programma waar ik de site mee maak is webpagemaker (http://www.webpage-maker.com/)

[Gast]

Beste,

Doormiddel van een 'z-index' mee te geven ga je bepalen hoever iets op de voor- of achtergrond moet staan.

Iets met z-index: 5 staat achter iets met z-index: 6.

De Z-index telt steeds hoger op, hoe meer je naar onder gaat.

Dat lijkt mij totaal overbodig, want die worden nergens overlapt.

Maar laten we het simpel oplossen.

Zoek even het bestand 'lightbox.css'.

In dat bestand zoek je dan het onderdeeltje dat begint met #lightbox {

Een beetje daaronder zie je hetvolgende staan: z-index: 100;

Omdat je z-index van je afbeeldingen endergelijke, steeds opteld. Gaat deze over de 100, en komt die dus voor je lightbox.

Een simpele oplossing zou dus kunnen zijn om de z-index van lightbox, van 100 naar 1000 te zetten.

Dan kan je er weer even tegen.

Het is niet de beste oplossing, maar ik denk dat het je probleem wel een tijd zal oplossen.

Een betere oplossing zou zijn om niet voor elke element een nieuwe z-index te gebruiken.

Omdat ze toch niet overlappen met elkaar.

Dan kan je de volledige pagina maken men minder dan 10 z-indexen.

Maar dit vraagt wel meer aanpassingen, dan de simpelere oplossing hierboven.

30 maart 2013 aangepast door Gast

[Patjera]

ik snap wel wat je bedoeld, maar het probleem is...dat ik met het programma webpagemaker werk, eigenlijk geen kennis heb van html en in dit programma nergens vindt waar ik toegang heb tot die coderingen. '

De Z-index telt steeds hoger op'....dat is iets wat dat programma automatisch doet....of is dit iets wat ik online ook via Cpanel zou kunnen doen ?

[Gast]

Het verhogen van de Z-index zal een instelling zijn in het programma.

Dat kan je niet aanpassen in het Cpanel.

De 'webpage-maker' is een programma dat op je pc staat om een website te maken.

Nadien heb je toch iets moeten doen om je website online (op het internet) te krijgen?

Hierbij heb je de bestanden online moeten zetten.

En naar zo een bestand zijn we opzoek.

Ik denk dat je aan die bestanden ook kan geraken via het 'Cpanel' waar je het over hebt.

Als je daar een 'file manager' ofdergelijke vind, die je toelaat om de bestanden van je website te bekijken.

Daar moet je vervolgens naar het bestand 'lightbox.css' zoeken en de eerder vernoemde aanpassingen doen.

[Patjera]

ook hier is het programma heel simple. Dit gaat via ftp. Er is een knop...uploaden . Je kan hier kiezen tussen de ganse pagina uploaden of enkel de gewijzigde bestanden. Het programma doet de rest.

In Cpanel is er wel een filemanager...Zal daar eens op zoek gaan

[Patjera]

ok...heb gevonden hoe ik die files in webpagemaker heb gestoken. Die staan natuurlijk op mijn computer. ik moet dus de file op mijn computer openen met wordpad en daar die waarde veranderen en die dan opnieuw in webpagemaker steken en uploaden. Er staan wel meerdere Z indexen in die lightboxccs. Is het enkel die waar je naar refereerd die ik moet aanpassen of moet ik er ook andere aanpassen ?

hieronder wat ik zie in wordpad

#lightbox{

position: absolute;

left: 0;

width: 100%;

z-index: 100;

text-align: center;

line-height: 0;

}

#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: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */

display: block;

}

#prevLink { left: 0; float: left;}

#nextLink { right: 0; float: right;}

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }

#nextLink:hover, #nextLink:visited:hover { background: url(../images/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; }

#overlay{

position: absolute;

top: 0;

left: 0;

z-index: 90;

width: 100%;

height: 500px;

background-color: #000;

}

- - - Updated - - -

ok...heb gevonden hoe ik die files in webpagemaker heb gestoken. Die staan natuurlijk op mijn computer. ik moet dus de file op mijn computer openen met wordpad en daar die waarde veranderen en die dan opnieuw in webpagemaker steken en uploaden. Er staan wel meerdere Z indexen in die lightboxccs. Is het enkel die waar je naar refereerd die ik moet aanpassen of moet ik er ook andere aanpassen ?

hieronder wat ik zie in wordpad

#lightbox{

position: absolute;

left: 0;

width: 100%;

z-index: 100;

text-align: center;

line-height: 0;

}

#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: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */

display: block;

}

#prevLink { left: 0; float: left;}

#nextLink { right: 0; float: right;}

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }

#nextLink:hover, #nextLink:visited:hover { background: url(../images/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; }

#overlay{

position: absolute;

top: 0;

left: 0;

z-index: 90;

width: 100%;

height: 500px;

background-color: #000;

}

[Gast]

Ja, enkel die ene aanpassen.

Dus dit:

#lightbox{
position: absolute;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}

Wordt dit:

#lightbox{
position: absolute;
left: 0;
width: 100%;
z-index: 1000;
text-align: center;
line-height: 0;
}

[Patjera]

bedankt...heb de wijzigingen doorgevoerd. eerst werkte het niet, maar ik werk met cloudflaire en heb daar dan de cache leeg gemaakt en nu werkt het wel. probleem opgelost !