Hallo Leute,
ich habe folgendes Problem:
Ich erstelle gerade eine seite dessen body immmer vertikal mittig ist im Browser.
Für eine Lightbox 2, die sich auch auch öffnet ist soweit alles ok.N
Nur dass sich nach links wo der body endet (hat feste breite 802px) der graue overlay nicht weiter geht.
Meine Frage nun:
Ich habe gelesen dass man einen Wrapper, um den body machen kann, dass die lightbox die komplette seite einschliesst, da sich die lightbox auf den body bezieht.
Gibt es sonst noch vielleicht andere Lösungsvorscghläge?
lightbox 2:
ich hoffe ihr könnt damit was anfangen, danke schonmal!!!
ich habe folgendes Problem:
Ich erstelle gerade eine seite dessen body immmer vertikal mittig ist im Browser.
Für eine Lightbox 2, die sich auch auch öffnet ist soweit alles ok.N
Nur dass sich nach links wo der body endet (hat feste breite 802px) der graue overlay nicht weiter geht.
Meine Frage nun:
Ich habe gelesen dass man einen Wrapper, um den body machen kann, dass die lightbox die komplette seite einschliesst, da sich die lightbox auf den body bezieht.
Gibt es sonst noch vielleicht andere Lösungsvorscghläge?
Code:
html {
background-image: url(./images/bg_rapport.png);
background-repeat:repeat;
height: 100%;
}
body {
background-position: right bottom;
background-repeat: repeat-y;
min-height: 100%;
margin: auto;
marigin: 0px 0px 0px 20px;
padding-left: 230px;
padding-top: 0px;
position: relative;
width: 802px;
background-color: #ffffff;
box-shadow: 0 0 17px #999;
border-bottom: 0px solid #000000;
border-left: 0px solid #000000;
border-right: 0px solid #000000;
font-family: Arial, "Times New Roman", Times, serif;
font-size: 12px;
}
a {
text-decoration: none;
}
#footer {
float: right;
width: 1022px;
border: 0px solid #e0e0e0;
border-right: 0 none transparent;
border-bottom: 0 none transparent;
border-left: 0 none transparent;
color: #fff;
background-color: #999;
margin: 70px 0px 0px 0px;
padding: 10px 10px 20px 0px;
font-size: 9px;
text-align: right;
}
#balken_rot {
padding: 0px 0px 0px 0px;
position:absolute;
top: 0cm;
z-index:1;
}
#seal {
position:absolute;
top: 0cm;
right: 40px;
z-index:2;
}
#sli_logo {
left: 0;
position: absolute;
top: 0;
padding: 0px;
}
#tabs-container {
height: 105px;
padding-top: 90px;
}
/* -------------------------------------------------------------------------------- */
/* Left Menu */
/* -------------------------------------------------------------------------------- */
div#menu {
width: 195px;
position: absolute;
left: 0px;
margin:0px 10px 0px 15px;
height: 100%;
}
div#menu p {
line-height: 1.4;
}
div#menu h1 {
width: 195px;
border-bottom: 1px solid #e0e0e0;
font-size: 11px;
padding-bottom: 5px;
margin-bottom: 7px;
margin-top: 15px;
}
div#menu h1#first {
margin-top: 0px;
}
div#menu a {
color: #4f4f4f;
display: block;
padding-bottom: 5px;
}
div#menu a:hover {
color: #e54045;
}
div#menu a.selected {
color: #e54045;
}
/* -------------------------------------------------------------------------------- */
/* Content */
/* -------------------------------------------------------------------------------- */
.galleria {
width: 800px;
height: 97px;
border-bottom: 1px solid #e0e0e0;
}
.galleria li {
width: 50px;
height: 50px;
border: 1px solid #e0e0e0;
/* border-right: 2px solid #e0e0e0; IE bug apparently - needs to be dealt with */
margin: 22px 7px 22px 0px;
}
.galleria li:hover {
border-color: #bbbbbb;
}
#galleria-main-image {
width: 100%;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
position: relative;
margin: 0px 0px 0px 0px;
float: right;
}lightbox 2:
Code:
#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(data:image/gif;base64,AAAA); /* 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; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }ich hoffe ihr könnt damit was anfangen, danke schonmal!!!
