Wieso funktioniert das 4te Bild meines Sliders nicht?

  • Die ersten 3 Bilder funktionieren aber das 4 Bild wird einfach unter dem Slider positioniert
    (was man sieht wenn man den Slider-Holder bei overflow auf shown setzt)
    Wie kann ich das Bild richtig positionieren, sodass es am Ende des Sliders ist?



    Der HTML-Teil:


    <!doctype html>
    <html>
    <head>
    <title>Bilder</title>
    <link href="style.css" type="text/css" rel="stylesheet">
    </head>
    <body>
    <div class="slider-holder">
    <span id="slider-image-1"></span>
    <span id="slider-image-2"></span>
    <span id="slider-image-3"></span>
    <span id="slider-image-4"></span>
    <div class="image-holder">
    <img width="400" height="200" src="Bild1" />
    <img width="400" height="200" src="Bild2" class="slider-image" />
    <img width="400" height="200" src="Bild3" class="slider-image" />
    <img width="400" height="200" src="Bild4" />
    </div>
    <div class="button-holder">
    <a href="#slider-image-1" class="slider-change"></a>
    <a href="#slider-image-2" class="slider-change"></a>
    <a href="#slider-image-3" class="slider-change"></a>
    <a href="#slider-image-4" class="slider-change"></a>
    </div>
    </div>
    </body>
    </html>



    Der CSS-Teil:


    .slider-holder
    {
    width: 400px;
    height: 200px;
    background-color: red;
    margin-left: auto;
    margin-right: auto;
    margin-top: 300px;
    text-align: center;
    overflow: shown;
    }

    .image-holder
    {
    width: 1200px;
    background-color: yellow;
    height: 200px;
    clear: both;
    position: relative;

    -webkit-transition: left 2s;
    -moz-transition: left 2s;
    -o-transition: left 2s;
    transition: left 2s;
    }

    .slider-image
    {
    float: left;
    margin: 0px;
    padding: 0px;
    position: relative;
    }

    #slider-image-1:target ~ .image-holder
    {
    left: 0px;
    }

    #slider-image-2:target ~ .image-holder
    {
    left: -400px;
    }

    #slider-image-3:target ~ .image-holder
    {
    left: -800px;
    }
    #slider-image-4:target ~ .image-holder
    {
    left: -1200px;
    }

    .button-holder
    {
    position: relative;
    top: -20px;
    }

    .slider-change
    {
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 5px;
    background-color: black;
    }




    Vielen Dank im Voraus :)

  • Bist du dir da absolute sicher? Oder relative? :D


    Willst Du uns veräppeln? ?(


    Hier mal ein Beispiel mit ;focus

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!