Vollständige Version anzeigen : Mobile Website - inhalte vertikal zentrieren


Snarkoon
24.01.2014, 11:00

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.
;;0;xup~in/exec/ximg;php?fid=13264308 (;;;xup~in/dl,13264308/screenshot;jpg/)

Und hier mein bisheriger Code:
html

<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

;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

Hardware Preisvergleich | Amazon Blitzangebote!

Videos zum Thema
Video Loading...
raid-rush
24.01.2014, 13:45

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.01.2014, 13:56

Using CSS flexible boxes - Web developer guide | MDN (;developer;mozilla~org/en-US/docs/Web/Guide/CSS/Flexible_boxes)


Snarkoon
24.01.2014, 13:57

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.01.2014, 14:59

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


Ähnliche Themen zu Mobile Website - inhalte vertikal zentrieren
  • [Signatur] Batman vertikal
    ein tribut an den helden meiner kindheit. ist bewusst schlicht gehalten. c&c bitte. stock (;;;d78~de/images/1253289790Batman_Arkham_Asylum_02;jpg) gruß DonGeilo [...]

  • Spiegeln-vertikal
    cheers. Kann mir bitte mal jemand folgendes bild spiegeln ? ;;;xup~in/pic,16251466/rip;gif inklusive schrift bitte. vielen dank freak. [...]

  • [HTML] Website - Template für mobile Endgeräte
    Hi, erstmal vorab: Ich hoffe dies ist der richtige Bereich für mein Beitrag! Ich bin auf der Suche nach einem (oder mehreren) Template für Websites für mobile Endgeräte (insbesondere iPod/iPhone) auf Basis von HTML/PHP/CSS. Hintergrund: Ich muss eine Website entwickeln welche auf mehreren [...]

  • Website zentrieren
    Hallo Leute, ich hab mal wieder ne Frage: Hab mit mit PS ne Webseite gemacht mit den Abmessungen 1280x1024 px. Wass muss ich machen, damit die Seite dem Browser entsprechend zentriert wird, also wenn einer ne kleinere Auflösung hat, dass die Seite halt dann so gezerrt wird, dass sie in seinem Brow [...]



raid-rush.ws | Imprint & Contact pr