Mobile Website - inhalte vertikal zentrieren

Dieses Thema im Forum "Webdesign" wurde erstellt von Snarkoon, 24. Januar 2014 .

  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  1. #1 24. Januar 2014
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    Hallo liebe RR'ler,

    ich sitze momentan an einem Projekt von der Uni.
    Im Projekt geht es darum eine mobile Website zu bauen und diese mit Animationen von Adobe Edge zu gestalten. Der Hintergrund dabei ist, dass wir diese über einen QR-Code aufrufen und wir davon ausgehen sollen, dass wir genau wissen wo der Kunde sich befindet wenn er das tut. Also ein fester Ort.
    So viel zur Aufgabe.

    Mein Problem:

    Ich habe eine Website die sich immer an die Displaygröße anpassen soll, egal ob landscape modus oder nicht. Die div's sind dabei immer so groß wie der Browser, bzw der viewport. Ich hab das Sichtfeld in zwei divs geteilt und möchte Elemente dieser Divs vertikal zentrieren. Diese Elemente zu zentrieren schaffe ich nicht. Und finde keine Lösung.

    Hier eine kleine Skizze.
    [​IMG]

    Und hier mein bisheriger Code:
    html
    Code:
    <body>
     <div id="one">
     <div id="oneleftside">
     <div id="outer">
     <img src="leeres-glas.png" width="300" height="636" class="ri"></div>
     </div>
     <div id="onerightside">
     <div class="textbox">
     <div class="pad5"><h1 class="becksred">Ärgerlich!</h1></div>
     <div class="pad10"><h3 class="becksgrey">Da ist das Bier schon alle.</h3></div>
     </div>
     </div>
    </div>
    
    
    
    

    css
    Code:
    @charset "utf-8";
    
     body, html {
     height: 100%;
     margin:0;
    }
    .becksgrey {
     color:#383536; 
    }
    .becksred {
     color:#ed3237; 
    }
    .beckswhite {
     color:white; 
    }
    h1 {
     font-size: 8vw;
    }
    h2 {
     font-size: 3.0vh;
    }
    h3 {
     font-size: 4vmax;
    }
    .pad10 {
    margin-left:10%;
    margin-right:10%;
    }
    .pad5 {
     margin-left:5%;
     margin-right:5%;
    }
    .textbox {
    margin-bot:auto;
    margin-top:atuo;
    font-family:Arial, Helvetica, sans-serif;
    }
    
    
    
    
    #one {
     height: 100%;
     background-color:white;
    }
    #oneleftside
    {
     float:left;
     height:100%;
     width:50%;
     display:inline-block; 
    }
    
    #oneleftside img
    {
    
     
     vertical-align:middle;
     float:right;
     height:auto;
     max-width:30vw;
     
    }
    
    #onerightside
    {
     float:right;
     height:100%;
     width:50%;
     
     
    }
    
    
    Dazu sei gesagt, dass alle Elemente responsive sein sollen - wenn möglich.
    Ich hoffe hier kann mir jemand behilflich sein. Im Internet konnte ich keine Lösung finden, habe Ansätze aber keiner führte zum Ergebnis.


    lg
    Snarkoon
     

  2. Anzeige
  3. #2 24. Januar 2014
    AW: Mobile Website - inhalte vertikal zentrieren

    da ist ein fehler:

    margin-bot:auto;
    margin-top:atuo;

    heißt das normal nicht margin-bottom?
    versuch mal margin: 0px auto; oder umgekehrt
    dabei beachten das das element display:block; und die width fix angegeben ist.

    #textbox {margin: 0px auto; width:200px; display:block;}
     
  4. #3 24. Januar 2014
  5. #4 24. Januar 2014
    AW: Mobile Website - inhalte vertikal zentrieren

    Hey raid,

    danke für deine Hilfe. Den Fehler hab ich behoben.

    Nur leider bringt dein Ansatz ebenfalls keinen Erfolg. :( Das Element wird nicht zentriert.

    lg
     
  6. #5 24. Januar 2014
    AW: Mobile Website - inhalte vertikal zentrieren

    Sry, bin nicht mehr ganz nüchtern, aber sind display:inline-block; und float:wherever; nicht zusammen überflüssig?
    Mach mal nur display: inline-block; mit vertical-align:middle; und lasse die floats weg.
    Packe beide (also "left" und "right" mit inline-block) in einen DIV (zB wrapper), der eine gewisse höhe hat. Positioniere die divs "right" und "left" mit margin und padding in % innerhalb vom wrapper. Das sollte doch klappen.

    Gruß
    gl
     

  7. Videos zum Thema
Die Seite wird geladen...
Similar Threads - Mobile Website inhalte
  1. Mobile Daten Cubot H1

    HandyGarden , 20. Juni 2016 , im Forum: Mobile OS & Apps
    Antworten:
    2
    Aufrufe:
    870
  2. Antworten:
    5
    Aufrufe:
    657
  3. Antworten:
    4
    Aufrufe:
    1.261
  4. Antworten:
    6
    Aufrufe:
    2.835
  5. Antworten:
    3
    Aufrufe:
    1.145