Vertikales Positionieren funktioniert einfach nicht

ChristianW · 8. Juni 2014

Hey,

Ich habe lange rumversucht aber bekomme es einfach nicht hin. Mittig (horizontal) ist für mich kein Problem doch das vertical-align: middle; will einfach nicht. Gestern gabs dafür schon einen Thread womit ein Code in jsFiddle gepostet wurde, dennoch shcaffe ich es einfach nicht.

Ich würde erfreut drüber sein, wenn mir jmd ein minimales Beispiel machen könnte.

Dazu einmal einloggen auf http://www.ucp.nico-wiss.de (xLuca, luca) Sry Flashboot: danach siehtr man schon, das die Aktivierung noicht Vertikal in der Mitte ist, ein minimales Bsp. wäre dazu sehr nett.

Nico

Edgar · 8. Juni 2014

Es gibt mehrere Möglichkeiten, ich empfehle dir erstmal solche Informationsboxen zu gruppieren.

Schau dir mal das an:
http://jsfiddle.net/Cireyses/y6NwM/
Die Klasse infoWrapper bestimmt den Abstand von Oben, Rechts, Unten und Links, dass musst du dann anpassen.
In der Klasse infobox ist das Bild vorhanden sowie der text über <p></p>

Edit:

Du solltest auch dein Template deiner Seite bearbeiten,
du solltest dein main_content auch benutzen, damit alles immer in der Mitte bleibt und sich nicht links und rechts verschieben.
Ich habe das mal eingefügt, schau:
Erstmal unter #main_content > min-height: 780px; entfernen.
Dann folgendes hinzufügen/ändern

Code

<style type="text/css">
.infobox {
    padding: 15px 10px 15px 40px;
    background: url(http://www.ucp.nico-wiss.de/img/info.png);
    background-repeat: no-repeat;
    background-position: 15px 50%;
}


.infobox p {
    color: #fff;
    font-size: 16px;
    padding-left: 10px;
    font-weight: bold;
    font-family: arial;
    padding-left: 25px;
}


.infoWrapper {
    padding: 30px 125px; 
    padding-left: 0; 
}
</style>


<div id="mng_li">
    <div id="main_content">
        <div class="infoWrapper">
            <div class="infobox">
                <p>Dein Account wurde noch nicht aktiviert! Hier kannst du deinen Account aktivieren!</p>
            </div>
        </div>
	</div>
</div>

Alles anzeigen

Das sieht dann so aus, einmal normal und raus/rangezoom:

Normal: https://s3.amazonaws.com/fvd-d…219036-KavfLC/screen.jpeg
Gezoomt: https://s3.amazonaws.com/fvd-d…219035-igHody/screen.jpeg

ChristianW · 8. Juni 2014

Zitat von Cireyses

Das sieht dann so aus, einmal normal und raus/rangezoom:

Hey,

Dafür wollte ich später mit Mediaqueries arbeiten?

Also ich habs mal eingefügt und nun ist zwar auf selber höhe aber
http://prntscr.com/3qr1l3

nicht in der Mitte?

Die gesamte Box ist 251px hoch

Edgar · 8. Juni 2014

Okay, ändere den Style von infoWrapper zu

padding: 30px 0px;
margin: auto;
display: table;

Dann bleibt es in der Mitte.

ChristianW · 8. Juni 2014

Zitat von Cireyses

padding: 30px 0px;
margin: auto;
display: table;

http://prntscr.com/3qr3rv

Nee geht leider nicht, soll ich s dir nocheinmal uploaden?

Edgar · 8. Juni 2014

Also bei mir funktioniert es:

Normal: https://s3.amazonaws.com/fvd-d…219863-hEtNhs/screen.jpeg
Zoom (in): https://s3.amazonaws.com/fvd-d…219880-PUU7DW/screen.jpeg
Zoom (out): https://s3.amazonaws.com/fvd-d…219877-xSkLA6/screen.jpeg

Edit:
Ja, lad mal die Seite neu hoch.

ChristianW · 8. Juni 2014

Bei mir will es irgendwie nicht?

VitoHusky · 8. Juni 2014

Zitat von NicoWiss

Bei mir will es irgendwie nicht?

Kannst du evtl. versuchen dein Problem ein wenig spezifischer darzustellen?

ChristianW · 8. Juni 2014

Zitat von Dark.Shadow

Kannst du evtl. versuchen dein Problem ein wenig spezifischer darzustellen?

Mein problem ist genau 2 Beiträge über dir in einem Screenshot verfasst?

Edgar · 8. Juni 2014

Welchen Browser benutzt du?

ChristianW · 8. Juni 2014

Zitat von Cireyses

Welchen Browser benutzt du?

Sowohl in Firefox, und Chrome gehts nicht aber ich uploade es dir mal ?

//Uploadet

Edgar · 8. Juni 2014

Funktioniert problemlos :I

Schon die Cache gelöscht?

ChristianW · 8. Juni 2014

Zitat von Cireyses

Funktioniert problemlos :I

Schon die Cache gelöscht?

Hab leicht was geändert, geht nun bei mir auch,

Hättest du evtl noch ne idee wie ich den footer unten dran bekomme, mit bottom 0; wills iwie nicht gehen?

Edgar · 8. Juni 2014

Jetzt ist es im vertikalen nicht in der Mitte

Was genau möchtest du denn mit dem Footer?

Erstell mal ein Screen von der Website so wie ich, nicht nur den Teil mit der Info.

ChristianW · 8. Juni 2014

http://prntscr.com/3qrawt

So dachte ich es mir,

//Zur Infobox
Es soll nur höhenmässig in der Mitte sein Aber bei mir lokal geht alles habs auf 2 Notebooks getestet

Edgar · 8. Juni 2014

Schaust du über dein Fernseher?

Am Anfang hatte ich die Infobox nur in der höhe in der Mitte und horizontal war es links ...

Aber wenn es dir so passt.

Mit position: absolute; könntest du den Footer ganz unten haben, Problem:
Leute die einen normalen Bildschirm haben sehen es so:
https://s3.amazonaws.com/fvd-d…222121-chdDc0/screen.jpeg

Erstell eine Javascript Funktion die ausrechnet wie groß der Bildschirm ist und die main_content dann auf min-height den Wert setzt.

ChristianW · 8. Juni 2014

Zitat von Cireyses

Schaust du über dein Fernseher?

Am Anfang hatte ich die Infobox nur in der höhe in der Mitte und horizontal war es links ...

Aber wenn es dir so passt.

Mit position: absolute; könntest du den Footer ganz unten haben, Problem:
Leute die einen normalen Bildschirm haben sehen es so:
https://s3.amazonaws.com/fvd-d…222121-chdDc0/screen.jpeg

Erstell eine Javascript Funktion die ausrechnet wie groß der Bildschirm ist und die main_content dann auf min-height den Wert setzt.

Alles anzeigen

Nein ich habe einen 22 Zoll Bildschirm habs aber gerade herausgezoomt um zu demonstrieren das der footer nicht ganz unten an der Seite ist und MMn muss man das doch mit bottom: 0; lösen?

Edgar · 8. Juni 2014

Wie gesagt:
position: absolute;
und dann bottom: 0;

aber wie du auf dem Screen sehen kannst wird das problematisch.

Die Javascript variante ist eine die du nutzen kannst.

ChristianW · 8. Juni 2014

Bei "Fernsehern würde die Methode funktionieren aber bei solchen Bildschirmen wie du hast gehts leider nicht?

http://prntscr.com/3qrd7m

Edgar · 8. Juni 2014

Ja, dann entweder so lassen oder mit javascript klären.