nicht angemeldet
Vertical mittig margin/4 anstatt durch 2?
Hi,
wenn ich ein simples Div mittig zentrieren will, dann dachte ich
(BodyHöhe - DivHöhe)/2 also (100%-80%)/2 = Marginwert 10%
also:
html,body{margin:0;padding:0;height:100%;}
div{
height:80%;
width:80%;
margin:8% auto;
border:1px solid #000000;
}
Hier bin ich sogar extra unter dem Limit geblieben also nur 8%.
Seltsamerweise funktioniert das gewünschte Ergebnis aber nur wenn ich durch 4 teile, also (BodyHöhe - DivHöhe)/4
Da sowohl IE als auch FF nur bei geteilt/4 das zeigen was ich ich möchte, gehe ich mal von einem Denkfehler bei mir aus, welcher?
Pete
-
Hi,
wenn ich ein simples Div mittig zentrieren will, dann dachte ich
(BodyHöhe - DivHöhe)/2 also (100%-80%)/2 = Marginwert 10%
[...]
Seltsamerweise funktioniert das gewünschte Ergebnis aber nur wenn ich durch 4 teile, also (BodyHöhe - DivHöhe)/4Da sowohl IE als auch FF nur bei geteilt/4 das zeigen was ich ich möchte, gehe ich mal von einem Denkfehler bei mir aus, welcher?
Du gehst von der falschen Annahme aus, die Prozentwerte für margin-top und -bottom bezögen sich auf eine Höhe - tun sie nicht.
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.-
Hi,
Du gehst von der falschen Annahme aus, die Prozentwerte für margin-top und -bottom bezögen sich auf eine Höhe - tun sie nicht.
Die beziehen sich also auf die Breite(bei prozent)? Das kapiere ich nicht. Was hat die Breite zb. mit TOP zu tun. Leider beziehen sich alle Tutorial auf feste Angaben wie auch http://de.selfhtml.org/css/eigenschaften/randabstand.htm.
Warum ändert sich das Referenzverhalten bei %?
Wie soll ich sonst ein DIV vertical zentrieren, denn vertical-align:middle versagt ja auch wie üblich.
Pete
-
Hi,
Die beziehen sich also auf die Breite(bei prozent)? Das kapiere ich nicht. Was hat die Breite zb. mit TOP zu tun. Leider beziehen sich alle Tutorial auf feste Angaben wie auch http://de.selfhtml.org/css/eigenschaften/randabstand.htm.
Warum ändert sich das Referenzverhalten bei %?
Weil's so definiert ist. (PunktBastaAus.)
Wie soll ich sonst ein DIV vertical zentrieren, denn vertical-align:middle versagt ja auch wie üblich.
Vertikale Zentrierung beliebiger Inhalte im Viewport sieht CSS nicht wirklich vor - weil es das Medium eher als eine Rolle "Endlospapier" betrachtet.
Es gibt ein paar Ansätze für Workarounds, wobei die Mehrzahl allerdings auf fester Höhe des zu zentrierenden Elementes aufbaut, siehe bspw. http://de.selfhtml.org/navigation/faq.htm#mittig_zentrierte_inhalte
Weitere Möglichkeiten finden sich vllt. bei Google.MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.-
Hi,
»» Warum ändert sich das Referenzverhalten bei %?
Weil's so definiert ist. (PunktBastaAus.)
Ich denke schon das die sich dabei etwas gedacht haben müssen, aber was solls.
»» Wie soll ich sonst ein DIV vertical zentrieren, denn vertical-align:middle versagt ja auch wie üblich.
Vertikale Zentrierung beliebiger Inhalte im Viewport sieht CSS nicht wirklich vor - weil es das Medium eher als eine Rolle "Endlospapier" betrachtet.
Ja leider.
Es gibt ein paar Ansätze für Workarounds, wobei die Mehrzahl allerdings auf fester Höhe des zu zentrierenden Elementes aufbaut, siehe bspw. http://de.selfhtml.org/navigation/faq.htm#mittig_zentrierte_inhalte
Weitere Möglichkeiten finden sich vllt. bei Google.Mit aboluter Positionierung ein Element aus dem Fluss nehmen?
Na dann doch lieber mit eine Tabelle:
<table><tr><td></td></tr></table>Danke
Pete -
Hallo,
Es gibt ein paar Ansätze für Workarounds, wobei die Mehrzahl allerdings auf fester Höhe des zu zentrierenden Elementes aufbaut, siehe bspw. http://de.selfhtml.org/navigation/faq.htm#mittig_zentrierte_inhalte
Und oft den Nachteil haben, dass bei kleinem Browserfenster der Inhalt aus dem Viewport rutscht. Mehr zum Thema: Zentrieren per CSS.
Grüsse
Cyx23
-
... Und oft den Nachteil haben, dass bei kleinem Browserfenster der Inhalt aus dem Viewport rutscht...
Hier ein Beispiel samt Erklärung, welches Abhilfe für obiges Problem schafft
LG, Jürgen
-
Hallo Jürgen,
Dein Beispiel halte ich für weniger geeignet, weil es ein zusätzliches Hilfselement für die Mindesthöhe des Body benötigt und so auch der Trennung von HTML und Layout/CSS widerspricht.
Ausserdem ist solch eine Strategie, wie der von mir verlinkte Text zum Thema zeigt, letztlich unnötig.
Grüsse
Cyx23
-
-
-
-
-