Ergebnis 1 bis 2 von 2

Thema: CSS Vor- und zurückblättern

  1. #1
    HTML Newbie
    Registriert seit
    08.11.2012
    Beiträge
    1
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard CSS Vor- und zurückblättern

    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-Code:
    <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>
    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; }
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Teeny Avatar von styleshiet
    Registriert seit
    06.06.2012
    Beiträge
    49
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS Vor- und zurückblättern

    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;}
    HTML-Code:
    <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> 
    Geändert von styleshiet (09.11.2012 um 16:58 Uhr) Grund: CSS geändert
    Stell dir vor es ist machbar, aber keiner kriegt's hin...

    CssApps.de

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •