nicht angemeldet
text-align vs. position
Hallö ins Forum,
ich hab ein Problemchen, dass eventuell erst seit FF1.5 bei mir auftritt. Ich sitze gerade an nem nur rudimentär installierten System, deswegen hab ich grad keine anderen Versionen zur Verfügung.
Ich habe einen Container, der absolut positioniert dabei horizontal zentriert werden soll. Also dachte ich mir, ein text-align fürn body reicht aus, um den Container in die Mitte zu bekommen.
Der gesamte Quelltext mal ausnahmsweise hier, weil sehr gekürzt:
<html>
<head>
<style type="text/css">
<!--
body { text-align:center; }
div { position:absolute; top:0; }
-->
</style>
</head>
<body>
<div>hallo</div>
</body>
</html>
FF weigert sich beständig, unabhängig von Angaben wie align="center" etc., den Bereich in die Mitte zu schieben (IE tut es mit position:absolute). Allerdings kommt der Container in die Mitte, wenn ich (Spaßes halber) position:static oder relative verwende.
Hab ich ne Angabe für position vergessen? Oder bin ich nur zu blöd ?-)
Danke für Unterstützung und
Grüße aus Leipzig
willie
-
Hallo willie
... Also dachte ich mir, ein text-align fürn body reicht aus, um den Container in die Mitte zu bekommen.
Nur in kaputten Browsern wirkt text-align auf Blockelemente.
... Allerdings kommt der Container in die Mitte, wenn ich (Spaßes halber) position:static oder relative verwende.
Dann geht das Blockelement auch über die gesamte Breite, so dass text-align
auf den darin enthaltenen Text wirkt.
Gib dem Element mal eine Hintergrundfarbe, damit du siehst, wie breit es
ist.Hab ich ne Angabe für position vergessen? Oder bin ich nur zu blöd ?-)
Willst du darauf wirklich eine Antwort? ;-)
Fragen, die du dir stellen solltest:
- Ist position:absolute wirklich nötig? Warum?
- Soll das Element über die ganze Breite gehen oder eine definierte Breite
haben? Wenn ja, welche?
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallö Detlef G.,
Nur in kaputten Browsern wirkt text-align auf Blockelemente.
Okay. Da hat der IE mich mal wieder überlistet...
Dann geht das Blockelement auch über die gesamte Breite, so dass text-align
auf den darin enthaltenen Text wirkt.Hmmm. Das hatte ich nicht gedacht, dass position die Breite ändert (ändern darf).
Gib dem Element mal eine Hintergrundfarbe, damit du siehst, wie breit es
ist.Hatte ich selbstredend getan.
Fragen, die du dir stellen solltest:
- Ist position:absolute wirklich nötig? Warum?
Die Seite sieht ehrlich gesagt _etwas_ komplizierter aus als im Beispiel ;-)
- Soll das Element über die ganze Breite gehen oder eine definierte Breite
haben? Wenn ja, welche?
An der Breite hatte ich mehrfach geschraubt, ich dachte an ein Verhalten wie bei float definiert. Hat aber nicht wirklich Einfluss...
Nebenbei: gibt es eine Angabe für zentrierte Darstellung von Block-Elementen? (Bin grad etwas aus der Übung in Sachen CSS.)
Danke für die schnelle Hilfe und
Grüße aus Leipzig
willie-
Hallo,
Nebenbei: gibt es eine Angabe für zentrierte Darstellung von Block-Elementen? (Bin grad etwas aus der Übung in Sachen CSS.)
margin:0 auto;
Wobei die '0' für die Abstände oben und unten zuständig ist und 'auto' für rechts und links.
text-align braucht man nur für den "kaputten Browser", weil der die standardkonforme Lösung nicht richtig interpretiert.Gruß
Josh-
Hallö ins Josh!
margin:0 auto;
Naja. Die Frage war weniger auf Abstände ausgerichtet, wobei sie damit durchaus zu tun hatte.
text-align braucht man nur für den "kaputten Browser", weil der die standardkonforme Lösung nicht richtig interpretiert.
Ich glaube, dass "heile" Browser text-align auch ganz gut verwenden können. Und die Darstellung von margin im M$IE wird damit gewiss nicht beeinflusst.
Grüße aus Leipzig
willie-
hi,
text-align braucht man nur für den "kaputten Browser", weil der die standardkonforme Lösung nicht richtig interpretiert.
Ich glaube, dass "heile" Browser text-align auch ganz gut verwenden können.Aber nicht zur Zentrierung von Block Elementen.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallö wahsaga,
Aber nicht zur Zentrierung von Block Elementen.
Ich hätte wohl schon eingangs das Problem ausführlicher beschreiben sollen... *Seufz!* Ich hatte (im Beispiel stark vereinfacht) darauf gehofft, dass 'text-align' innerhalb des body vererbt wird: all block-level elements inside (...) will have their inline content centered.
Im Verlauf der Diskussion ist wohl deutlich geworden, dass das Problem nicht so direkt im text-align begründet ist. Das, was ich zentrieren möchte, ist inline. Das Blockelement drumherum wird aber in seiner Breite geändert:
position:static|relative => 100%
position:absolute|fixed => Breite des InhaltesDeswegen war ich verwundert: ohne position-Angabe zentriert, mit nicht... Ich hatte - wie gesagt an einem eingeschränkt arbeitsfähigen System - kaum Möglichkeiten zur Problemeinkreisung. Deswegen hatte ich mich hoffnungsfroh hier ans Forum gewandt. Auf Schlaumeierei war ich nicht sooo scharf.
Ansonsten ist margin als Werkzeug zur Zentrierung von Blockelementen wohl eher nicht vorgesehen, auch wenn es wie weiter oben angeführt dazu beitragen kann. Ich denke, dass deswegen nach der begrenzt zutreffenden Aussage "Block-Elemente selbst werden über Seite margin ausgerichtet" konjunktiv formuliert wurde, wobei gleiche Werte für margin-left und margin-right eine Zentrierung bewirken können. Der konstruktive Beitrag von Detlef G. geht dann ja auch einen etwas anderen Weg.
Grüße aus Leipzig
willie
--
sh:( fo:| ch:? rl:( br:> n4:( ie:% mo:} va:} de:> zu:} fl:( ss:| ls:# js:|
Selfcode Decoder-
Hallo willie
... Ich hatte (im Beispiel stark vereinfacht) darauf gehofft, dass 'text-align' innerhalb des body vererbt wird ...
Das wird es auch, wirkt aber wie gesagt nur auf Inlineelemente und Texte die
sich innerhalb des Blockelements befinden, für das diese Eigenschaft
angegeben ist.
Lediglich der IE wendet es fälschlicherweise auch auf Blockelemente selbst
an.Ansonsten ist margin als Werkzeug zur Zentrierung von Blockelementen wohl eher nicht vorgesehen, auch wenn es wie weiter oben angeführt dazu beitragen kann.
Doch, margin ist zur Zentrierung von Blockelementen vorgesehen.
Gleiche Werte für margin-right und margin-left bewirken eine Zentrierung.
Wenn eine Breite für das Element angegeben ist, dann wird dieses mittels
margin-right:auto; margin-left:auto; zentriert.Dabei ist allerdings zu beachten, dass der IE im Quirksmodus und ältere IEs
nicht Gescheites mit margin:auto anfangen können, wodurch bei ihnen die
standardkonforme Zentrierung von Blockelementen nicht funktioniert.
(lies dazu mal "Ausrichtung von Block-Level-Elementen")Der konstruktive Beitrag von Detlef G. geht dann ja auch einen etwas anderen Weg.
Dies aber nur, weil ein absolut positioniertes Element aus dem Fluss der
Seite entfernt ist, und sich margin dadurch nicht mehr am Elternelement
orientiert. Dadurch kann sich margin nicht mehr am Elternelement selbst
sondern nur noch an der angegebenen Position orientieren.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Und nochmal: Hallö!
Doch, margin ist zur Zentrierung von Blockelementen vorgesehen.
Gleiche Werte für margin-right und margin-left bewirken eine Zentrierung.
Wenn eine Breite für das Element angegeben ist, dann wird dieses mittels
margin-right:auto; margin-left:auto; zentriert.Danke! margin:auto hatte ich bisher konsequent mit einer Standardvorgabe verwechselt. (Tsss!)
(lies dazu mal "Ausrichtung von Block-Level-Elementen")
Getan. Danke für den Link!
Dies aber nur, weil ein absolut positioniertes Element aus dem Fluss der
Seite entfernt ist, und sich margin dadurch nicht mehr am Elternelement
orientiert. Dadurch kann sich margin nicht mehr am Elternelement selbst
sondern nur noch an der angegebenen Position orientieren.Mir gehts ja eigentlich um ein fixed positioniertes Element. Deswegen meine Anschlussfrage:
Beim Überlesen von Absolutely positioned, non-replaced elements finde ich keinen Hinweis darauf, wieso sich die Breite beim fixed Element am Kindelement orientiert. Les ich am falschen Ende? Oder verhalten sich fixed Elemente generell wie absolute?Danke für Unterstützung und
Grüße aus Leipzig
willie-
Hatt ich ganz vergessen:
Doch, margin ist zur Zentrierung von Blockelementen vorgesehen.
Danke! margin:auto hatte ich bisher konsequent mit einer Standardvorgabe verwechselt. (Tsss!)Eine demütige Verbeugung und die Bitte um Entschuldigung meiner vorlauten Antwort in Richtung Josh und wahsaga...
Grüße aus Leipzig
willie -
Hallo willie
Oder verhalten sich fixed Elemente generell wie absolute?
Fixed positioning is a subcategory of absolute positioning.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-
-
-
-
-
-
-
Hallo willie
Hmmm. Das hatte ich nicht gedacht, dass position die Breite ändert (ändern darf).
Eine angegebene Breite wird auch nicht geändert, nur ohne Angabe (also auto)
dann bezieht sich die Breite nicht mehr unbedingt aufs Elternelement (es ist
ja auch aus dem Fluss genommen) sondern auf den Inhalt.Hatte ich selbstredend getan.
Dann hätte dir das durchaus auffallen können (müssen?).
- Ist position:absolute wirklich nötig? Warum?
Die Seite sieht ehrlich gesagt _etwas_ komplizierter aus als im Beispiel ;-)
Naja, aber top:0; klingt wirklich nicht so, als ob dort position:absolute;
wirklich nötig ist.An der Breite hatte ich mehrfach geschraubt, ich dachte an ein Verhalten wie bei float definiert. Hat aber nicht wirklich Einfluss...
Verstehe nicht, was du damit genau meinst.
Nebenbei: gibt es eine Angabe für zentrierte Darstellung von Block-Elementen? (Bin grad etwas aus der Übung in Sachen CSS.)
Wenn du die Breite des Elements selbst festlegst, dann kannst du left:50%
festlegen und außerdem margin-left mit dem negativen Wert der halbe Breite
des Elements.
z.B.:position:absoute; left:50%; width:400px; margin-left:-200px;Wenn das Element über die gesamte Breite reichen darf, kannst du ihm
width:100% mitgeben, und dann den Inhalt zentrieren.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallö nochmal!
Eine angegebene Breite wird auch nicht geändert, nur ohne Angabe (also auto)
dann bezieht sich die Breite nicht mehr unbedingt aufs Elternelement (es ist
ja auch aus dem Fluss genommen) sondern auf den Inhalt.Mmmh. Ich hätte gedacht, dass sich die Breite auf das Element selbst bezieht - und genau die wird geändert. Das sieht man sehr schön mit background-Angabe.
Dann hätte dir das durchaus auffallen können (müssen?).
Fiel mir auf.
Naja, aber top:0; klingt wirklich nicht so, als ob dort position:absolute;
wirklich nötig ist.Ich hatte den Quellcode auf die für das Problem notwendigen Stellen reduziert.
Wenn du die Breite des Elements selbst festlegst, dann kannst du left:50%
festlegen und außerdem margin-left mit dem negativen Wert der halbe Breite
des Elements.Danke! So einen Kniff hatte ich gesucht.
Danke für Unterstützung und
Grüße aus Leipzig
willie-
Hallo willie
Ich hatte den Quellcode auf die für das Problem notwendigen Stellen reduziert.
Ja, trotzdem finde ich (zusätzlich) einen Link auf die komplette Seite immer
sehr hilfreich. Dieser hilft oft zu verstehen, was überhaupt damit bezweckt
wird, ob es andere grundsätzliche Lösungsansätze gibt, oder ob die aktuellen
Probleme vielleicht durch einen ganz anderen Teil der Seite oder des CSS
hervorgerufen werden.Danke! So einen Kniff hatte ich gesucht.
Bedenke aber, dass damit ein Teil links (ohne Scrollmöglichkeit)
verschwinden kann, wenn das Browserfenster zu schmal wird.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-
- Ist position:absolute wirklich nötig? Warum?