nicht angemeldet
div vertikal und horizontal zentriert
0 0 0 0 
Gunnar Bittersmann
0 0 Gunnar Bittersmann
0 0 0 Gunnar Bittersmann
0
div vertikal und horizontal zentriert
Hallo zusammen,
ich habe folgendes Problem: ich möchte meinen Seiteninhalt in der Bildschirmmitte haben. Jetzt habe ich ein html-template erstellt, aber ich bekomme den div Container den ich angelegt habe einfach nicht so hin, dass er horizontal und vertikal in der Mitte ist.
Der Code sieht folgendermaßen aus:
<div style="position:relative; margin-top:auto; margin-left:auto; width:800px; height:550px; border:2px solid black; background:#fff" id="container">
<div style="position:absolute; top:15px; left:15px; height:150px; font-family:arial; font-size:20pt; font-weight:bold;">XX Gruppe</div>
<div style="position:absolute; top:50px; left:15px; height:150px; font-family:arial; font-size:10pt;">Sport macht fit</div>
<img style="position:absolute; top:15px; left:200px; width:180px;" src="gfx/halle.jpg" alt="halle" />
</div>
Also außenrum ist halt noch der <body> und das übliche html zeugs. Der Container div soll nun in der Mitte zentriert sein und die restlichen divs und imgs (es kommen noch mehr dazu) sollen sich am Container orientieren, das klappt auch, aber der Container an sich geht nicht in die Mitte.
Ich hoffe ihr könnt mir helfen, ich seh den Fehler einfach nicht...banghead.gif
Vielen Dank
-
Hallo,
einfach im Forum nach dem Begriff "zentriert" suchen, dann findest Du unter vielen anderen Threads auch diesen hier: http://forum.de.selfhtml.org/archiv/2005/1/t98430/#m600050.
;)Ciao,
Andreas--
"Das Corporate Design für das Internet sieht eine Reihe von Grafikelementen vor, die die Optik der Webseite visuell und funktionell beeinflussen." - (Zitat aus dem "Styleguide Corporate Design" eines großen Konzerns...)-
Supi, vielen dank! Jetzt klappts ;)
Sorry hatte nach div zentrieren gesucht, hätte noch besser suchen müssen :(!-
Tag tobstar.
Supi, vielen dank! Jetzt klappts ;)
Für echtes vertikales Zentrieren gibt es in CSS m.W.n. keine Lösung, nur Würgarounds. Von diesen gehört der verlinkte m.E. zur Kategorie "Finger weg!", schau dir mal meine Testseite an. Nicht umsonst verwendet die Demo ein pixelgenau dimensioniertes winziges DIV, da fällt das nicht so auf.
Siechfred
-
Für echtes vertikales Zentrieren gibt es in CSS m.W.n. keine Lösung, nur Würgarounds.
Siechfred,
Was hältste davon:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Vertikal und horizontal zentriert</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta name="DC.creator" content="Gunnar Bittersmann" /> <style type="text/css"> [code lang=css] html, body { width: 100%; height: 100%; margin: 0; padding: 0; } html { display: table; } body { display: table-cell; vertical-align: middle; background: red; } div { width: 50%; margin: auto; padding: 1em; background: white; }</style>
</head>
<body>
<div>Vertikal und horizontal zentriert</div>
</body>
</html>[/code]Live long and prosper,
GunnarPS. Abgesehen davon, dass veraltete Schrottbrowser das nicht umsetzen …
--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)-
Hallo Gunnar.
Für echtes vertikales Zentrieren gibt es in CSS m.W.n. keine Lösung, nur Würgarounds.
Siechfred,
Was hältste davon:[...]
Gunnar, lasse es gut sein, es gibt keine triviale Lösung für dieses Problem. Noch nicht...
PS. Abgesehen davon, dass veraltete Schrottbrowser das nicht umsetzen …
Sind Opera 9TP1, Fx 1.5rc2 und Konqueror 3.3.2 Schrottbrowser?
Einen schönen Donnerstag noch.
Gruß, Ashura
-
Hi Ashura,
Sind Opera 9TP1, Fx 1.5rc2 und Konqueror 3.3.2 Schrottbrowser?
Oops, enttäuschen die etwa hier?
Ich hatte im Firefox 1.0.7 getestet – funzt[tm].
Funzt[tm] es im 1.5rc2 nicht mehr?vertical-alignsollte bei Elementen mitdisplay: table-cellzur Anwendung kommen.
Dem Firefox 1.0.7 genügt es, wenn ein solches Element Kind eines Elements mitdisplay: tableist.
Verschlucken sich die anderen Browser daran, dass dazwischen kein Element mitdisplay: table-rowist?Live long and prosper,
Gunnar--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)-
Hallo Gunnar.
Sind Opera 9TP1, Fx 1.5rc2 und Konqueror 3.3.2 Schrottbrowser?
Oops, enttäuschen die etwa hier?
Ja, ebenso wie ...
Ich hatte im Firefox 1.0.7 getestet – funzt[tm].
... Fx 1.0.7.
Funzt[tm] es im 1.5rc2 nicht mehr?
Es funktioniert in keinem meiner Browser, in jedem klebt die weiße Box mit etwas Rand links am oberen Ende des Dokumentes. (Konqueror zeigt nicht einmal die Hintergrundfarbe für das body-Element an, warum auch immer.)
vertical-alignsollte bei Elementen mitdisplay: table-cellzur Anwendung kommen.
Dem Firefox 1.0.7 genügt es, wenn ein solches Element Kind eines Elements mitdisplay: tableist.Ja, auch ich habe dies bisher so verstanden.
Verschlucken sich die anderen Browser daran, dass dazwischen kein Element mit
display: table-rowist?Selbst damit erfolgt lediglich erst einmal die horizontale Zentrierung, von einer vertikalen ist noch nichts zu sehen.
Mein Testdokument sieht nun wie folgt aus:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Vertikal und horizontal zentriert</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta name="DC.creator" content="Gunnar Bittersmann" /> <style type="text/css">[code lang=css] html, body { width: 100%; height: 100%; margin: 0; padding: 0; } html { display: table; } body { display:table-row; vertical-align: middle; background: red; } div#outer { display:table-cell; } div#inner { width: 50%; margin: auto; padding: 1em; background: white; }</style>
</head>
<body>
<div id="outer">
<div id="inner">Vertikal und horizontal zentriert</div>
<div>
</body>
</html>[/code](Kleiner Bonus: Mein Konqueror stürzt bei diesem Dokument immer ab...)
Einen schönen Donnerstag noch.
Gruß, Ashura
-
Hallo.
(Kleiner Bonus: Mein Konqueror stürzt bei diesem Dokument immer ab...)
Ein paar kleine Tests lassen mich momentan zu dem Schluss kommen, dass Konqueror display:table-row; auf das body-Element angewandt ganz und gar nicht mag.
Einen schönen Donnerstag noch.
Gruß, Ashura
-
Hallo.
Ein paar kleine Tests lassen mich momentan zu dem Schluss kommen, dass Konqueror display:table-row; auf das body-Element angewandt ganz und gar nicht mag.
Candid hat mir diesen Bug soeben bestätigt; vermutlich hängt es damit zusammen, dass diese ältere Version allgemein Probleme bei Stylezuweisungen auf das body-Element hat.
Ist dieser Bug bereits irgendwo festgehalten?
Einen schönen Donnerstag noch.
Gruß, Ashura
-
-
Ich hatte im Firefox 1.0.7 getestet – funzt[tm].
... Fx 1.0.7 [enttäuscht].
Ashura,
Worin unterscheidet sich dein 1.0.7 von meinem? Hast du irgendwelche Regeln (gar !important?) in deinem User-Stylescheet …?Bei mir sieht’s aus wie ein Einfahrt-verboten-Schild (nur nicht ganz so rund).
Live long and prosper,
Gunnar--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)-
Hallo Gunnar.
Worin unterscheidet sich dein 1.0.7 von meinem? Hast du irgendwelche Regeln (gar !important?) in deinem User-Stylescheet …?
Nicht dass ich wüsste.
Ich nutze einen „Mozilla/5.0 (X11; U; Linux i686; de-DE; rv:1.7.12) Gecko/20050922 Firefox/1.0.7 (Debian package 1.0.7-1)“.
Modifikationen habe ich an diesem keine vorgenommen. (Bis auf ein paar Erweiterungen und einige wenige modifizierte Werte unter about:config.)Müsste ich eine bestimmte Stelle überprüfen?
(BTW: Ich HASSE die Dateisuche von GNOME 2.10, ich kann keine Pfade mehr per Hand eingeben. Die alte hat mir besser gefallen.)Bei mir sieht’s aus wie ein Einfahrt-verboten-Schild (nur nicht ganz so rund).
Für letzteres gäbe es ja immer noch -moz-border-radius....
Einen schönen Donnerstag noch.
Gruß, Ashura
-
Ich nutze einen „Mozilla/5.0 (X11; U; Linux i686; de-DE; rv:1.7.12) Gecko/20050922 Firefox/1.0.7 (Debian package 1.0.7-1)“.
Hi Ashura,
Da haben wir den Unterschied. Ich hab die Windows-Version; da ist der weiße Balken auch vertikal mittig.Live long and prosper,
Gunnar--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)-
Hallo Gunnar.
Ich nutze einen „Mozilla/5.0 (X11; U; Linux i686; de-DE; rv:1.7.12) Gecko/20050922 Firefox/1.0.7 (Debian package 1.0.7-1)“.
Da haben wir den Unterschied. Ich hab die Windows-Version; da ist der weiße Balken auch vertikal mittig.
Meinst du ernsthaft, dass der System-Unterbau irgend einen Einfluss auf die Performance der Gecko-Engine hätte?
Einen schönen Freitag noch.
Gruß, Ashura
-
Da haben wir den Unterschied. Ich hab die Windows-Version; da ist der weiße Balken auch vertikal mittig.
Meinst du ernsthaft, dass der System-Unterbau irgend einen Einfluss auf die Performance der Gecko-Engine hätte?
Winzige Unterschiede in der Implementierung? Oder wird der identische Quellcode auf verschiedenen Systemen compiliert?
Zusammenspiel mit dem Betriebssystem / Biliotheken, die die Verbindung herstellen? Irgendwo muss der Unterschied ja herkommen.
Live long and prosper,
Gunnar--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)-
Hallo Gunnar.
Winzige Unterschiede in der Implementierung? Oder wird der identische Quellcode auf verschiedenen Systemen compiliert?
Sprichst du vom Fx-Quellcode?
Zusammenspiel mit dem Betriebssystem / Biliotheken, die die Verbindung herstellen? Irgendwo muss der Unterschied ja herkommen.
Ich habe eben auch einmal mit meinem Fx 1.0.7 unter Windows getestet: das Ergebnis ist identisch; der weiße Block wird am oberen Dokumentenrand horizontal zentriert.
Ungeachtet dessen, wo hier nun der entscheidende Unterschied liegen mag, dürfte dir dies zeigen, dass auch dieser Versuch der vertikalen Zentrierung nicht allgemein brauchbar ist.
Einen schönen Freitag noch.
Gruß, Ashura
-
Winzige Unterschiede in der Implementierung? Oder wird der identische Quellcode auf verschiedenen Systemen compiliert?
Sprichst du vom Fx-Quellcode?
Yep.
Ich habe eben auch einmal mit meinem Fx 1.0.7 unter Windows getestet: das Ergebnis ist identisch; der weiße Block wird am oberen Dokumentenrand horizontal zentriert.
Na dazu fällt mir nichts mehr ein …
Ungeachtet dessen, wo hier nun der entscheidende Unterschied liegen mag, dürfte dir dies zeigen, dass auch dieser Versuch der vertikalen Zentrierung nicht allgemein brauchbar ist.
Jaja, is’ ja jut. ;-)
Live long and prosper,
Gunnar--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
-
-
-
-
-
-
-
-
-
-
-
Tatsächlich klappt es eigentlich gar nicht so wie ich es brauche...
Aber was mach ich nun, ich soll eine Seite erstellen die sich selbst in der Fenstermitte zentriert und darin muss dann noch ein ypMenu enthalten sein...Tag tobstar.
Supi, vielen dank! Jetzt klappts ;)
Für echtes vertikales Zentrieren gibt es in CSS m.W.n. keine Lösung, nur Würgarounds. Von diesen gehört der verlinkte m.E. zur Kategorie "Finger weg!", schau dir mal meine Testseite an. Nicht umsonst verwendet die Demo ein pixelgenau dimensioniertes winziges DIV, da fällt das nicht so auf.
Siechfred
-
-
-