HerrHofrat
Grünschnabel
Hallo!
Ich habe auf meiner Seite die Smooth Gallery 2.0 eingebunden. Mit dem FireFox2.0 funktioniert sie auch ganz gut, aber der IE zickt rum.
Ich hab die Gallery in einem div mit fixer höhe und breite und overflow:auto eingefügt. Problem ist jetzt wenn ich in dem div scrolle bleibt die Gallery einfach stehen.
zu sehen hier:
http://www.stp-artists.com/
und hier noch das CSS File der Gallery:
Ich habe auf meiner Seite die Smooth Gallery 2.0 eingebunden. Mit dem FireFox2.0 funktioniert sie auch ganz gut, aber der IE zickt rum.
Ich hab die Gallery in einem div mit fixer höhe und breite und overflow:auto eingefügt. Problem ist jetzt wenn ich in dem div scrolle bleibt die Gallery einfach stehen.
zu sehen hier:
http://www.stp-artists.com/
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>stp-artists.com</title>
<style type="text/css">
<!--
#maincontainer {
position:absolute;
height:507px;
width:920px;
margin:-253px 0px 0px -460px;
top: 50%;
left: 50%;
padding: 0px;
}
body {
background-image: url(img/stpartists_bg.gif);
background-color: #474847;
}
body,td,a {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
text-decoration:none;
}
.second {
background-color: #474847;
}
-->
</style>
<script src="./SG/scripts/mootools.v1.11.js" type="text/javascript"></script>
<script src="./SG/scripts/jd.gallery.js" type="text/javascript"></script>
<link rel="stylesheet" href="./SG/css/jd.gallery.css" type="text/css" media="screen" />
</head>
<body>
<div id="maincontainer">
<table style="width:100%;height:100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" valign="middle"><table style="width:920px;height:507px" cellpadding="0" cellspacing="0" align="center">
<tr>
<td style="height:52px" colspan="2"><img src="img/stpartists_header.gif" /></td>
</tr>
<tr>
<td style="width:315px;height:420px;" background="img/stpartists_main_l.gif"> </td>
<td width="605px" background="img/stpartists_main_r.gif">
<div style="width:570px;height:390px;overflow:auto;margin:10px;">
<script src="./js/sorttable.js"></script>
<style>
table.sortable thead {
font-weight: bold;
cursor: help;
}
</style>
<table border="0" cellspacing="2" cellpadding="7" align="center" width="500px">
<tr>
<td colspan="3" align="left">
<b>» MC Flax </b>
</td>
</tr>
<tr>
<td rowspan="8" width="250px">
<style>
<!--
#myGallery
{
width: 250px;
height: 250px;
text-align: left;
margin: 0 auto;
}
-->
</style>
<script type="text/javascript">
<!--
function startGallery() {
var myGallery = new gallery($('myGallery'), {
destroyAfterPopulate: true,
timed: true,
delay: 5000,
showInfopane: false,
showArrows: true,
showCarousel: false,
embedLinks: false
});
}
window.onDomReady(startGallery);
-->
</script>
<div style="width:250px;height:250px;positon:static;overflow:hidden;border:1px solid white;">
<div id="myGallery">
<div class="imageElement">
<h3></h3>
<p></p>
<a href="#" title="open image" class="open"></a>
<img src="./artists/18/7.jpg" class="full" />
<img src="./artists/18/thumbs/7.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3></h3>
<p></p>
<a href="#" title="open image" class="open"></a>
<img src="./artists/18/l_7e2fa37d7d47de458b5e68b1d113e185.jpg" class="full" />
<img src="./artists/18/thumbs/l_7e2fa37d7d47de458b5e68b1d113e185.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3></h3>
<p></p>
<a href="#" title="open image" class="open"></a>
<img src="./artists/18/l_7f559845d9ae1b3349eb9a5cf7a8b98f.jpg" class="full" />
<img src="./artists/18/thumbs/l_7f559845d9ae1b3349eb9a5cf7a8b98f.jpg" class="thumbnail" />
</div>
</div>
</div>
</td>
<td align="right" style="width:80px;margin-right:3px">Artistname:</td>
<td align="left">MC Flax </td>
</tr>
<tr>
<td align="right" style="width:80px;margin-right:3px">Name:</td>
<td align="left">Roman Wurzenberger </td>
</tr>
<tr>
<td align="right" style="width:80px;margin-right:3px">Soundsystem:</td>
<td align="left">3151-Sound</td>
</tr>
<tr>
<td align="right" style="width:80px;margin-right:3px">Funktion:</td>
<td align="left">MC</td>
</tr>
<tr>
<td align="right" style="width:80px;margin-right:3px">since:</td>
<td align="left">2003</td>
</tr>
<tr>
<td align="right" style="width:80px;margin-right:3px">Music Style:</td>
<td align="left">Drum&Bass, Breakbeat </td>
</tr>
<tr>
<td align="right" style="width:80px;margin-right:5px">played at:</td>
<td align="left"></td>
</tr>
<tr>
<td align="right" style="width:80px;margin-right:5px">contact:</td>
<td align="left"><a target="_blank" href="http://www.3151-sound.at/www.myspace.com/flaxmc">http://www.3151-sound.at/www.myspace.com/flaxmc</a>
<br /></td>
</tr>
<tr>
<td colspan="3" align="left">
<p>alles begann im jahre 2003 als er mit seinen ersten hip hop texten sich in die große weite welt des mceen begab!</p>
</td>
</tr>
</table></div></td>
</tr>
<tr>
<td style="height:35px" colspan="2"><img src="img/menuneu.gif" border="0" usemap="#Map" /></td>
</tr>
</table></td>
</tr>
</table>
</div>
<map name="Map">
<area shape="rect" coords="19,7,86,30" href="?show=home">
<area shape="rect" coords="104,7,192,30" href="?show=events">
<area shape="rect" coords="210,7,284,30" href="?show=fotos">
<area shape="rect" coords="301,7,348,30" href="?show=win">
<area shape="rect" coords="364,7,465,30" href="?show=partner">
<area shape="rect" coords="481,7,557,30" href="?show=artist">
<area shape="rect" coords="572,7,640,30" href="?show=team">
<area shape="rect" coords="657,7,778,30" href="?show=feedback">
<area shape="rect" coords="793,7,900,30" href="?show=kontakt">
</map></body>
</html>und hier noch das CSS File der Gallery:
Code:
#myGallery, #myGallerySet, #flickrGallery
{
width: 460px;
height: 345px;
z-index:5;
border: 1px solid #000;
}
#flickrGallery
{
width: 500px;
height: 334px;
}
#myGallery img.thumbnail, #myGallerySet img.thumbnail
{
display: none;
}
.jdGallery
{
overflow: hidden;
position: relative;
}
.jdGallery img
{
border: 0;
margin: 0;
}
.jdGallery .slideElement
{
width: 100%;
height: 100%;
background-color: #000;
background-repeat: no-repeat;
background-position: center center;
background-image: url('img/loading-bar-black.gif');
}
.jdGallery .loadingElement
{
width: 100%;
height: 100%;
position: relative;
left: 0;
top: 0;
background-color: #000;
background-repeat: no-repeat;
background-position: center center;
background-image: url('img/loading-bar-black.gif');
}
.jdGallery .slideInfoZone
{
position: absolute;
z-index: 10;
width: 100%;
margin: 0px;
left: 0;
bottom: 0;
height: 40px;
background: #333;
color: #fff;
text-indent: 0;
overflow: hidden;
}
* html .jdGallery .slideInfoZone
{
bottom: -1px;
}
.jdGallery .slideInfoZone h2
{
padding: 0;
font-size: 80%;
margin: 0;
margin: 2px 5px;
font-weight: bold;
color: inherit;
}
.jdGallery .slideInfoZone p
{
padding: 0;
font-size: 60%;
margin: 2px 5px;
color: #eee;
}
.jdGallery div.carouselContainer
{
position: absolute;
height: 135px;
width: 100%;
z-index: 10;
margin: 0px;
left: 0;
top: 0;
}
.jdGallery a.carouselBtn
{
position: absolute;
bottom: 0;
right: 30px;
height: 20px;
/*width: 100px; background: url('img/carousel_btn.gif') no-repeat;*/
text-align: center;
padding: 0 10px;
font-size: 13px;
background: #333;
color: #fff;
cursor: pointer;
}
.jdGallery .carousel
{
position: absolute;
width: 100%;
margin: 0px;
left: 0;
top: 0;
height: 115px;
background: #333;
color: #fff;
text-indent: 0;
overflow: hidden;
}
.jdExtCarousel
{
overflow: hidden;
position: relative;
}
.jdGallery .carousel .carouselWrapper, .jdExtCarousel .carouselWrapper
{
position: absolute;
width: 100%;
height: 78px;
top: 10px;
left: 0;
overflow: hidden;
}
.jdGallery .carousel .carouselInner, .jdExtCarousel .carouselInner
{
position: relative;
}
.jdGallery .carousel .carouselInner .thumbnail, .jdExtCarousel .carouselInner .thumbnail
{
cursor: pointer;
background: #000;
background-position: center center;
float: left;
border: solid 1px #fff;
}
.jdGallery .wall .thumbnail, .jdExtCarousel .wall .thumbnail
{
margin-bottom: 10px;
}
.jdGallery .carousel .label, .jdExtCarousel .label
{
font-size: 13px;
position: absolute;
bottom: 5px;
left: 10px;
padding: 0;
margin: 0;
}
.jdGallery .carousel .wallButton, .jdExtCarousel .wallButton
{
font-size: 10px;
position: absolute;
bottom: 5px;
right: 10px;
padding: 1px 2px;
margin: 0;
background: #222;
border: 1px solid #888;
cursor: pointer;
}
.jdGallery .carousel .label .number, .jdExtCarousel .label .number
{
color: #b5b5b5;
}
.jdGallery a
{
font-size: 100%;
text-decoration: none;
color: inherit;
}
.jdGallery a.right, .jdGallery a.left
{
position: absolute;
height: 99%;
width: 25%;
cursor: pointer;
z-index:10;
filter:alpha(opacity=20);
-moz-opacity:0.2;
-khtml-opacity: 0.2;
opacity: 0.2;
}
* html .jdGallery a.right, * html .jdGallery a.left
{
filter:alpha(opacity=50);
}
.jdGallery a.right:hover, .jdGallery a.left:hover
{
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
.jdGallery a.left
{
left: 0;
top: 0;
background: url('img/fleche1.png') no-repeat center left;
}
* html .jdGallery a.left { background: url('img/fleche1.gif') no-repeat center left; }
.jdGallery a.right
{
right: 0;
top: 0;
background: url('img/fleche2.png') no-repeat center right;
}
* html .jdGallery a.right { background: url('img/fleche2.gif') no-repeat center right; }
.jdGallery a.open
{
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.withArrows a.open
{
position: absolute;
top: 0;
left: 25%;
height: 99%;
width: 50%;
cursor: pointer;
z-index: 10;
background: none;
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
.withArrows a.open:hover { background: url('img/open.png') no-repeat center center; }
* html .withArrows a.open:hover { background: url('img/open.gif') no-repeat center center;
filter:alpha(opacity=80); }
/* Gallery Sets */
.jdGallery a.gallerySelectorBtn
{
z-index: 15;
position: absolute;
top: 0;
left: 30px;
height: 20px;
/*width: 100px; background: url('img/carousel_btn.gif') no-repeat;*/
text-align: center;
padding: 0 10px;
font-size: 13px;
background: #333;
color: #fff;
cursor: pointer;
opacity: .4;
-moz-opacity: .4;
-khtml-opacity: 0.4;
filter:alpha(opacity=40);
}
.jdGallery .gallerySelector
{
z-index: 20;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #000;
}
.jdGallery .gallerySelector h2
{
margin: 0;
padding: 10px 20px 10px 20px;
font-size: 20px;
line-height: 30px;
color: #fff;
}
.jdGallery .gallerySelector .gallerySelectorWrapper
{
overflow: hidden;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton
{
margin-left: 10px;
margin-top: 10px;
border: 1px solid #888;
padding: 5px;
height: 40px;
color: #fff;
cursor: pointer;
float: left;
}
.jdGallery .gallerySelector .gallerySelectorInner div.hover
{
background: #333;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview
{
background: #000;
background-position: center center;
float: left;
border: none;
width: 40px;
height: 40px;
margin-right: 5px;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3
{
margin: 0;
padding: 0;
font-size: 12px;
font-weight: normal;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info
{
margin: 0;
padding: 0;
font-size: 12px;
font-weight: normal;
color: #aaa;
}
