nicht angemeldet
Mir ist jetzt nicht ganz klar was ich nun machen soll...
Nach diesen Änderungen ist jetzte meine Slideshow verschwunden. Woran liegt das jetzt? Dafür passt jetzt der Rest und mein Editor zeigt jetzt erstmals weniger als 10 Warnungen an :-)
Weiß vielleicht jemand, was ich tun kann, damit .row und .activ erkannt werden?
<div>
<li class="main-screen">
</li>
</div>
Zu diesem Element wird gesagt, ich dürfe da kein li verwenden.. Wie kann ich das beheben?
Und wenn ich diese Zeile: <ul class="slideshow"> als erstes in das body Element schreibe, kommt die Slideshow ohne dass ich ul schließe, jedoch bringt sie dann auch den ganzen Rest durcheinander.
Das sieht dann so aus:
Bisher habe ich diese Zeile so verbaut:
<div class="column">
<ul class="slideshow">
<li class="image"><img src="..\home\img\sonne2.jpg" width="1280" height="853" alt="sunset" class="center" /></li>
<li class="image"><img src="..\home\img\sonne1.jpg\" width="1280" height= "853" alt="secondsunset" class="center" /></li>
<li class="image"><img src="..\home\img\tik1.jpg\" width="1280" height= "853" alt="us" class="center"/></li>
<li class="image"><img src="..\home\img\tik2.jpg\" width="1280" height= "853" alt="us again" class="center"/></li>
</ul>
</div>
Ich denke, dass hat hier wohl noch einen Fehler, obwohl mir hier nichts angemarkert wird.
Also hier nochmal der komplette aktuelle Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AaA Couplesite</title>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<style>
h1 { font-size: 5.5em; background-color: DeepSkyBlue; text-align: center; }
h2 {text-align: center;}
p { font-size: 2.5em; text-align: center; }
ul { font-size: 2em; }
li.hm2 {
/* Textfluss ändern */
float: left;
/* Aufzählungspunkte entfernen */
list-style-type: none;
/* Abstand */
margin-right: 15px;
}
.center {
display: block;
margin-left: 20%;
margin-right: auto;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
float: left;
width: 50%;
}
.main-screen {
z-index: 98;
padding: 0;
height: 100%;
width: 100%;
}
.slideshow {
display: block;
width: 100%;
padding: 0;
margin: 0;
z-index: 99;
list-style: none;
}
ul {
text-align: left;
width: 70%;
position:relative;
left: 38%;
}
.image {
position: absolute;
z-index: 0;
width: 100%;
height: 100%;
left: 0;
top: 0;
overflow: hidden;
display: block;
transition:opacity 1s ease-in-out;
-moz-transition:opacity 1s ease-in-out;
-webkit-transition:opacity 1s ease-in-out;
}
.image{
opacity: 0;
}
.active{
opacity: 1;
}
.nav-arrows a {
width: 42px;
height: 42px;
background: #fff;
position: absolute;
top: 51%;
left: 30px;
text-indent: -9000px;
cursor: pointer;
margin-top: -21px;
opacity: 0.9;
z-index: 99999;
}
.nav-arrows a:first-child{
left: auto;
right: 30px;
background-position: top right;
}
.nav-arrows a:hover {
opacity: 1;
}
</style>
</head>
<body>
<h1>Andreas and Angelinas Couplesite</h1>
<nav>
<ul>
<li class="hm2">ABOUT US</li>
<li class="hm2">DESTINATION TRIPS</li>
<li class="hm2">PICTURES</li>
<li class="hm2">CONTACT US</li>
</ul>
</nav>
<div style="clear:both"></div>
<h2> Hello!</h2>
<p> We are Angelina and Andreas: We enjoy taking pictures to remember great moments, like to do </p>
<div>
<li class="main-screen">
</li>
</div>
<nav>
<div id="nav-arrows" class="nav-arrows">
<a href="#" class="forward">Weiter</a>
<a href="#" class="backward">Zurück</a>
</div>
</nav>
<h1>Pictures of ur Memories</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, …</p>
<div class="column">
<ul class="slideshow">
<li class="image"><img src="..\home\img\sonne2.jpg" width="1280" height="853" alt="sunset" class="center" /></li>
<li class="image"><img src="..\home\img\sonne1.jpg\" width="1280" height= "853" alt="secondsunset" class="center" /></li>
<li class="image"><img src="..\home\img\tik1.jpg\" width="1280" height= "853" alt="us" class="center"/></li>
<li class="image"><img src="..\home\img\tik2.jpg\" width="1280" height= "853" alt="us again" class="center"/></li>
</ul>
</div>
</body>
<script>
$(document).ready(function() {
var time = 10000,
timer;
$('.slideshow li:first-child').addClass('active');
function play() {
timer = setInterval(function(){
var next = $(".slideshow .active").removeClass("active").next(".image");
if (!next.length) {
next = $(".slideshow .image:first");
}
next.addClass("active");
}, time);
}
play();
/*Start of function for next button */
function forward() {
$('.forward').click(function() {
clearInterval(timer);
play();
var go = $(".slideshow .active").removeClass("active").next(".image").addClass("active");
if (!go.length) {
go = $(".slideshow .image:first");
}
go.addClass("active");
});
}
forward();
/*Start of function for prev button */
function previous() {
$('.backward').click(function() {
clearInterval(timer);
play();
var go = $(".slideshow .active").removeClass("active").prev(".image").addClass("active");
if (!go.length) {
go = $(".slideshow .image:last");
}
go.addClass("active");
});
}
previous();
});
/*Blendet Weiter und Zurück button aus/ein */
var timer;
$(document).mousemove(function() {
if (timer) {
clearTimeout(timer);
timer = 0;
}
$('.backward, .forward').fadeIn();
timer = setTimeout(function() {
$('.backward, .forward').fadeOut()
}, 3000)
})
</script>
</html>
Vielen Dank für jeden Tipp idna
Gunnar Bittersmann
Der Martin
Matthias Scharwies
Matthias Apsel
Rolf B