CSS Vor- und zurückblättern

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

styleshiet

In deinem Beispiel sind einige Fehler! In einem Label-Tag darf kein div-container vorkommen und Umlaute sind auch nicht zulässig. Unten findest du den eingedampften und validen Code der dein Anliegen lösen sollte. Bei dieser Vorgehensweise ist eine freie Anordnung der Buttons leider nicht möglich. Wenn du damit nicht zurecht kommst schau mal auf http://cssapps.de/galerien.html ob du dort fündig wirst.

p.s. So. Nun sind die Buttons auch unten angeordnet!!!

Code

#wrapper2 { 
    margin:0 auto; 
    width: 160px;
    height:190px; 
    overflow: hidden; 
    border: 1px solid #999; 
    background-color: #0F0;
    position:relative; 
} 
#wrapper2 .switch { 
    height: 160px; 
    width: 160px; 
    float: left; 
} 
#wrapper2 .holder { 
    width: 800px; 
} 
.holder{
  position:absolute; 
  -webkit-transition: 1s; 
  -moz-transition: 1s; 
  -ms-transition: 1s; 
  -o-transition: 1s; 
  transition: 1s; 
}


input{
  position:relative;
  display:inline;
  margin-top:170px;
  float:left;
} 
 
#wrapper2 #box1:checked ~ .holder{ margin-left: 0px;} 
#wrapper2 #box2:checked ~ .holder{ margin-left: -160px;} 
#wrapper2 #box3:checked ~ .holder{ margin-left: -320px;} 
#wrapper2 #box4:checked ~ .holder{ margin-left: -480px;} 
#wrapper2 #box5:checked ~ .holder{ margin-left: -640px;} 
 
.bg_gray{background:gray;} 
.bg_blue{background:blue;} 
.bg_red{background:red;} 
.bg_orange{background:orange;} 
.bg_yellow{background:yellow;}

Alles anzeigen

HTML

<div id="wrapper2">
    <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">
        <div class="switch bg_yellow">1</div>
        <div class="switch bg_blue">2</div>
        <div class="switch bg_red">3</div>
        <div class="switch bg_orange">4</div>
        <div class="switch bg_gray">5</div>
    </div>
</div>

Alles anzeigen

Tags