Auf meiner sich gerade noch im Aufbau-befindenen Webseite ()
habe ich meine Bilder (z.B. in den Unterseiten "children" oder "Editorial" zu sehen) in einer Art Lightbox
eingebunden. Jedoch habe ich das Problem, dass die Bilder abhängig von verschiedenen Bildschirmen abgeschnitten
werden. Bei einem 13" werden die in der Lightbox geöffneten Bilder richtig dargestellt, bei 17" aber leider nicht.
Nur mit dem Internet-Explorer scheint die Darstellung gar kein Problem zu sein.
Safari hingegen streikt. :(
Hätte jemand eine Idee...? Wäre wirklich dankbar über Vorschläge... irgendwann bin ich dann ja vielleicht auch mal htmlprofi und kann mich hoffentlich mal revanchieren... :)
Der CSS Code der Slimbox ist folgender:
/* SLIMBOX */
#lbOverlay {
position: absolute;
z-index: 9999;
left: 0;
width: 100%;
background-color: #000;
cursor: pointer;
}
#lbCenter, #lbBottomContainer {
position: absolute;
z-index: 9999;
left: 50%;
overflow: hidden;
background-color: #fff;
}
.lbLoading {
background: #fff url(../images/loading.gif) no-repeat center;
}
#lbImage {
position: absolute;
left: 0;
top: 0;
border: 10px solid #fff;
background-repeat: no-repeat;
}
#lbPrevLink, #lbNextLink {
display: block;
position: absolute;
top: 0;
width: 50%;
outline: none;
}
#lbPrevLink {
left: 0;
}
#lbPrevLink:hover {
background: transparent url(../images/prevlabel.gif) no-repeat 0% 15%;
}
#lbNextLink {
right: 0;
}
#lbNextLink:hover {
background: transparent url(../images/nextlabel.gif) no-repeat 100% 15%;
}
#lbBottom {
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: 10px;
color: #666;
line-height: 1.4em;
text-align: left;
border: 10px solid #fff;
border-top-style: none;
}
#lbCloseLink {
display: block;
float: right;
width: 113px;
height: 22px;
background: transparent url(../images/closelabel.gif) no-repeat center;
margin: 5px 0;
outline: none;
}
#lbCaption, #lbNumber {
margin-right: 71px;
}
#lbCaption {
font-weight: bold;
}
habe ich meine Bilder (z.B. in den Unterseiten "children" oder "Editorial" zu sehen) in einer Art Lightbox
eingebunden. Jedoch habe ich das Problem, dass die Bilder abhängig von verschiedenen Bildschirmen abgeschnitten
werden. Bei einem 13" werden die in der Lightbox geöffneten Bilder richtig dargestellt, bei 17" aber leider nicht.
Nur mit dem Internet-Explorer scheint die Darstellung gar kein Problem zu sein.
Safari hingegen streikt. :(
Hätte jemand eine Idee...? Wäre wirklich dankbar über Vorschläge... irgendwann bin ich dann ja vielleicht auch mal htmlprofi und kann mich hoffentlich mal revanchieren... :)
Der CSS Code der Slimbox ist folgender:
/* SLIMBOX */
#lbOverlay {
position: absolute;
z-index: 9999;
left: 0;
width: 100%;
background-color: #000;
cursor: pointer;
}
#lbCenter, #lbBottomContainer {
position: absolute;
z-index: 9999;
left: 50%;
overflow: hidden;
background-color: #fff;
}
.lbLoading {
background: #fff url(../images/loading.gif) no-repeat center;
}
#lbImage {
position: absolute;
left: 0;
top: 0;
border: 10px solid #fff;
background-repeat: no-repeat;
}
#lbPrevLink, #lbNextLink {
display: block;
position: absolute;
top: 0;
width: 50%;
outline: none;
}
#lbPrevLink {
left: 0;
}
#lbPrevLink:hover {
background: transparent url(../images/prevlabel.gif) no-repeat 0% 15%;
}
#lbNextLink {
right: 0;
}
#lbNextLink:hover {
background: transparent url(../images/nextlabel.gif) no-repeat 100% 15%;
}
#lbBottom {
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: 10px;
color: #666;
line-height: 1.4em;
text-align: left;
border: 10px solid #fff;
border-top-style: none;
}
#lbCloseLink {
display: block;
float: right;
width: 113px;
height: 22px;
background: transparent url(../images/closelabel.gif) no-repeat center;
margin: 5px 0;
outline: none;
}
#lbCaption, #lbNumber {
margin-right: 71px;
}
#lbCaption {
font-weight: bold;
}
Zuletzt bearbeitet: