Ich kann folgendes Problem seit Tagen nicht lösen. Ich möchte eine Webseite ausschließlich in html5 und css erzeugen. Dabei soll eine Diashow animiert werden. Für Browser, die keyframes nicht kennen, habe ich ein statisches Bild eingebaut. Die Bilder sollen mindestens 400 px breit sein. Nur wenn der Bildschirm noch kleiner ist, sollen sie mit skaliert werden. Dies klappt mit dem statischen Bild auch wunderbar. Nur die animierten Bilder bleiben groß und überdecken andere Teile der Webseite.

Hier der Code:
html:
<div id="picture">
<img alt="staticpicture" src="staticpicture.jpg">

<div id="box">
<img id="photo1" alt="photo1" src="photo1.jpg">
<img id="photo2" alt="photo2" src="photo2.jpg">

</div>
</div>

css:

#photo1{
opacity:0;
animation: fadeinphoto1 7s infinite;
-moz-animation: fadeinphoto1 7s infinite;
-webkit-animation: fadeinphoto1 7s infinite;
-o-animation: fadeinphoto1 7s infinite;
float:left;
position:absolute;

}

#photo2{
opacity:0;
animation: fadeinphoto2 7s 5s infinite;
-moz-animation: fadeinphoto2 7s 5s infinite;
-webkit-animation: fadeinphoto2 7s 5s infinite;
-o-animation: fadeinphoto2 7s 5s infinite;
float:left;
position: absolute;



}



@keyframes fadeinphoto1{
0%{opacity:0;}
20%{opacity:0;}
50%{opacity:1;}
70%{opacity:1;}
100%{opacity:0;}
}
@keyframes fadeinphoto2{
0%{opacity:0;}
20%{opacity:1;}
50%{opacity:1;}
70%{opacity:0;}
100%{opacity:0;}
}

@-moz-keyframes fadeinphoto1{
0%{opacity:0;}
20%{opacity:0;}
50%{opacity:1;}
70%{opacity:1;}
100%{opacity:0;}
}
@-moz-keyframes fadeinphoto2{
0%{opacity:0;}
20%{opacity:1;}
50%{opacity:1;}
70%{opacity:0;}
100%{opacity:0;}
}

@-webkit-keyframes fadeinphoto1{
0%{opacity:0;}
20%{opacity:0;}
50%{opacity:1;}
70%{opacity:1;}
100%{opacity:0;}
}
@-webkit-keyframes fadeinphoto2{
0%{opacity:0;}
20%{opacity:1;}
50%{opacity:1;}
70%{opacity:0;}
100%{opacity:0;}
}
@-o-keyframes fadeinphoto1{
0%{opacity:0;}
20%{opacity:0;}
50%{opacity:1;}
70%{opacity:1;}
100%{opacity:0;}
}
@-o-keyframes fadeinphoto2{
0%{opacity:0;}
20%{opacity:1;}
50%{opacity:1;}
70%{opacity:0;}
100%{opacity:0;}
}
#box {
width: 40%;
max-width: 400px;

position: absolute;
}
#picture { /*Hauptbild im index*/
float: left;
margin: 1% 4% 2% 4%;
text-align: left;
width: 92%;
}
#picture > img {
width: 40%;
max-width: 400px;
float: left;
}

Hat jemand eine Idee, wie man dies lösen kann?
Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!