Hallo liebe HTML-Experten,ch komme bei meiner Webseite momentan nicht weiter, möchte eine Slideshow, erstellt mit Exhibeo, in meine Webseite einbinden. Leider versteckt sich diese hinter einem Layer, und sie wird nur ersichtlich, wenn man auf die Stelle klickt und die Maus mit geklicktem Zustand zieht.
Ich habe schon an mehreren Stellen versucht, den z-index anzupassen, ohne Erfolg.
Daher seid Ihr meine Hoffnung. Die Webseite arbeitet mit .css-Dateien, es gibt eine globale index.html-Seite.
In der index.html gibt es folgenden Eintrag zur Generierung des Unterfensters:
<li id="pageMore_Fotos">
<div class="box">
<div class="col6 back3">
<div class="containerContent3">
<h2>Fotos</h2>
<p>
<div id="exibid" class="impress-slideshow">
<div class="step" data-color="impress-stepcolor">
<div class="impress-image">
<img src="image/DSC05454.jpg" width="650px" height="487px" />
</div>
</div>
<div class="step" data-color="impress-stepcolor" data-x="500" data-y="-1500" data-rotate="45">
<div class="impress-image">
<img src="image/DSC05465.jpg" width="487px" height="650px" />
</div>
</div>
In der zugehörigen impress-style.css Datei lautet der Eintrag:
#exibid {
position: relative;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.clr {
clear: both;
padding: 0;
height: 0;
margin: 0;
}
.impress-slideshow {
position: relative;
max-width: 1400px;
min-width: 640px;
margin: auto;
}
.impress-wrapper {
width: auto;
min-width: 600px;
height: 440px;
-webkit-background-clip: padding;
-moz-background-clip: padding;
background-clip: padding-box;
outline: none;
-webkit-transition: background-color 1s linear;
-moz-transition: background-color 1s linear;
-o-transition: background-color 1s linear;
-ms-transition: background-color 1s linear;
transition: background-color 1s linear;
}
.step {
width: 900px;
height: 380px;
display: block;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
z-index: -1;
}
.impress-content{
float: left;
width: 47%;
padding-right: 3%;
opacity: 1;
-webkit-transition: all 0.4s ease-in-out 1s;
-mox-transition: all 0.4s ease-in-out 1s;
transition: all 0.4s ease-in-out 1s;
}
.step .impress-image {
height: 100%;
}
Und es gibt noch eine layout.css-Datei, die für dieses Untermenü-Fenster zuständig ist:
.containerContent {
z-index: 1;
position: relative;
padding: 0px 32px 0 32px;
display: block;
float: left;
width: 156px;
}
.containerContent2 {
z-index: 1;
position: relative;
padding: 0px 36px 0 36px;
display: block;
float: left;
width: 388px;
}
.containerContent3 {
z-index: 1;
position: relative;
padding: 0px 36px 0 36px;
display: block;
float: left;
width: 870px;
height: 550px;
}
Ich weiß nicht, ob Euch diese Angaben schon reichen, um die Fehlerursache ausfindig zu machen.
Für jedwede Hilfestellung bin echt dankbar.
Wenn Ihr mehr Informationen braucht, stelle ich diese gerne zur Verfügung.
Danke Euch!
Beste Grüße, Peter
