Hi all,
eigentlich bin ich ja keine css-Plinse, aber momentan komme ich hier nicht weiter:
Dies ist die Detaildarstellung eines Bildes mit Infotext in HTML: http://friederike.com/portfolio_zeichnung_detail_a_01.html
Und hier bin ich bei der Umsetztung des ganzen in WP: http://friederike.tagsucht.de/?page_id=30
Wie ihr seht, öffnet sich auf der neuen Seite bei Klick auf das Bild die Lightbox2.
Mein Problem ist, ich möchte die Lightbox so umschreiben, daß das Fenster ein ähnliches Aussehen hat wie in der HTML-Version, also feste Breite 534x254, gleiche Position und den Text NEBEN das Bild, nicht wie üblich darunter.
:sad: Alles Mögliche passiert, aber nicht das Richtige...
Hier die css der Lightbox
#stimuli_lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#stimuli_lightbox a img { border: none; }
#stimuli_outerImageContainer {
position: relative;
background-color: #e4e6d4;
width: 250px;
height: 250px;
margin: 0 auto;
}
#stimuli_imageContainer {
padding: 10px;
}
#stimuli_loading {
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
background: transparent center url(images/loading.gif) no-repeat;
}
#stimuli_hoverNav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#stimuli_imageContainer>#stimuli_hoverNav { left: 0;}
#stimuli_hoverNav a { outline: none;}
#stimuli_prevLink, #stimuli_nextLink {
width: 49%;
height: 100%;
background: transparent url(images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#stimuli_prevLink { left: 0; float: left;}
#stimuli_nextLink { right: 0; float: right;}
#stimuli_prevLink:hover, #stimuli_prevLink:visited:hover { background: url(images/prev.gif) left 55% no-repeat; }
#stimuli_nextLink:hover, #stimuli_nextLink:visited:hover { background: url(images/next.gif) right 55% no-repeat; }
#stimuli_imageDataContainer {
font: 10px Verdana, Helvetica, sans-serif;
background-color: #e4e6d4;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%
}
#stimuli_imageData { padding:0 10px; color: #666; }
#stimuli_imageData #stimuli_imageDetails { width: 70%; float: left; text-align: left; }
#stimuli_imageData #stimuli_caption { font-weight: normal;}
#stimuli_imageData #stimuli_numberDisplay { display: block; clear: left; padding-bottom: 1.0em;}
#stimuli_imageData #stimuli_bottomNavClose { width: 66px; float: right; padding-bottom: 0.7em; background: url(images/closelabel.gif) right 55% no-repeat; padding-top: 1.0em; margin-bottom: 1.0em;}
#stimuli_overlay {
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
}
Alles anzeigen
LG
Kai
