Mobile Website - inhalte vertikal zentrieren

Snarkoon · 24. Januar 2014

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.

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

Anzeige

raid-rush · 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;}

Murdoc · 24. Januar 2014

AW: Mobile Website - inhalte vertikal zentrieren

Using CSS flexible boxes - Web developer guide | MDN

Snarkoon · 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

GaYlORd · 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

Nützliche Suchen

Mobile Website - inhalte vertikal zentrieren

Videos zum Themenbereich