nicht angemeldet
Hallo,
erstmal vielen Dank für die schnellen und guten Antworten 😀
Ich antworte mal der Reihenfolge nach:
- Listen-Text hier@Gunnar Bittersmann:
Warum ist das a-Element so schlecht? Oder wie solltre ich es besser machen?
-
Listen-Text hier@Felix Riesterer: Vielen Dank, mit der jQuery Bibliothek hat es funktioniert!
-
Sind meine allerersten Versuche hier daher, ist der Code wohl etwas durcheinander....
-
@Matthias Scharwies: Im Validator werden mir nur zwei Fehler angezeigt, indem er sagt ich darf kein style- element zwischen head und body haben. Wo soll ich dieses einfügen? Und als zweiter Fehler: Fatal Error: Cannot recover after last error. Any further errors will be ignored. mit der selben Begründung.
-
Ich hatte das body-element aufgeteilt, da mir im Editor so weniger Fehler angezeigt wurden. Habe ich nun wieder zusammmengefügt.
-
style habe ich auch in den head dazu. Und aus dem lang="en" habe ich nun <html lang="en"> gemacht. Zumindest wird es in PhpStorm nicht mehr angemarkert. align:center habe ich jetzt auch extra angelegt.
-
Wenn ich die Navigation in ein nav-element packen kann soll es dann in das body-element? Ich habe es ausprobiert jedoch wird der Text dann nicht mehr erkannt..
-
Dann wollte ich Flexbox integrieren, allerdings dachte ich ich habe es schon drin - oder doch etwa nicht?
Hier ist noch der aktuelle Stand, die Slideshow funktioniert nun mit dem jQuery, doch mein ganzer Rest ist verschoben und die Slideshow liegt auch mitten in der Schrift.
Dazu werden die Bilder nur über Zeilen angezeigt in denen schon etwas steht. Also ohne Lorem ipsum wird nur die erste Zeile von dem Bild angezeigt. Weis jemand woran das liegt?
Auch wird mir in PhpStorm dieses ul-Tag (<ul class="slideshow">) als Fehler angzeigt: "Element ul is not closed" Doch beim Versuch es irgendwo mit einzubauen oder zu schließen geht die Slideshow kaputt.
Und div ist um die Bilder nicht erlaubt? Was soll ich da ändern?
Hier der neuste Stand meines Codes:
<!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>
<script>
$( document ).ready(function() {
console.log( "document loaded" );
});
$( window ).on( "load", function() {
console.log( "window loaded" );
});
</script>
<style>
h1 { font-size: 5.5em; background-color: DeepSkyBlue; text-align: center; }
h3 {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;
}
ul {
text-align: left;
width: 70%;
position:relative;
left: 0%;
}
.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;
}
.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>
<li class="hm2">ABOUT US</li>
<li class="hm2">DESTINATION TRIPS</li>
<li class="hm2">PICTURES</li>
<li class="hm2">CONTACT US</li>
<div style="clear:both"></div>
<h3> Hello!</h3>
<p> We are Angelina and Andreas: We enjoy taking pictures to remember great moments, like to do </p>
<div>
<li class="main-screen">
</div>
<ul class="slideshow">
<div id="nav-arrows" class="nav-arrows">
<a href="#" class="forward">Weiter</a>
<a href="#" class="backward">Zurück</a>
</div>
<h1>Pictures of our Memories</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, …</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, …</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, …</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, …</p>
<div class="column">
<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>
</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>
Damit sieht es aktuell so aus:
Vielen Dank für <Eure Hilfe idna
Gunnar Bittersmann
Der Martin
Matthias Scharwies
Matthias Apsel
Rolf B