nicht angemeldet
Text im CSS-Layer vertikal zentrieren?!?
Nachdem ich vor ein paar Jahren meine Seiten von Frames auf Tabellen umgestellt habe, stelle ich jetzt von Tabellen auf CSS-Layer um (man will ja aktuell sein ;-) )
An einem Problem knoble und google ich seit zwei Tagen herum, ohne wirklich eine akzeptable Lösung gefunden zu haben.
Ich möchte einen Fließtext variabler Länge so in den Layer setzen, dass er horizontal *und* vertikal zentriert erscheint. Mit Tabellen kein Problem: Tabelle mit height=100%, td mit vertical-align:middle und fertig ist die Laube.
Aber wie macht man's mit CSS? An einigen Stellen habe ich gelesen, dass das von der Syntax her gar nicht vorgesehen sei. Finden das die Väter von CSS nicht wichtig?
Wie dem auch sei: vertical-align:middle in der Layer-Definition tut's jedenfalls nicht. Der einzig funktionierende "Trick", den ich gefunden habe, war, innerhalb des Layers wieder eine 100%-Tabelle anzulegen, aber das kann's doch nun wirklich nicht sein.
Hier mein Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Vertikal zentrieren</title>
<style type="text/css">
<!--
#total { position:absolute;
left: 50%; margin-left: -250px; width:500px;
top: 50%; margin-top: -150px; height:300px;
z-index:1; }
#header { position:absolute; top: 0px; left:0px; width:500px; height:100px; z-index:1;
background:#cccccc;
border-left: 1px solid black;border-top: 1px solid black;border-right: 1px solid black; }
#navi { position:absolute; top:100px; left:0px; width:100px; height:150px; z-index:1;
background:#cccccc;
border-left: 1px solid black;}
#content { position:absolute; top:100px; left:101px; width:400px; height:150px; z-index:1;
border-right: 1px solid black;
vertical-align:middle;text-align:center;}
#footer { position:absolute; top:250px; left:0px; width:500px; height: 50px; z-index:1;
background:#cccccc;
border-left: 1px solid black;border-right: 1px solid black; border-bottom: 1px solid black;}
-->
</style>
</head>
<body bgcolor="FFFFFF" text="#000000" style="border:none">
<!--
<script type="text/javascript">
alert(document.compatMode);
</script>
-->
<div id="total">
<div id="header">
header
</div>
<div id="navi" >
navi
</div>
<div id="content">
content
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
Meine Hoffnung war, dass das Wort "Content" horizontal und vertikal zentriert erscheint (siehe CSS-Definition).
Kann jemand helfen?
--
Ciao
Frank Scholz
Ciao
Frank Scholz
-
Hallo Frank Scholz,
Nachdem ich vor ein paar Jahren meine Seiten von Frames auf Tabellen umgestellt habe, stelle ich jetzt von Tabellen auf CSS-Layer um (man will ja aktuell sein ;-) )
sofern du dich auf den Missstand beziehst, dass du nach wie vor Tabellen für Layout benutzt hast, ist das eine gute Idee :)
Ich möchte einen Fließtext variabler Länge so in den Layer setzen, dass er horizontal *und* vertikal zentriert erscheint. Mit Tabellen kein Problem: Tabelle mit height=100%, td mit vertical-align:middle und fertig ist die Laube.
Du meinst gesamtzentriert in der Seite ("in der Mitte vom Bildschirm" oder sowas) oder nur in einer Box oder ähnlichem?
Aber wie macht man's mit CSS? An einigen Stellen habe ich gelesen, dass das von der Syntax her gar nicht vorgesehen sei. Finden das die Väter von CSS nicht wichtig?
Vom Syntax her ist es schon vorgesehen: vertical-align heißt das Attribut dafür. Es hapert nur bei der Umsetzung - scheinbar macht das kein Browser so, wie er es tun sollte. Beispiel:
<div style="height: 400px; vertical-align: center;">
Dieser Text sollte vertikal mittig stehen. Leider kenne ich
keinen Browser, der das macht.
</div>Wie dem auch sei: vertical-align:middle in der Layer-Definition tut's jedenfalls nicht. Der einzig funktionierende "Trick", den ich gefunden habe, war, innerhalb des Layers wieder eine 100%-Tabelle anzulegen, aber das kann's doch nun wirklich nicht sein.
ja, leider, leider :(
Ich nehme mal einfach ein Beispiel daraus:
#content { position:absolute; top:100px; left:101px; width:400px; height:150px; z-index:1;
border-right: 1px solid black;
vertical-align:middle;text-align:center;}Was du hier zumindest machen kannst: "scheinbar" mittige Zentrierung, in dem du z.B. einfach den padding auf 70px stellst (blöde antwort, ich weiß). Das sind so die "Tricks", wenngleich sie mir auch nicht gefallen :(
Grüße,
Sven
--
ich hatte mal meterlange signs, die sind alle weg-
Hi,
Du meinst gesamtzentriert in der Seite ("in der Mitte vom Bildschirm" oder sowas) oder nur in einer Box oder ähnlichem?
Das spielt doch nun wirklich keine Rolle. Auch body isdzt eine Box.
Vom Syntax her ist es schon vorgesehen: vertical-align heißt das Attribut dafür. Es hapert nur bei der Umsetzung - scheinbar macht das kein Browser so, wie er es tun sollte.
Du solltest Dein Wissen über CSS erweitern. Jeder Browser macht genau das, was die Spezifikation vorsieht und setzt vertical-align für Tabellenzellen oder Bilder um, jedoch nicht für Block-Elemente.
Was du hier zumindest machen kannst: "scheinbar" mittige Zentrierung, in dem du z.B. einfach den padding auf 70px stellst (blöde antwort, ich weiß).
Warum gibst Du sie dann? ;-)
Gefragt war eine vertikale Zentrierung von Fließtext unbestimmter Länge. Da hilft ein padding wirklich nicht, sondern nur vertical-align für ein Element, daß als Tabellenzelle dargestellt wird. Wenn der IE nicht zu berücksichtigen wäre, käme man hierzu auch ohne eine HTML-Tabelle aus.
freundliche Grüße
Ingo-
Moin Ingo,
Du meinst gesamtzentriert in der Seite ("in der Mitte vom Bildschirm" oder sowas) oder nur in einer Box oder ähnlichem?
Das spielt doch nun wirklich keine Rolle. Auch body isdzt eine Box.jein, so irrelevant finde ich es nicht.
[...] vertical-align für Tabellenzellen oder Bilder um, jedoch nicht für Block-Elemente.
Gefragt war eine vertikale Zentrierung von Fließtext unbestimmter Länge. Da hilft ein padding wirklich nicht, sondern nur vertical-align für ein Element, daß als Tabellenzelle dargestellt wird.CS hat ernsthaft keine Implention für vertikale Zentrierung in Blockelementen? Das ist ja grauenhaft! Warum?
Grüße,
Sven
-
Hi,
CS hat ernsthaft keine Implention für vertikale Zentrierung in Blockelementen? Das ist ja grauenhaft! Warum?
An CSS ist so manches grauenhaft, aber ich würde es mal mit margin:auto versuchen.
Gruß,
Harlequin
-
Hallo Harlequin.
CS hat ernsthaft keine Implention für vertikale Zentrierung in Blockelementen? Das ist ja grauenhaft! Warum?
An CSS ist so manches grauenhaft, aber ich würde es mal mit margin:auto versuchen.
Bei der vertikalen Zentrierung ist margin:auto unnütz.
Einen schönen Donnerstag noch.
Gruß, Ashura
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup]-
Bei der vertikalen Zentrierung ist margin:auto unnütz.
Genau. Ich hatte ja in meinem Ursprungs-Posting schon gesagt, dass ich an dem Problem schon einige Stunden herumgeknobelt habe. U.a. hatte ich auch schon 'margin:auto' versucht.
Eigentlich müsste es ja funktionieren, wenn dem Block über "display" mitteilt, dass er sich wie ein Tabellenelement verhalten soll (display:table | table-cell | inline-table | table-row | table-row-group | table-header-group | table-footer-group | table-column | table-column-group | table-caption). Hat aber alles keinerlei Auswirkung auf die vertikale Zentrierung des Inhalts.
Es scheint also tatsächlich so zu sein, dass W3C die vertikale Zentrierung von Text in Block-Elementen nicht für notwendig hält. Strange! Mit dem Gedanken, mir durch die Hintertür wieder die Tabellen hereinzuholen, müsste ich mich erst noch anfreunden ...
--
Ciao
Frank Scholz
-
Hi,
Eigentlich müsste es ja funktionieren, wenn dem Block über "display" mitteilt, dass er sich wie ein Tabellenelement verhalten soll (display:table | table-cell | inline-table | table-row | table-row-group | table-header-group | table-footer-group | table-column | table-column-group | table-caption). Hat aber alles keinerlei Auswirkung auf die vertikale Zentrierung des Inhalts.
hast Du es wirklich ausprobiert? In einem modernem Browser?
freundliche Grüße
Ingo-
hast Du es wirklich ausprobiert?
In einem modernem Browser?Wenn dir FF 1.5.0.2 uns IE 2.0.2900 modern genug sind ;-)
Aber du kannst es gerne mal selber probieren. Hier ist der Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Vertikal zentrieren</title>
<style type="text/css">
<!--
#total { position:absolute;
left: 50%; margin-left: -250px; width:500px;
top: 50%; margin-top: -150px; height:300px;
z-index:1; }
#header { position:absolute; top: 0px; left:0px; width:500px; height:100px; z-index:1;
background:#cccccc;
border-left: 1px solid black;border-top: 1px solid black;border-right: 1px solid black; }
#navi { position:absolute; top:100px; left:0px; width:100px; height:150px; z-index:1;
background:#cccccc;
border-left: 1px solid black;}#content { position:absolute; top:100px; left:101px; width:400px; height:150px; z-index:1;
border-right: 1px solid black;
display:table-column-group;
/* table | table-cell | inline-table | table-row | table-row-group | table-header-group | table-footer-group | table-column | table-column-group | table-caption */
vertical-align:middle;text-align:center;}#footer { position:absolute; top:250px; left:0px; width:500px; height: 50px; z-index:1;
background:#cccccc;
border-left: 1px solid black;border-right: 1px solid black; border-bottom: 1px solid black;}
-->
</style>
</head><body bgcolor="FFFFFF" text="#000000" style="border:none">
<!--
<script type="text/javascript">
alert(document.compatMode);
</script>
-->
<div id="total">
<div id="header">
header
</div>
<div id="navi" >
navi
</div>
<div id="content">
<p>
content
</p></div>
<div id="footer">
footer
</div>
</div>
</body>
</html>--
Ciao
Frank
-
» Wenn dir FF 1.5.0.2 uns IE 2.0.2900 modern genug sind ;-)
Oooops, muss natürlich "IE 6.0.2900" heißen ...--
Ciao
Frank Scholz
-
Hi,
» Wenn dir FF 1.5.0.2 uns IE 2.0.2900 modern genug sind ;-)
Oooops, muss natürlich "IE 6.0.2900" heißen ...auch der ist nicht modern genug für:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Vertikal zentrieren</title> <style type="text/css"> [code lang=css]div { display:table; color:black; background:white; border:1px solid black; } div p { display:table-cell; } p#navi { width:100px; height:150px; background:#ccc; } p#content { width:400px; height:150px; vertical-align:middle; text-align:center; }</style>
</head><body>
<div>
<p id="navi">navi</p>
<p id="content">content</p>
</div>
</body>
</html>[/code]freundliche Grüße
Ingo-
Oooops, muss natürlich "IE 6.0.2900" heißen ...
» auch der ist nicht modern genug für: ...
wenigstens wissen wir jetzt, das es mit "Pure CSS" auch funktioniert, und wenn wir dann in vielleicht 5-10 Jahren nicht mehr abwärtskompatibel zu IE < 7 sein müssen, ... ;-))--
Ciao
Frank Scholz-
Hi,
und wenn wir dann in vielleicht 5-10 Jahren nicht mehr abwärtskompatibel zu IE < 7 sein müssen, ... ;-))
wohl eher IE < 8. Ich habe jedenfalls noch nirgends gelesen, daß der IE7 diese Display-Eigenschaften unterstützen wird.
freundliche Grüße
Ingo
-
-
-
-
-
-
-
-
-
-
-