div zentrieren funktioniert bei relativer grösse nur horizontal, wieso?

muusser · #1 (**permalink**) 24.02.2009, 11:36

mit tabellen meine website zu gestalten dürfte zwar nicht besonders schwer sein, ich bevorzuge aber divs.

schon ganz am anfang habe ich jedoch ein grosses problem:

ich möchte meine website zentrieren (horizontal und vertikal, aber auch eine relative grösse angeben.

mit absoluten grössen funktioniert alles super:

html-code:

Code:

<body>
<div ID="beispiel">hallo</div>
</body>

css-code:

Code:

#beispiel{
position: absolute;
height: 100px;
width: 100px;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
border: 1px black solid;}

sobald ich aber die grösse von 100px auf 90% wechsle, funktioniert dies nur noch horizontal. Wieso?

html-code:

Code:

<body>
<div ID="beispiel">hallo</div>
</body>

css-code:

Code:

#beispiel{
position: absolute;
height: 90%;
width: 90%;
top: 50%;
left: 50%;
margin-top: -45%;
margin-left: -45%;
border: 1px black solid;}

ich verstehe das nicht ganz? wäre froh, wenn mir jemand helfen könnte. bin ziemlich neu dabei, aber dachte, dieses prinzip hätte ich verstanden, aber scheint wohl doch nicht der fall zu sein?

fricca · #2 (**permalink**) 24.02.2009, 11:55

Zitat:

sobald ich aber die grösse von 100px auf 90% wechsle, funktioniert dies nur noch horizontal. Wieso?

CSS2.1 | 8.3 Margin properties

Zitat:

The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well.

[Rote Hervorhebung von mir]

Zitat:

#beispiel{
position: absolute;
height: 90%;
width: 90%;
top: 50%;
left: 50%;
margin-top: -45%;
margin-left: -45%;
border: 1px black solid;}

Du willst, dass dein Element einen Abstand von 5% von oben hat. Wenn du einen Moment nachdenkst merkst du sicher, dass bei Prozentwerten diese ganze (negative) Verschieberei unnötig ist.

Grundsätzlich: Bei dieser Art der Zentrierung mit abs. Positionierung verschwinden bei kleinem Viewport die Inhalte unerreichbar nach oben und links. Nicht empfehlenswert. In den FAQ findest du eine Alternative.

muusser · #3 (**permalink**) 24.02.2009, 13:12

in den faqs habe ich eine variante gefunden, wie ich ein div zentrieren kann. jedoch kann ich wiederum NUR HORIZONTAL eine Prozentzahl angeben. Mit margin-top: 5%, height: 90% funktioniert es auch nicht. Wo liegt mein Überlegungsfehler?

fricca · #4 (**permalink**) 24.02.2009, 13:16

Zitat:

in den faqs habe ich eine variante gefunden, wie ich ein div zentrieren kann. jedoch kann ich wiederum NUR HORIZONTAL eine Prozentzahl angeben.

Du brauchst die Methode aus den FAQ nicht für Boxen mit Prozentmaßen. Es ist eine Alternative zu der von dir gezeigten Methode für Boxen mit Pixel-/Em-Maßen.

Zitat:

Mit margin-top: 5%, height: 90% funktioniert es auch nicht. Wo liegt mein Überlegungsfehler?

Lies nochmal den Teil der Spezifikation, den ich oben zitiert habe.
Und dann überleg dir, mit welcher Eigenschaft außer Margin du deine Box in der vertikalen Richtung verschieben kannst.

muusser · #5 (**permalink**) 24.02.2009, 13:22

ich habe es mit

Code:

position: absolute; 
top: 5%;
left: 5%,
height: 90%, 
width: 90%;

gelöst. jedoch ist hier die Posititionierung auch absolut. Ist das ein Problem?

Herzlichen Dank, jetzt ist das div wenigstens schon mal in der mitte

fricca · #6 (**permalink**) 24.02.2009, 13:27

Zitat:

Zitat von muusser

Code:

position: absolute; 
top: 5%;
left: 5%,
height: 90%, 
width: 90%;

gelöst. jedoch ist hier die Posititionierung auch absolut. Ist das ein Problem?

Das Problem ist dabei nicht die Positionierung.
Der Umgang mit überfließenden Inhalten wird das Problem werden.

muusser · #7 (**permalink**) 24.02.2009, 13:29

Ich verstehe nicht genau, was mit überfliessenden inhalten gemeint ist.

gäbe es denn noch eine andere variante, das div vertikal mittig zu positionieren, zum Beispiel mit Hilfe eines zweiten divs?

Ich hatte einmal versucht, ein div mit Höhe und Breite von 100% zu nehmen und da rein ein div zu positionieren, jedoch hatte ich die selben Probleme wie auch ohne dieses zusätzliche Div.

fricca · #8 (**permalink**) 24.02.2009, 14:35

Zitat:

Zitat von muusser

Ich verstehe nicht genau, was mit überfliessenden inhalten gemeint ist.

Inhalte, die mehr Platz brauchen, als du es ihnen mit deinen Dimensionen zugestehen willst.
Füg doch mal viel Text in deine Box ein und schau dir an, was bei kleinem Browserfenster passiert.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
DIV lässt sich nicht zentrieren.	densi	CSS	10	09.07.2011 18:18
div in div vertikal zentrieren	kostonstyle	CSS	0	18.06.2011 17:23
DIV Layout mit CSS: Zentrieren eines Divs und links und rechts auffüllen.	darkwave	CSS	5	07.04.2011 13:11
Linkverhalten im IE6	ChOpSueY!	CSS	19	19.05.2008 22:48
Horizontal und verikal zentrieren mit Scroll-Bereich	hatschiii	CSS	20	20.12.2007 21:01