idna001: Slideshow html

0 28

Slideshow html

idna001
  • css
  • html
  • javascript
  1. 0
    Gunnar Bittersmann
    • html
    • inclusive design
    1. 0
      Der Martin
      1. 0
        Mitleser 2.0
        1. 0
          Gunnar Bittersmann
          1. 2
            Mitleser 2.0
  2. 0
    Felix Riesterer
  3. 0
    Matthias Scharwies
    1. 0
      idna001
      1. 1
        Der Martin
        1. 0
          Matthias Apsel
        2. 0
          Gunnar Bittersmann
          • css
          • html
          1. 0
            Rolf B
            1. 0
              Gunnar Bittersmann
          2. 1
            Der Martin
            1. 0
              Gunnar Bittersmann
  4. 0
    Rolf B
    1. 0
      idna001
      1. 0
        Rolf B
        1. 0
          idna001
          1. 0
            Rolf B
            1. 0
              idna001
              1. 0
                Matthias Apsel
              2. 0
                Rolf B
              3. 0
                Matthias Scharwies
                1. 0
                  idna001
                  1. 1
                    Matthias Scharwies
                    1. 0
                      Gunnar Bittersmann
                      • grafik
                      • html
                      • performance
SELF-Forum

Slideshow html

idna001 Homepage des Autors (Versionen)
– Informationen zu den Bewertungsregeln

Hallo,

ich habe versucht eine Sildeshow mit Pfeilen rechts und links zu basteln.

Im Internet habe ich ein Beispiel gefunden welches html, CSS und Javascript benutzt: https://codepen.io/msteiner/pen/YpRvaw

Irgendwie ist das Beispiel etwas unübersichtlich.

Oder gibt es vielleicht einen einfacheren eleganteren Weg eine Slideshow zu machen?

Hier ist mein Code, indem irgendwo Fehler sind, die ich noch nicht erkennen kann:

<!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>
</head>
<body>
<h1 align="center">Andreas and Angelinas Couplesite</h1>
<style>
    h1 { font-size: 5.5em; background-color: DeepSkyBlue; text-align: center; }
    p { font-size: 2.5em; }
    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: 25%;
    }

    .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>

<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>
<div style="clear:both"></div>

<h3 align="center"> Hello!</h3>
<p align="center"> We are Angelina and Andreas: We enjoy taking pictures to remember great moments, like to do </p>
</body>
</html>

<body>
<h1>Pictures of our Memories</h1>
<p>Lorem ipsum dolor sit amet, …</p>
<p>
<div id="nav-arrows" class="nav-arrows">
    <a href="#" class="forward">Weiter</a>
    <a href="#" class="backward">Zurück</a>
</div>
<div class="main-screen">
    <ul class="slideshow">
        <div class="column">
    <li class="image"><img src="..\home\img\sonne2.jpg\" width="1280" height="853" alt="sunset" class="center" class="row"/></li>
</div>
<li class="image"><img src="..\home\img\sonne1.jpg\" width="1280" height= "853" alt="secondsunset"  class="center" class="row"/></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>

</p>


</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>

Vielen dank für jeden Tipp

Grüße idna

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Slideshow html

    Gunnar Bittersmann Homepage des Autors (Versionen)
    – Informationen zu den Bewertungsregeln

    @@idna001

    ich habe versucht eine Sildeshow mit Pfeilen rechts und links zu basteln.

    Im Internet habe ich ein Beispiel gefunden welches html, CSS und Javascript benutzt: https://codepen.io/msteiner/pen/YpRvaw

    <a href="#"> (a-Element als Button missbraucht) ist ein sicheres Zeichen für unbedienbare Scheiße.

    Und ich hab wirklich nicht herausgefunden, wie man das Ding bedienen soll. Mit der Tastatur.

    In Heydon Pickerings Inclusive Components findest du einen content slider.

    Und auf den Seiten 196–232 im Buch.

    Nimm den.

    🖖 Stay hard! Stay hungry! Stay alive! Stay home!

    --
    “Turn off CSS. If the page makes no sense, fix your markup.” —fantasai
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Slideshow html

      Der Martin
      – Informationen zu den Bewertungsregeln

      n'Abend,

      <a href="#"> (a-Element als Button missbraucht) ist ein sicheres Zeichen für unbedienbare Scheiße.

      ein hartes Wort für so 'ne weiche Sache.

      Und auf den Seiten 196–232 im Buch.

      Nimm den.

      Mir ist vor allem das kaputte HTML aufgefallen, allem voran mehrere öffnende und schließende body-Tags. Das sollte man als erstes mal in Ordnung bringen.

      Live long and pros healthy,
       Martin

      --
      Home is where my beer is.
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Slideshow html

        Mitleser 2.0
        – Informationen zu den Bewertungsregeln

        n'Abend,

        <a href="#"> (a-Element als Button missbraucht) ist ein sicheres Zeichen für unbedienbare Scheiße.

        ein hartes Wort für so 'ne weiche Sache.

        This! Empathie und Wissen ist leider selten in einer Person vereint.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Slideshow html

          Gunnar Bittersmann Homepage des Autors
          – Informationen zu den Bewertungsregeln

          @@Mitleser 2.0

          Empathie und Wissen ist leider selten in einer Person vereint.

          Ich glaube, was uns unterscheidet ist nicht Empathie vs. keine Empathie, sondern wem wir Empathie entgegenbringen.

          Du bist Entwickler und bringst Empathie für deinesgleichen auf. Die so hart getroffenen Entwickler könnten vor ihren Bildschirmen heulen, wenn man ihnen sagt, dass das, was sie machen, Scheiße ist.

          Ich bin Entwickler und bringe Empathie für die Nutzer auf – für all diejenigen, die darunter leiden müssen, was Entwickler so verzapfen. Und die in Entwicklerkreisen kaum eine Stimme haben.

          Damit deren Anliegen zu Entwicklern durchdringen, erhebe ich meine Stimme. Und da nenne ich Dinge beim Namen und rede sie nicht schön.

          🖖 Stay hard! Stay hungry! Stay alive! Stay home!

          --
          “Turn off CSS. If the page makes no sense, fix your markup.” —fantasai
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Slideshow html

            Mitleser 2.0
            +2 Informationen zu den Bewertungsregeln

            Empathie und Wissen ist leider selten in einer Person vereint.

            Ich glaube, was uns unterscheidet ist nicht Empathie vs. keine Empathie, sondern wem wir Empathie entgegenbringen.

            Durchaus gewagt, das einfach mal so in den Raum zu werfen. Sehr empathisch.

            Du bist Entwickler und bringst Empathie für deinesgleichen auf. Die so hart getroffenen Entwickler könnten vor ihren Bildschirmen heulen, wenn man ihnen sagt, dass das, was sie machen, Scheiße ist.

            Woher nimmst Du Dein Wissen über meine Person? Glaskugel? Naturtalent? Man könnte Dir auch anmaßende Arroganz unterstellen, aber ich bin ja empathisch. LOL.

            Ich bin Entwickler und bringe Empathie für die Nutzer auf – für all diejenigen, die darunter leiden müssen, was Entwickler so verzapfen.

            Ehrenvolle und gute Einstellung.

            Und die in Entwicklerkreisen kaum eine Stimme haben.

            Es bleibt hier bei Unterstellungen, die Du als universelle Wahrheit in den Raum stellst.

            Damit deren Anliegen zu Entwicklern durchdringen, erhebe ich meine Stimme. Und da nenne ich Dinge beim Namen und rede sie nicht schön.

            Wer hat denn gesagt, Du sollst Misstände schön reden? Du interpretierst das rein, um Dein Gedankenkonstrukt aufrecht zu halten. Eingefordert hat das hier niemand.

            Beitrag melden
            +2
            Informationen zu den Bewertungsregeln

  2. Slideshow html

    Felix Riesterer Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Liebe(r) idna001,

    Dein HTML ist völlig kaputt. Offensichtlich ein Fall von reinem copy&paste. Außerdem sehe ich im JavaScript-Code, dass da wohl eine JavaScript-Bibliothek verwendet wird, die mir sehr nach jQuery aussieht. Das wird aber in Deinem Dokument nirgends eingebunden.

    Um Dir helfen zu können müsste ich erst einmal wissen, was Du an Deinem Code schon verstehst.

    Liebe Grüße

    Felix Riesterer

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  3. Slideshow html

    Matthias Scharwies
    – Informationen zu den Bewertungsregeln

    Herzlich wollkommen bei Selfhtml!!

    ich habe versucht eine Sildeshow mit Pfeilen rechts und links zu basteln.

    Mir ist vor allem das kaputte HTML aufgefallen, allem voran mehrere öffnende und schließende body-Tags. Das sollte man als erstes mal in Ordnung bringen.

    Hallo Idna,

    was genau an Deinem HTML nicht passt, kannst du feststellen, wenn Du Dein Beispiel online stellst und dann mit dem Validator überprüfst.

    Hier ist mein Code, indem irgendwo Fehler sind, die ich noch nicht erkennen kann:

    Nur so viel vorher:

    • Es gibt nur ein body-Element - die anderen musst Du rauslöschen
    • style muss in den head (der übrigens passt, bis auf evtl lang="en" ?)
    • align:center regelt man über CSS, z.B. mit h1 {text-align:center;}
    • Die Navigation kannst du in ein nav-Element packen, dann kannst du dir die Klasse .hm ersparen.
    • @Gunnar Bittersmann sagte schon, dass für die Bedienung eines sliders das button-Element vorgesehen ist
    • So etwas wie <div style="clear:both"></div>kann man gleich löschen, dass sollte über CSS und zwar heute lieber mit Flexbox oder Grid Layout formatiert werden.

    Oder gibt es vielleicht einen einfacheren eleganteren Weg eine Slideshow zu machen?

    Wie @Felix Riesterer schon erwähnte, verwendet Dein JavaScript jQuery, dies wird aber nicht eingebunden.

    Hier ist ein Tutorial, das dies OHNE jQuery erreicht:

    Herzliche Grüße

    Matthias Scharwies

    --
    Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Slideshow html

      idna001
      – Informationen zu den Bewertungsregeln

      Hallo,

      erstmal vielen Dank für die schnellen und guten Antworten 😀

      Ich antworte mal der Reihenfolge nach:

      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

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Slideshow html

        Der Martin
        +1 Informationen zu den Bewertungsregeln

        Moin,

        • @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?

        innerhalb des head-Elements, wie du es jetzt gemacht hast.

        Und als zweiter Fehler: Fatal Error: Cannot recover after last error. Any further errors will be ignored. mit der selben Begründung.

        Das heißt, der Validator betrachtet den ersten Fehler als so schwerwiegend, dass er den Rest gar nicht mehr untersucht.

        • Ich hatte das body-element aufgeteilt, da mir im Editor so weniger Fehler angezeigt wurden.

        Das geht nicht. Ein HTML-Dokument muss genau ein body-Element haben. Nicht mehr und nicht weniger.

        • Wenn ich die Navigation in ein nav-element packen kann soll es dann in das body-element?

        Ja. Alles, was auf der Webseite dargestellt werden soll, muss ins body-Element.

        Ich habe es ausprobiert jedoch wird der Text dann nicht mehr erkannt.

        Das liegt dann vermutlich an einem der anderen gravierenden Fehler im HTML.

        Und div ist um die Bilder nicht erlaubt?

        Doch, sicher ist es erlaubt. Die Frage ist, ob es sinnvoll ist.

        <!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>
        ...
    </script>

    <style>
        ...
    </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>

        FEHLER: Ein li-Element kann nicht für sich allein stehen, sondern muss immer ein Kindelement eines ol oder ul sein.

        <div style="clear:both"></div>

<h3> Hello!</h3>

        FEHLER: Du benutzt h1 und h3 - wo ist die Überschriftebene h2 dazwischen?

        <p> We are Angelina and Andreas: We enjoy taking pictures to remember great moments, like to do </p>
<div>
<li class="main-screen">
</div>

        FEHLER: Siehe oben - li muss ein ol oder ul als Elternelement haben. Abgesehen davon fehlt das schließende Tag </li>, und das li-Element hat keinen Inhalt.

        <ul class="slideshow">
<div id="nav-arrows" class="nav-arrows">
    <a href="#" class="forward">Weiter</a>
    <a href="#" class="backward">Zurück</a>
</div>

        FEHLER: ul darf nur li-Elemente als Kinder haben, kein 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>

        FEHLER: Siehe oben - li als Kindelement von div ist nicht erlaubt. Und die Backslashes im Pfad sind auch falsch.

        Das Stylesheet habe ich mir gar nicht genau angesehen, aber mir scheint, du hast da viel Unnützes drin. Vor allem verwendest du viel absolute Positionierung und Floating. Beides kann, wenn man es nicht richtig macht, das Layout komplett über den Haufen werfen.

        Meine Empfehlung wäre: Fang nochmal neu an. Lass die Effekte zunächst weg, nimm einfach nur statische Bilder als Platzhalter. Bau damit zuerst sauberes, korrektes und strukturell sinnvolles (semantisches) HTML.

        Darauf kannst du dann im zweiten Schritt mit CSS und den Javascript-Effekten aufbauen. Schritt für Schritt. Sonst hast du nämlich ein Dutzend Baustellen, die sich auch noch gegenseitig beeinflussen, und weißt nicht, wo du mit der Korrektur anfangen sollst.

        Live long and pros healthy,
         Martin

        --
        Home is where my beer is.
        Beitrag melden
        +1
        Informationen zu den Bewertungsregeln

        1. Slideshow html

          Matthias Apsel Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Hallo Der Martin,

          Das geht nicht. Ein HTML-Dokument muss genau ein body-Element haben. Nicht mehr und nicht weniger.

          Was aber nicht bedeutet, dass auch genau zwei verschiedene body-Tags im Quelltext stehen müssen.

          @idna001: Du solltest aber trotzdem genau ein öffnendes und genau ein schließendes body-Tag verwenden.

          Bis demnächst
          Matthias

          --
          Du kannst das Projekt SELFHTML unterstützen,
          indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

        2. Slideshow html

          Gunnar Bittersmann Homepage des Autors
          – Informationen zu den Bewertungsregeln

          @@Der Martin

          Alles, was auf der Webseite dargestellt werden soll, muss ins body-Element.

          Wirklich alles? Nein! Ein von unbeugsamen Galliern bevölkertes Dorf …

          Du wirst überrascht sein.

          🖖 Stay hard! Stay hungry! Stay alive! Stay home!

          --
          “Turn off CSS. If the page makes no sense, fix your markup.” —fantasai
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Slideshow html

            Rolf B
            – Informationen zu den Bewertungsregeln

            Hallo Gunnar,

            hihi...

            Wie wär's noch mit

            style {
   display: block;
   white-space: pre;
}

            um die Überraschung auch gleich vorzustellen?

            Rolf

            --
            sumpsi - posui - obstruxi
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Slideshow html

              Gunnar Bittersmann Homepage des Autors
              – Informationen zu den Bewertungsregeln

              @@Rolf B

              hihi...

              Wie wär's noch mit

              style {
   display: block;
   white-space: pre;
}

              um die Überraschung auch gleich vorzustellen?

              Dann aber auch gleich <style contenteditable="">.

              🖖 Stay hard! Stay hungry! Stay alive! Stay home!

              --
              “Turn off CSS. If the page makes no sense, fix your markup.” —fantasai
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

          2. Slideshow html

            Der Martin
            +1 Informationen zu den Bewertungsregeln

            Hallo Gunnar,

            Alles, was auf der Webseite dargestellt werden soll, muss ins body-Element.

            Wirklich alles? Nein! Ein von unbeugsamen Galliern bevölkertes Dorf …

            Du wirst überrascht sein.

            nein, eigentlich nicht. Das kannte ich schon. Aber lies meinen Satz, den du zitiert hast, nochmal aufmerksam. Besonders den Teil "dargestellt werden soll".

            Der Titel der Seite oder meinetwegen auch irgendein meta-Element kann zwar auch innerhalb der Seite dangezeigt werden. Das ist aber nicht vorgesehen und nicht üblich, und wird möglicherweise auch nicht von allen Browsern unterstützt - eben weil es so nicht gedacht ist.

            Live long and pros healthy,
             Martin

            --
            Home is where my beer is.
            Beitrag melden
            +1
            Informationen zu den Bewertungsregeln

            1. Slideshow html

              Gunnar Bittersmann Homepage des Autors (Versionen)
              – Informationen zu den Bewertungsregeln

              @@Der Martin

              Alles, was auf der Webseite dargestellt werden soll, muss ins body-Element.

              Wirklich alles? Nein! Ein von unbeugsamen Galliern bevölkertes Dorf …

              Du wirst überrascht sein.

              nein, eigentlich nicht. Das kannte ich schon. Aber lies meinen Satz, den du zitiert hast, nochmal aufmerksam. Besonders den Teil "dargestellt werden soll".

              Ich könnte mir Anwendungsfälle vorstellen, wo im head getätigte Meta-Informationen (Autor, Datum, …) auch auf der Webseite dargestellt werden sollen, ohne dass die Information gedoppelt wird.

              Der Titel der Seite oder meinetwegen auch irgendein meta-Element kann zwar auch innerhalb der Seite dangezeigt werden.

              Du sagst es.

              Das ist aber nicht vorgesehen

              Das sagt wer?

              und nicht üblich

              Da hat du wohl recht.

              und wird möglicherweise auch nicht von allen Browsern unterstützt

              head und seine Nachfahren sind DOM-Elemente wie andere auch. Mir ist noch kein Browser begegnet, der Stilangaben darauf nicht anwenden würde. title solle kein Problem sein.

              Dem eigentlich inhaltsleeren meta-Element CSS-generierten Inhalt zu geben, dem könnten sich Browser schon eher entziehen. Dieser Test gelingt aber in Firefox, Safari und Chrome.

              🖖 Stay hard! Stay hungry! Stay alive! Stay home!

              --
              “Turn off CSS. If the page makes no sense, fix your markup.” —fantasai
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

  4. Slideshow html

    Rolf B
    – Informationen zu den Bewertungsregeln

    Hallo idna001,

    du hast etliche Hinweise auf Probleme bekommen. Das entscheidende Problem dürfte aber vor der Tastatur liegen. Felix hat nicht ohne Grund gefragt:

    Um Dir helfen zu können müsste ich erst einmal wissen, was Du an Deinem Code schon verstehst.

    Das HTML Durcheinander, das Du präsentierst, deutet darauf hin, dass die Antwort "so gut wie nichts" lautet, weil Du gerade erst ins Thema einsteigst und noch eine steile Lernkurve vor Dir hast.

    Unser Wiki hat umfangreiche Einsteigertutorials, diese Zeit solltest Du investieren. Ohne Grundlagen von HTML und CSS wirst Du eigenständig nichts auf die Reihe bringen, und auch die komplexeren Tutorials nicht verstehen können.

    Ein paar Details wird man Dir sicherlich im Forum zeigen können. Aber die Grundlagen musst Du Dir erarbeiten.

    Rolf

    --
    sumpsi - posui - obstruxi
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Slideshow html

      idna001
      – Informationen zu den Bewertungsregeln

      @Der Martin:

      Danke für die sehr ausführliche Antwort.

      Ich habe nochmal versucht die Navigation in body mit einzubinden jedoch wird es nicht erkannt. Mir fehlt ja eigentlich auch nur die richtige Positionierung der ganzen Slideshow, denn ansonsten funktioniert sie ja schon....

      Sie läuft automatisch und wenn man die Buttons findet (:-)) kann man auch draufdrücken.

      <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>

      Hier ist jetzt kein Fehler mehr, ich habe es so gemacht wie beschrieben. Jedoch da ich ul geschlossen habe wird die slideshow nicht mehr angezeigt. :(

      Dafür habe ich jetzt in meinem Editor von den 30 Ursprungswarnungen nur noch 20. :)

      Hier nochmal die neueste Version, auch mit allen anderen Änderungen:

      <!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; }
        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;
        }


        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;
        }


    </style>

</head>
<body>
<h1>Andreas and Angelinas Couplesite</h1>
<nav>
.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;
}
</nav>

<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>

<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>
<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">
    <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>

      @Rolf B: habe vorher noch gar nichts mit html gemacht - ich bin gerade erst dabei mir es beizubringen!

      Dabei hat mir diese Seite hier schon viel geholfen. Hatte jetzt auch noch keine großen Probleme, bis auf die Slideshow die ich mir aus dem Internet kopiert habe. Da leider keine Erklärung der Begriffe und Kombinationen dabei war komme ich da nicht ganz klar.

      Aber eigentlich habe ich ja im Moment nur noch das Problem, dass die Slideshow an der falschen Stelle positioniert ist und das übrige dadurch auch verschoben und nicht mehr korrekt angezeigt wird.

      Grüsse idna

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Slideshow html

        Rolf B
        – Informationen zu den Bewertungsregeln

        Hallo idna001,

        Aber eigentlich habe ich ja im Moment nur noch das Problem ...

        ...dass Du nicht weißt, was Du tust, und es rein zufälligerweise funktioniert.

           <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

        Diese Zeile brauchst Du, aber den Script-Block direkt darunter, von <script> bis </script>, den kannst Du löschen. Der tut nichts weiter als "document loaded" und "windows loaded" auszugeben, sobald die entsprechenden Ereignisse vom Browser signalisiert werden.

        <nav>
... jede Menge Styles
</nav>

        das passt überhaupt nicht. <nav>...</nav> ist ein HTML Element, das dazu dient, Navigationsbereiche zu kennzeichnen. Die <li> Elemente, die direkt unter dem <nav> Bereich stehen, gehören dort hinein. Natürlich nochmal in ein Listen-Element eingeschlossen.

        Also nach diesem Muster:

        <nav>
   <ul>
      <li>...</li>
      <li>...</li>
      <li>...</li>
   </ul>
</nav>

        Das, was jetzt Inhalt des <nav> Blocks ist, sind Style-Angaben für die Diashow. Die greifen derzeit nicht. Damit sie das tun, musst Du sie nach oben verschieben, in den durch <style>...</style> begrenzten Bereich hinein. Wo der Browser nach Styles sucht, erklärt Dir der CSS Bereich unseres Wikis.

        Achte beim Verschieben der Styles dabei darauf, dass nichts kaputt geht: In <style> stehen Style-Regeln. Jede einzelne Regel ist, ganz grob, ein Block, der folgendem Schema folgt, und dieses Schema muss strikt eingehalten werden, sonst versteht der Browser es nicht. Ok, Kommentarbereiche gibt's da auch, die werden durch /* ... */ gebildet.

        Selektor {
   Eigenschaft:Wert;
   Eigenschaft:Wert;
   Eigenschaft:Wert;
}

        Das <ul> Element ist in deinen Styles übrigens vorgesehen, du hast es nur scheinbar aus dem HTML entfernt. Vermutlich, weil es sich mit dem <ul> Element der Slideshow gebissen hat. Man kann verschiedene ul Elemente aber auch unterschiedlich stylen.

        Deine derzeitige Navigation ist mit float:left gemacht. So war es früher üblich, bevor es Flexbox gab. Das ist ganz einfach. Im Moment hast Du:

                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%;
        }

        Der erste ul Block war sicherlich für deine Navigation gedacht. Wofür der zweite dient, weiß ich nicht. Wenn Du einfach nur ul als Selektor schreibst, gilt die Regel für Navigation und Slideshow, und stört vermutlich beide. Meine Empfehlung wäre, den Inhalt des zweiten ul Blocks in den .slideshow Block weiter unten zu verschieben, weil mir nicht ersichtlich ist, was davon für die Navigation wichtig wäre. Zumindest das position:relative ist für die Slideshow wichtig, weil die Bilder mit position:absolute Positioniert werden, und die brauchen ein position:relative Element als Bezugspunkt (ansonsten ist der Bezugspunkt oben links im Dokument[1]).

        Und die width: Angabe ist dann doppelt, width:70% kann weg weil das vom width:100% im .slideshow Block eh überschrieben wird.

        Für das Menü-ul verwende den Selektor nav ul { ... } - heißt: Nur für ein ul Element, das Kind eines nav Elements ist.

        Für die Slideshow gibt's jetzt schon einen Selektor: .slideshow { ... } - heißt: Für ein Element, bei dem die Klasse slideshow notiert ist. Das könnte man auch als ul.slideshow notieren, aber es ist üblich, Selektoren nicht genauer zu machen als unbedingt nötig.

        Die li Elemente im Menü hast Du derzeit mit einem Klassenselektor identifiziert (li.hm2), das kannst Du aber auch mittels nav li machen, also li die in einem nav Element eingeschlossen sind. Dann ist es konsistent zum ul Element. Und die class="hm2" Angabe an den li Elementen des Hauptmenüs kann dann auch weg.

        Das float:left kann ebenfalls weg, und dem ul Element der Navigation gibst Du display:flex;. Damit wird die Liste zur Flexbox und die li darin werden nebeneinander angeordnet. Mit anderen Flexbox-Eigenschaften (z.B. justify-content kannst Du angeben, wo die li platziert werden. Links, mitte, rechts, wie wird der Leerraum verteilt, Flexbox hat viele Optionen.

           nav ul {
      font-size: 2em;
      display: flex;
   }
   nav li {
      /* Aufzählungspunkte entfernen */
      list-style-type: none;
      /* Abstand */
      margin-right: 15px;
   }

   .slideshow {
      text-align: left;
      width: 70%;
      position:relative;
      left: 0%;
   }

        Die nächste Edition deiner Seite solltest Du vielleicht online vorzeigen. Dann kann man sie mit den Browser-Entwicklerwerkzeugen (kennst Du die? F12 Taste?) inspizieren und live untersuchen.

        Rolf

        --
        sumpsi - posui - obstruxi

        1. Ja Gunnar, ich weiß dass der richtige Begriff "Viewport" ist, aber das wird mir hier zu kompliziert zu erklären ↩︎

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Slideshow html

          idna001
          – Informationen zu den Bewertungsregeln

          @Rolf B: Vielen vielen Dank für deine Mühe und ausführlichen Antworten!

          “ ...dass Du nicht weißt, was Du tust, und es rein zufälligerweise funktioniert.”: ...stimmt, aber irgendwie musste ich halt mal anfangen 😀

          Ich habe einige Änderungen übernommen:

          script-element ist entfernt

          Navigationsbereich teilweise, jedoch bin ich mir nicht ganz sicher ob die tags: <nav> und </nav> an korrekter >Stelle sind. Das li.hm2 und ul habe ich ja für die Zentrierung meiner Menüpunkte. Daher brauche ich das doch, oder?

          Bei dem Versuch deinen Vorschlag einzufügen, wurden meine Menüpunkte nämlich wieder ganz links und untereinander geschrieben.

          So sieht es jetzt aktuell aus:

          <!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: 0%;
 
        }
 
        .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>
 
<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 our 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>

          Im style-Element wird mir noch als einziges .activity ausgegraut. Das war aber schon von Anfang so, fehlt da noch irgendwas?

          Wie kann ich denn die Position, an der die Slideshow stattfindet, verändern?

          Vielen Dank und Grüße

          idna

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Slideshow html

            Rolf B
            – Informationen zu den Bewertungsregeln

            Hallo idna001,

            jedoch bin ich mir nicht ganz sicher ob die tags: <nav> und </nav> an korrekter >Stelle sind.

            Ich bin mir ganz sicher, dass sie nicht an der richtigen Stelle sind. Lies meinen Beitrag nochmal, und kopiere nicht nur Code.

            Das li.hm2 und ul habe ich ja für die Zentrierung meiner Menüpunkte.

            Ich wüsste nicht, wo da CSS Eigenschaften wären, die das Menü zentrieren. Vor allem, wo Du das <ul> Element für's Menü immer noch vergessen hast.

            Zentriert werden durch deine CSS Regeln nur <p> Elemente, also dein Text "We are Angelina and Andreas..." - ob Du das willst, da bin ich mir nicht sicher.

            Daher brauche ich das doch, oder?

            Wenn Du die Menüpunkte zentrieren willst, lies nochmal, was ich über Flexbox und justify-content geschrieben und verlinkt habe. Im Moment habe ich den Eindruck, dass Du maximal die Hälfte von dem gelesen hast, was ich geschrieben habe.

            Dass .active (nicht activity) ausgegraut wird, dürfte daran liegen, dass diese Klasse ausschließlich über das Script gesetzt wird und nicht direkt im HTML vorkommt. Was Scripte tun, wird von solchen Helferlein zumeist ignoriert, und darum meint dein Editor wohl, diese CSS Regel sei überflüssig. Ignoriere das (oder schreib Dir einen /* Kommentar */ darüber).

            Rolf

            --
            sumpsi - posui - obstruxi
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Slideshow html

              idna001
              – Informationen zu den Bewertungsregeln

              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

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Slideshow html

                Matthias Apsel Homepage des Autors
                – Informationen zu den Bewertungsregeln

                Hallo idna001,

                Die nächste Edition deiner Seite solltest Du vielleicht online vorzeigen. Dann kann man sie mit den Browser-Entwicklerwerkzeugen (kennst Du die? F12 Taste?) inspizieren und live untersuchen.

                Das geht zum Beispiel bei bplaced.net. Damit machst du es potenziellen Helfern wesentlich einfacher.

                Bis demnächst
                Matthias

                --
                Du kannst das Projekt SELFHTML unterstützen,
                indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

              2. Slideshow html

                Rolf B
                – Informationen zu den Bewertungsregeln

                Hallo idna001,

                so wird das nichts. Ich habe den Eindruck, dass Du die bisherigen Erklärungen nicht wirklich verstanden hast, und nach dem Zufallsprinzip herumbastelst. In der Hoffnung, dass sich einer erbarmt und Dir was fertiges zum Abschreiben vorsetzt.

                Dieser Eindruck mag trügen. Ich habe ihn aber trotzdem.

                Werde Dir über den Grundaufbau der Seite klar. Du hast

                • Header
                • Übergreifende Navigation
                • Einleitungstext
                • Slideshow

                Werde Dir darüber klar, welcher Teil des HTML welchem Teil der Seite gehört.

                Werde Dir auch darüber klar, welche CSS Regeln welchen Teil des HTML beeinflussen. Da liegt einiges im Argen.

                Beispielsweise:

                • Du hast zwei <ul> Listen. Eine davon ist die Liste der Punkte im Hauptmenü, die andere ist die Liste der Bilder in der Slideshow. Diese ul Elemente haben grundsätzlich verschiedene Funktion und grundsätzlich verschiedenes Layout. Wenn Du die im CSS stumpf mit
                ul {
   ...
}

                ansprichst, dann ist das eine Regel, die beide Listen trifft. Das wird aber nur ausnahmsweise das sein, was Du willst.

                • Du hast da ein herrenloses <li class="main-screen"> mit einem CSS Styling auf z-index:98; padding;0; width:100%; height:100%. In deinem zuerst vorgestellten HTML war das Element mit der Klasse main-screen noch ein div, das um die Slideshow herumgelegt war. Ja was denn nun?

                • Dafür befindest sich deine Slideshow nun in einem div mit der Klasse column. Diese Klasse bringt im CSS ein float:left und width:50% mit. Soll sich die Slideshow in der linken Hälfte des Browserfensters befinden und dessen halbe Breite einnehmen? Soll der Rest der Seite rechts von der Slideshow erscheinen? Das war im ersten Posting noch ganz anders.

                Also, totales Durcheinander, und ich verstehe auch nicht wie deine Slideshow wirklich aussehen soll. Keine Ahnung, was davon verquaste Vorlage ist, und was bei Deiner Übernahme kaputtgegangen ist.

                Sorry - aber ich bin raus. Das zu sortieren ist mir zu mühsam.

                Rolf

                --
                sumpsi - posui - obstruxi
                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

              3. Slideshow html

                Matthias Scharwies (Versionen)
                – Informationen zu den Bewertungsregeln

                Servus!

                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.

                Mein Tipp: Mach mal eine Pause vom praktischen Arbeiten und lies ein bisschen:

                HTML/Tutorials/HTML5/Seitenstrukturierung

                • Verwende die passende Elemente, dann benötigst du weniger Klassen und ids

                HTML/Tutorials/Einstieg in HTML

                • … wirkt auf uns Profis langatmig - trotzdem ist dort alles der Reihe nach erklärt! … und daher lesenswert!

                HTML/Tutorials/responsive Webdesign

                • bestehende_Webseiten_umbauen Du hast viel altes Markup und überflüssiges, sich widersprechendes CSS drin, deshalb ist dieses Kapitel wichtig.
                • Bau erst einmal eine "Mobile first!"-Webseite, in der alles untereinander steht.
                • Wenn das klappt, kannst du anfangen, für breitere Viewports Elemente nebeneinander unterzubringen.

                Herzliche Grüße

                Matthias Scharwies

                --
                Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. Slideshow html

                  idna001
                  – Informationen zu den Bewertungsregeln

                  @Matthias Apsel

                  eigentlich wollte ich das ja von meinem Raspberry aus hosten....

                  Ich weiß nur noch nicht genau, wie ich das machen soll, da ich dort auch noch andere Programme wie Homebridge am laufen habe :-)

                  Ich habe trotzdem versucht meine Seite auf bplaced hochzuladen, jedoch habe ich da auch noch Probleme...

                  @Rolf B

                  hier https://codepen.io/msteiner/pen/YpRvaw ist die Seite, von der ich mir den Slideshow-teil geholt habe, da kann man sich diese auch anschauen.

                  Mittlerweile habe ich die slideshow auch zum Laufen gebracht, und zwar nachdem ich dieses Element entfernt habe:

                  
        ul {
            text-align: left;
            width: 70%;
            position:relative;
            left: 38%;

        }

                  Hatte ich es an der falschen Stelle? Oder beißt sich das mit der Slideshow? Weiß vielleicht jemand ob es einen anderen Weg oder einen anderen Platz dafür gibt meine Menüpunkte zu zentrieren?

                  Hier noch ein aktuelles Bild, wie ich es mir auch vorgestellt hatte :) (bis auf die noch nicht vollständig zentrierten Menüpunkte):

                  Und mein aktueller 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;
        }

        .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: 50;
            width: 100%;
            height: 100%;
            left: 20%;
            top: 50%;
            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: black;
            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 id="nav-arrows" class="nav-arrows">
    <a href="#" class="forward">Weiter</a>
    <a href="#" class="backward">Zurück</a>
</div>


<div class="main-screen">
    <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>

<h1>Pictures of ur Memories</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, …</p>

</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>

                  @Matthias Scharwies

                  okay, vielen Dank für die Links, ich werde mich da jetzt mal einlesen.

                  Grüße idna

                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln

                  1. Slideshow html

                    Matthias Scharwies
                    +1 Informationen zu den Bewertungsregeln

                    Hallo Ina,

                    Dein HTML-Markup sieht besser aus. Nur das <div style="clear:both"></div> hat keinen Inhalt, kann also weg (wurde aber auch schon mehrfach gesagt!)

                    @Rolf B schrieb:

                    Beispielsweise: Du hast zwei <ul> Listen. Eine davon ist die Liste der Punkte im Hauptmenü, die andere ist die Liste der Bilder in der Slideshow. Diese ul Elemente haben grundsätzlich verschiedene Funktion und grundsätzlich verschiedenes Layout. Wenn Du die im CSS stumpf mit

                    ul {
   ...
}

                    ansprichst, dann ist das eine Regel, die beide Listen trifft. Das wird aber nur ausnahmsweise das sein, was Du willst.

                    Mittlerweile habe ich die slideshow auch zum Laufen gebracht, und zwar nachdem ich dieses Element entfernt habe:

                    
        ul {
            text-align: left;
            width: 70%;
            position:relative;
            left: 38%;

        }

                    Hatte ich es an der falschen Stelle? Oder beißt sich das mit der Slideshow?

                    Das ist genau das, was Rolf angesprochen und bereits erklärt hat. Anstelle der Klasse hm2 kannst Du die Navi mit diesem CSS-Regelsatz ansprechen:

                    nav ul {
  /* nichts drin */
}
nav li {
  display: inline;   /* zeigt li nebeneinander an; nicht mit float machen!!! */  
  list-style-type: none;
  margin-right: 15px;
}

                    Deine Slide-Show ist auch eine Liste, die aber anders formatiert werden soll -> also benötigt man einen anderen Selektor:

                    .slideshow li {

}

.slideshow img {

}

                    Dies wäre viel übersichtlicher als die Klassen

                    <li class="image"><img src="" class="center" /></li>.

                    BTW: Die width- und height-Angaben der Bilder kannst du auch per CSS festlegen, am bestem mit %-Angaben und nicht mit festen Pixeln.

                    Weiß vielleicht jemand ob es einen anderen Weg oder einen anderen Platz dafür gibt meine Menüpunkte zu zentrieren?

                    Ja! HTML/Tutorials/Navigation/Dropdown-Menü

                    Herzliche Grüße

                    Matthias Scharwies

                    --
                    Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
                    Beitrag melden
                    +1
                    Informationen zu den Bewertungsregeln

                    1. Slideshow html

                      Gunnar Bittersmann Homepage des Autors
                      – Informationen zu den Bewertungsregeln

                      @@Matthias Scharwies

                      BTW: Die width- und height-Angaben der Bilder kannst du auch per CSS festlegen, am bestem mit %-Angaben und nicht mit festen Pixeln.

                      Die Angabe der intrinsischen Bildmaße mit width- und height-Attributen ist trotzdem sehr ratsam.

                      ☞ Setting Height And Width On Images Is Important Again

                      😷 LLAP

                      --
                      „Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“ —@Ann_Waeltin
                      Beitrag melden
                      –
                      Informationen zu den Bewertungsregeln