nicht angemeldet
Jetzt langts...vertikal ausrichten
Hallo zusammen,
da hatte ich endlich eine halbwegs parktikable Lösung eine div mit absoluter größe nur mit hilfe von css in der mitte des Bildschirms zu plazieren, für op5/6, ie5, nn4 und jetzt spielen die neuen (nn6, moz, ie6) wieder nicht mit.
Gibt es denn in css keine vernünftige Möglichkeit vertikal auszurichten mit der alle klar kommen?
z.k.
Paul
-
Hallo,
ein bißchen Code wäre nicht schlecht. Hast du wirklich absolut positioniert ? Wenn du es richtig gemacht hast sollten es alle Browser verstehen.
http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#position-
Hallo,
ein bißchen Code wäre nicht schlecht.
<html>
<head>
<style type="text/css">
<!--
#contain {
height:100%;
width:100%; }
#seite {
margin:auto;
width:265px;
height:420px;
border:2px solid #053F64; }
//-->
</style></head>
<body><table id="contain">
<tr><td style="vertical-align:middle;">
<div id="seite">
[Inhalt]
</div>
</td></tr></table></body>
</html>Ziemlicher Aufwand und heftiges tricksen: Die blinde Tabelle "contain" spannt das komplette Fenster auf damit das div "seite" in der mitte stehen kann. Nicht ganz koscher ab die einzige Möglichkeit op5/6, ie5 und nn4 unter einen Hut zu bringen.
Offensichtlich funktioniert vertical-align nur in Tabellenzellen und margin:auto behandelt jeder Browser in Abhänigkeit von Eltern- und Kinder-Elementen gerade wie er will. Das reinste Glücksspiel.
Ich verstehe nicht weshalb eine so elementare Funktion wie Ausrichtungen in css so uneinheitlich gelöst ist.
Hast du wirklich absolut positioniert ?
nein, relative position, absolute Größe
Paul
-
hi
AHA!
#contain {
height:100%;
width:100%; }
#seite {
margin:auto;
width:265px;
height:420px;
border:2px solid #053F64; }100% wovon?
html,body{height:100%;}und schon - oh Wunder - ist der Kasten wieder in der Mitte
Ziemlicher Aufwand und heftiges tricksen: Die blinde Tabelle "contain" spannt das komplette Fenster auf damit das div "seite" in der mitte stehen kann. Nicht ganz koscher ab die einzige Möglichkeit op5/6, ie5 und nn4 unter einen Hut zu bringen.
nö - ist ok so. Direkt im <body> scheinen so einige nix vertikal ausrichtien zu wollen (nichtmal Mozilla)
Offensichtlich funktioniert vertical-align nur in Tabellenzellen und margin:auto behandelt jeder Browser in Abhänigkeit von Eltern- und Kinder-Elementen gerade wie er will. Das reinste Glücksspiel.
nur in kaputten Browsern - theoretisch sollte er den Spass zentrieren
Ich verstehe nicht weshalb eine so elementare Funktion wie Ausrichtungen in css so uneinheitlich gelöst ist.
....frag mal Richtung Redmond.....
gruss Kai
-
Hi Kai,
html,body{height:100%;}
und schon - oh Wunder - ist der Kasten wieder in der Mitteich will ja nicht nöhlen aber sowohl nn6 als auch moz095 sind nur im quirk-modus bereit das Ding in die Mitte zu hauen. (ie6 kann ich gerade nicht testen). Was nun?
Ich verstehe nicht weshalb eine so elementare Funktion wie Ausrichtungen in css so uneinheitlich gelöst ist.
....frag mal Richtung Redmond.....Da kann Redmond wohl ausnahmsweise mal nichts dafür wenn in Sprachumfang von css align-Befehle "fehlen". Unterschiedliche Interpretation macht eine halbe Sache zwar noch eklicher aber eine halbe Sache bleibt es trotzdem.
Gruss Paul
-
hi
html,body{height:100%;}
und schon - oh Wunder - ist der Kasten wieder in der Mitteich will ja nicht nöhlen aber sowohl nn6 als auch moz095 sind nur im quirk-modus bereit das Ding in die Mitte zu hauen. (ie6 kann ich gerade nicht testen). Was nun?
ohne die besagte Ergängung ja.. Sonst muss für jedes Element in der Hierarchie eine height:100% definiert werden. (gilt für den IE6 genauso). Ich bin mir übrigens nicht sicher, ob nicht sogar für die <td> nochmal extra height:100% ran müssen..
....frag mal Richtung Redmond.....
Da kann Redmond wohl ausnahmsweise mal nichts dafür wenn in Sprachumfang von css align-Befehle "fehlen". Unterschiedliche Interpretation macht eine halbe Sache zwar noch eklicher aber eine halbe Sache bleibt es trotzdem.
margin:auto; fehlt dem IE bis Version 6, und selbst jetzt isses nur in Strict-Mode drin! Das meinte ich...
gruss Kai
-
hi
der feine Unterschied zwischen Theorie und Praxis:
ohne die besagte Ergängung ja.. Sonst muss für jedes Element in der Hierarchie eine height:100% definiert werden. (gilt für den IE6 genauso). Ich bin mir übrigens nicht sicher, ob nicht sogar für die <td> nochmal extra height:100% ran müssen..
Theoretisch müsste es dann so gehen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>kann keiner</title>
</head><body style="height:100%;width:100%;margin:0px;">
<div style="height:100%;width:100%;margin:0px;">
<div style="height:300px;width:300px;margin:auto;">Hallo Mitte?</div>
</div>
</body>
</html>das machen alle gleich falsch (ie5/6, op5/6, nn6) horizontal ja, vertikal nein. Womit in der Praxis weder für Block- noch für Inline-Elemente ein brauchbare Ausrichtung möglich ist.
Bleiben noch ein paar Fragen: Warum funktionieren sowohl vertical-align als auch margin-top:auto nur in Tabellenzellen einigermaßen zuverlässig. Ich hoffte eigentlich durch css vom Zwang Tabellen als versteckte Layout-Helfer mnissbrauchen zu müssen loszukommen.
Und *verstohlen-in-selfhtml-guck* ist td eigentliche ein Inline oder ein block-Element oder weder noch?Paul
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>kann keiner</title>
</head><body style="height:100%;width:100%;margin:0px;">
<div style="height:100%;width:100%;margin:0px;">
<div style="height:300px;width:300px;margin:auto;">Hallo Mitte?</div>
</div>
</body>
</html>das machen alle gleich falsch (ie5/6, op5/6, nn6) horizontal ja, vertikal nein. Womit in der Praxis weder für Block- noch für Inline-Elemente ein brauchbare Ausrichtung möglich ist.
stimmt, so MÜSSTE es gehen, sogar ohne das äußere <div> meiner Meinung nach. Wenn man dieses durch eine Taballe ersetzt klappt's - schade irgendwie. Vielleicht kommt ja doch noch das einstmals geplante "[vertical-]alignment" was dann den klasischen "[v]align" entspricht (siehe hierzu u.a. SelfHTML 7.0)
dafür habe ich gerade im CSS3 Box-Model-WD entdeckt, dass zumindest dort "margin:auto" einem "margin-left:auto;margin-right:auto;margin-top:0px;margin-right:0px;" zu verstehen ist (bei primär horizontalen Textfluss). margin-top und margin-bottom muss man also ausdrücklich auf auto setzen. Das hat aber bei meinen Tests auch nicht geklappt :(Und *verstohlen-in-selfhtml-guck* ist td eigentliche ein Inline oder ein block-Element oder weder noch?
es gibt ein display:table-cell. Ansich ist es ein spezielles block-Element.
gruss Kai
-
Ach ja,
<sentimental>
beim basteln einer Abfangseite für die alten Browser-Schätzchen musste ich gerade an die gute alte Zeit anno 1997 zurückdenken als alles noch so einfach war. Das größte Problem waren unerwünschte Überlagerunge der unzählige nicht hundertprozent korrekt verschachtelt und ungeschlossenen <FONT>-tags.
</sentimental>Paul
-
-
-
und wenn ich schon gerade beim bruddeln bin...
warum muss ich bei allen browsern bei
<body style="width:100%;height100%;"> ein ganz kleines bischen scrollen weil 100% halt nicht 100% sondern 105% sind?alle Browser sch....
Gruss Paul
-
hi
warum muss ich bei allen browsern bei
<body style="width:100%;height100%;"> ein ganz kleines bischen scrollen weil 100% halt nicht 100% sondern 105% sind?weil es einen kleinen Rand gibt - hier am Eingabefelt sehr gut zu sehen.... Das graue geht nicht ganz bis zum Rand. Zu ändern ist es mit margin:0px; (IE, Mozilla, konq, Amaya) bzw. padding:0px; (Opera).
Interessant übrigens, wie Browser mit dieser Angabe sonst umgehen:
ist sie nicht gesetzt wird sie wie ein padding behandelt, border also außerhalb und mit Hintergrundfarbe. Aus diesem Grund wohl auch die unterschiedliche Bezeichnung in den Browsern (imho hat Opera hier recht). Zum Glück hält Opera das konsequent durch und setzt auch bei getrennten Hintergrundfarben keinen farbigen Rand (im Gegensatz zum versammelten Rest, wo das Ganze erst jetzt zum margin wird).
Ich empfehle so man hier nicht einen Rand in Hintergrundfarbe von <body> will immer beide Werte ausdrücklich zu setzen.gruss Kai
-
-
-
Bongú!
<td style="vertical-align:middle;">
Da kann Redmond wohl ausnahmsweise mal nichts dafür wenn in Sprachumfang von css align-Befehle "fehlen".
Von "fehlen" kann eigentlich nicht die Rede sein.
<td style="vertikal-align:middle;"> hat allerdings in keinster Weise dieselbe Bedeutung wie <td valign="middle">.
Mit 'vertikal-align' bestimmt du lediglich die vertikale Ausrichtung eines inline-Elements in dessen eigener Line-Box.
Dies ist zugegebernmaßen nicht offensichtlich, ich glaube aber, dass die in SELFHTML gezeigte Abbildung dies recht gut veranschaulicht:
http://selfhtml.teamone.de/css/eigenschaften/ausrichtung.htm#vertical_align
Auf den in deinem Beispiel vorhandenen DIV-Container selbst hat diese Formatierung also nicht den geringsten Einfluß.
<td valign="middle"> hingegen bestimmt die vertikale Ausrichtung jeglichen Inhalts der Tabellenzelle, also auch für deinen DIV-Container.
Warum allerdings die CSS-Angabe 'margin:auto' zwar in der horizontalen nicht aber in der vertikalen Ausrichtung greift, weiß ich leider auch nicht.
Sahha,
kerki
-
hi
Warum allerdings die CSS-Angabe 'margin:auto' zwar in der horizontalen nicht aber in der vertikalen Ausrichtung greift, weiß ich leider auch nicht.
ich habe mir in den Fällen, wo ein vertikaler Auto-Margin erwünscht ist angewöhlt ausdrücklich margin-top:auto;margin-bottom:auto; zu schreiben. Offensichtlich will man so Nebenwirkungen das eine Angabe zu viel verändert vermeiden.
gruss Kai
-
-
-
-
-