Beiträge von Xela

Xela

Hi Forum,

mit folgenden Codes kann man vor- und zurück blättern.
Meine Frage ist nun, wie bekommt man die radio Buttons so positioniert, dass diese unten sind?

HTML

<div id="wrapper2" align="center">
    <input type="radio" id="box1" name="nav" checked="checked" />   
    <input type="radio" id="box2" name="nav"/> 
    <input type="radio" id="box3" name="nav"/>  
    <input type="radio" id="box4" name="nav"/>   
    <input type="radio" id="box5" name="nav"/>
    <div class="holder">
        <label for="box1"><div class="switch" id="eins" ></div></label>
        <label for="box2"><div class="switch" id="zwei" ></div></label>
        <label for="box3"><div class="switch" id="drei" ></div></label>
        <label for="box4"><div class="switch" id="vier" ></div></label>
        <label for="box5"><div class="switch" id="fünf" ></div></label>
    </div>
</div>

Alles anzeigen

Code

#wrapper2 {
    position: relative;
    top: 100px;
    left: 200px;
    width: 320px;
    overflow: hidden;
    border: 1px solid #999;
    background-color: #0F0;
}


#wrapper2 .switch {
    position: relative;
    left: 160px;
    height: 160px;
    width: 160px;
    float: left;
}
#wrapper2 .holder {
    position: relative;
    width: 800px;
    border: 1px solid #f00;
    background-color: #F00;


}
#wrapper2 #eins {
    background: yellow;
    height: 75px;
}
#wrapper2 #zwei {
  background: orange;
}
#wrapper2 #drei {
  background: red;
}
#wrapper2 #vier {
  background: blue;
}
#wrapper #fünf {
  background: black;
}
#wrapper2 #box1:checked ~ div, #wrapper #box2:checked ~ div, 
#wrapper2 #box3:checked ~ div, #wrapper #box4:checked ~ div, 
#wrapper2 #box5:checked ~ div{
    -webkit-transition: 1s;
       -moz-transition: 1s;
        -ms-transition: 1s;
         -o-transition: 1s;
            transition: 1s;
}
#wrapper2 #box1:checked ~ div { margin-left: 0px; }
#wrapper2 #box2:checked ~ div { margin-left: -160px; }
#wrapper2 #box3:checked ~ div { margin-left: -320px; }
#wrapper2 #box4:checked ~ div { margin-left: -480px; }
#wrapper2 #box5:checked ~ div { margin-left: -640px; }

Alles anzeigen