Element unten positionieren in XHTML 1.1

[Harry]

Holladiewaldfee,

ich bin zur Zeit dabei, meine Seiten auf XHTML 1.1 umzuschreiben.
Dabei muß ich zwangsläufig viel von CSS Gebrauch machen. Nun habe
ich ein Layout, bei dem eigentlich Elemente am unteren Rand der
Seite positioniert werden sollen.

Das ist prinzipiell nicht schwer und funktioniert mit
{ position:absolute; bottom:0px; } auch wunderbar. Wird die Seite
größer als der Bildschirm könnte ich die Elemente auf
die "klassische" Art und Weise unten positionieren.

Mein Problem ist nun, daß ich die Elemente gerne immer unten
positioniert hätte, egal, wo unten gerade sein mag. Sprich: Ist die
Seite kleiner als der Bildschirm am unteren Bildschirmrand, ist die
Seite größer als der Bildschirm am Ende der Seite.

Leider scheint der einzige mir bekannte Workaround, der mit dem Div
mit style="height:100%" arbeitet, zumindest im IE nicht mehr zu
funktionieren. Der IE (ob's Mozilla auch macht, weiß ich im Moment
nicht) scheint die "100%" nur bis zum untersten nicht absolute
positionierten Element zu berechnen. Da ich auf Tabellen für
Layoutzwecke verzichten möchte, sind alle Elemente auf der Seite
absolut positioniert. Sprich: die "100%" entsprechen ungefähr einer
Leerzeile, was natürlich in jedem der beiden Fälle zu wenig ist.

Eine schnelle Recherche in SelfHTML, mit der Archivsuche und Google
hat keine nennenswerten neuen Erkenntnisse gebracht. Vielleicht
schreiben ja einfach zu wenig Leute in XHTML 1.1. Vielleicht bin ich
aber auch nur zu doof und die Lösung ist irgendwas total triviales
oder eigentlich altbekanntes. In diesem Fall möge man mir bitte
verzeihen und mir einen kleinen Hinweis in die richtige Richtung
geben ;) Zu guter letzt bliebe dann noch die "Geht nicht"-Lösung,
was aber wirklich schade wäre :(

Danke schonmal für jeden Tip :)

Ciao,

Harry

[Thomas Luethi]

Hallo Harry,

Ich sehe nicht, ob Dir bereits bewusst ist, dass Du
den Anzeigebereich (Canvas) auf 100% Hoehe bringen
musst:

html, body { height:100%; margin:0; padding:0; }

XHTML 1.1 _ohne_ XML-Deklaration schickt den MS IE 6.0
in den Standards-Compliant-Modus.
_Mit_ der XML-Deklaration ist er im Quirks Modus.
http://www.heise.de/ix/artikel/2004/03/136/03.shtml

HTH, mfg
Thomas

[Harry]

Holladiewaldfee,

Ich sehe nicht, ob Dir bereits bewusst ist, dass Du
den Anzeigebereich (Canvas) auf 100% Hoehe bringen
musst:

html, body { height:100%; margin:0; padding:0; }

Nein, war mir nicht bewußt ... macht aber keinen Unterschied. Ich
habe jetzt also den Anzeigebereich auf 100% gebracht und alle
Inhalte in ein Div mit static-Positionierung und height=100%
gepackt. Darunter habe ich ein weiteres Div eingefügt, ebenfalls mit
position:static, in das ich die unten zu positionierenden Elemente
rein habe, die in diesem Div dann absolut mit bottom:0px;
positioniert werden. Effekt: Die Elemente sind wieder am unteren
Bildschirmrand, aber leider immer, unabhängig davon, ob die Seite
größer als der Bildschirm ist oder nicht. Hängt das evtl. damit
zusammen, daß die Elemente im oberen Container-Div auch nur absolute
positioniert sind?

XHTML 1.1 _ohne_ XML-Deklaration schickt den MS IE 6.0
in den Standards-Compliant-Modus.
_Mit_ der XML-Deklaration ist er im Quirks Modus.
http://www.heise.de/ix/artikel/2004/03/136/03.shtml

Die Seite ist valide und hat keine XML-Deklaration, da ich den IE
gerne im Standards-Compliance-Modus halten möchte (macht einfach
weniger Probleme mit dem CSS-Zeug so weit ich das habe in Erfahrung
bringen können).

Ciao,

Harry

[Harry]

Holladiewaldfee nochmal (kleiner Nachtrag),

Effekt: Die Elemente sind wieder am unteren
Bildschirmrand, aber leider immer, unabhängig davon, ob die Seite
größer als der Bildschirm ist oder nicht.

IE und Mozilla sind sich übrigens bei dieser Art der Anzeige
ausnahmsweise mal einig und setzen die Elemente wie beschreiben an
den unteren Bildschirmrand.

Ciao,

Harry

[Jeena Paradies]

Hallo Harry,

Danke schonmal für jeden Tip :)

Das einzige was ich bisher dazu gefunden habe ist das hier:
http://www.alistapart.com/articles/footers/

Grüße
Jeena Paradies

[Harry]

Holladiewaldfee Jeena,

Das einzige was ich bisher dazu gefunden habe ist das hier:
http://www.alistapart.com/articles/footers/

Das hier (http://www.alistapart.com/d/footers/footer_css2.html) ist so ziemlich genau das, was ich auch gemacht habe. Das Problem ist aber, daß ich sobald ich im Container Elemente absolut positioniere und diese Elemente außerhalb des Bildschirms liegen (also z.B. top:1000px;), sowohl IE als auch Mozilla diese Elemente nicht mehr in die 100% Höhe mit einrechnen und sich die 100% wieder nur bis zum unteren Bildschirmrand respektive bis zum untersten nicht absolut positionierten Element erstrecken.

Auch die anderen dort beschriebenen Hacks helfen nicht weiter - die absolute Positionierung der Elemente im Container stört jedesmal.

Ciao,

Harry

[Ingo Turski]

Hi,

ich bin zur Zeit dabei, meine Seiten auf XHTML 1.1 umzuschreiben.

warum nicht 1.0 ?

Da ich auf Tabellen für Layoutzwecke verzichten möchte, sind alle Elemente auf der Seite absolut positioniert.

Ich befürchte Schlimmstes bei Schriftvergrößerung. Du solltest von position:absolute nur in begründeten Ausnahmefällen Gebrauch machen und das Ergebnis bei verschiedenen Schriftgraden und Fenstergrößen testen. Ansonsten wäre es wirklich sinnvoller, wenn Du bei Deinen Tabellen bleiben würdest.

Übrigens solltest Du der von Dir verlinkten Seite dringend eine Hintergrundfarbe spendieren. Je nach Voreinstellung des Browsers ist sonst kaum etwas zu erkennen.

freundliche Grüße
Ingo

[Harry]

Holladiewaldfee,

ich bin zur Zeit dabei, meine Seiten auf XHTML 1.1 umzuschreiben.
warum nicht 1.0 ?

Persönlicher Ehrgeiz? Außerdem finde ich das Schöne an XHTML 1.1,
daß es einen regelrecht dazu zwingt, Layout und Struktur voneinander
zu trennen. Gut, das könnte ich mit 1.0 auch. Allerdings macht es
dann glaube ich nicht mehr wirklich den großen Unterschied, ob ich
nun 1.0 strict oder 1.1 schreibe. Auf irgendeine "transitional"-
Variante möchte ich mich hier eigentlich nicht mehr einlassen.
Außerdem werde ich so definitiv dazu gezwungen, auf veraltete
Sprachelemente zu verzichten.

Da ich auf Tabellen für Layoutzwecke verzichten möchte, sind alle Elemente auf der Seite absolut positioniert.

Ich befürchte Schlimmstes bei Schriftvergrößerung. Du solltest von position:absolute nur in begründeten Ausnahmefällen Gebrauch machen und das Ergebnis bei verschiedenen Schriftgraden und Fenstergrößen testen.

Ich nicht. Das Layout ist so ausgelegt, daß Schriftvergrößerungen um
bis zu 25% ohne jegliche Probleme und bis zu 50% mit kleineren
optischen Einschränkungen möglich sind. Und das trifft nur auf die
für dieses Projekt ziemlich unerhebliche Startseite zu. Auf den
anderen Seiten sollten Schriftvergrößerungen ohne weitere Probleme
fast beliebig möglich sein (abgesehen davon, daß dann irgendwann mal
die Navigation platzt).

Du kannst mir glauben, ich habe mir diese Sache gründlich überlegt.
Absolute Positionierung verwende ich auch nur, weil relative
Positionierungen aufgrund der Unterschiede die Mozilla und IE bei
der Interpretation gewisser Angaben an den Tag legen nicht möglich
ist:

In ein Container-Div hatte ich mehrere weitere Divs einfügt und
diese relativ positioniert, dabei sind drei der Divs mit negativen
Koordinaten versehen, so daß sie zum Teil außerhalb des Containers
liegen. Da der Container mit diversen border-Angaben versehen ist,
die u.a. auch für das Layout von Bedeutung sind, habe ich den
Container in der Höhe mit height:XXpx begrenzt, was Mozilla im
Gegensatz zum IE, der die Angabe einfach ignoriert, auch brav macht.
Versuche ich den Anzeigebereich im IE mit overflow:hidden
einzugrenzen, dann passt im IE alles allerdings schneidet Mozilla -
wahrscheinlich zurecht - die oben erwähnten, überstehenden Divs ab,
was ja auch nicht im Sinne des Erfinders ist. Da die Übergröße des
Container-Divs allein ein Problem der relativen Positionierung ist,
mußte ich hier auf absolute Positionierung ausweichen. Dabei mußte
ich auch den Container absolut positionieren, da beide Browser in
einem statisch oder relativ positionierten Container absolute
Positionierungsangaben auf die Koordinaten des nächsthöheren
absolute positionierten Divs und nicht direkt auf das Elternelment
bezogen haben.

Außerdem befindet sich prinzipiell der gesamte relevante Inhalt in
einem einzigen Div ohne feste Höhenangabe, so daß mit der
Schriftvergrößerung eigentlich keine Probleme entstehen sollten.

Aber das ist nicht mein Problem.

Ansonsten wäre es wirklich sinnvoller, wenn Du bei Deinen Tabellen bleiben würdest.

Ich mag dieses "Schuster bleib bei Deinen Leisten"-Prinzip nicht.
Denn ich habe inzwischen eingesehen, daß Tabellen eigentlich
wirklich nicht für Layout-Zwecke gedacht sind. Mit Tabellen hätte
ich wohl nur 1/3 der Zeit gebraucht, die ich bis jetzt aufgewendet
habe. Für mich steht der Einsatz von Tabellen hier aber nicht zur
Diskussion. Wenn ich mir hier schon die Mühe mache, in XHTML 1.1 zu
schreiben, dann möchte ich die Trennung von Struktur und Layout
wirklich konsequent durchziehen. Und dazu gehört meiner Meinung nach
auch der Verzicht auf Tabellen für Layout-Aufgaben.

Übrigens solltest Du der von Dir verlinkten Seite dringend eine Hintergrundfarbe spendieren. Je nach Voreinstellung des Browsers ist sonst kaum etwas zu erkennen.

Danke für den Hinweis.

Ciao,

Harry

[Tim Tepaße]

Hallo Harry,

ich bin zur Zeit dabei, meine Seiten auf XHTML 1.1 umzuschreiben.
warum nicht 1.0 ?
Persönlicher Ehrgeiz?

Der persönliche Ehrgeiz fällt dabei sehr schnell auf die Nase, wenn man
sich mit all den MIME-Kopfschmerzen beschäftigen muß, schließlich soll
XHTML 1.1 mit dem richtigen MIME-Typ ausgeliefert werden, der in Browsern
für praktische Probleme sorgen kann. Weswegen ich die Beschäftigung mit
XHTML 1.1 dann gelassen habe.

Tim

[Jeena Paradies]

Hallo Hans aus Deutschland,

schließlich soll XHTML 1.1 mit dem richtigen MIME-Typ ausgeliefert werden

Könntest du eventuell einen Link hier posten wo es erklärt wird warum es nicht als HTML ausgeliefert werden soll?

Grüße
Jeena Paradies

[Harry]

Holladiewaldfee,

schließlich soll XHTML 1.1 mit dem richtigen MIME-Typ ausgeliefert werden
Könntest du eventuell einen Link hier posten wo es erklärt wird warum es nicht als HTML ausgeliefert werden soll?

Die beste Quelle, die ich bis jetzt gefunden habe ist
http://www.hixie.ch/advocacy/xhtml

Zu den Mime-Typen habe ich auch eine ganz interessante Seite
gefunden, die zwar prinzipiell über XHTML 2.0 lästert - "XHTML's
Dirty Little Secret" ;) - was aber für das Thema Mime eher
irrelevant ist, schließlich wird auch zugenüge auf XHTML 1.1
eingegangen.

Ciao,

Harry

[Harry]

Holladiewaldfee,

ach kack doch die Wand an ...

Hier noch der Link zur Mime-Typ-Seite:
http://www.xml.com/pub/a/2003/03/19/dive-into-xml.html

Ciao,

Harry

[Tim Tepaße]

Hallo Harry,

Ian Hixie und Mark Pilgrim wären auch die beiden Quellen die ich abseits
der Standards dafür empfohlen hätte, gratuliere. :-)

Tim

[Harry]

Holladiewaldfee,

Der persönliche Ehrgeiz fällt dabei sehr schnell auf die Nase,
wenn man sich mit all den MIME-Kopfschmerzen beschäftigen muß,
schließlich soll XHTML 1.1 mit dem richtigen MIME-Typ
ausgeliefert werden, der in Browsern für praktische Probleme
sorgen kann. Weswegen ich die Beschäftigung mit
XHTML 1.1 dann gelassen habe.

also ich liefere die Seiten im Moment mit application/xhtml+xml aus.
Zur Zeit lasse ich einfach PHP diesen Header schicken.

Da die Seiten valide sind, hat es auch keine größeren Probleme damit
gegeben. Was mir aufgefallen ist, ist daß eine Hintergrundfarbe für
<body> keinen Effekt mehr auf die Seite hat, was aber nach dem
Verständnis von XML dadurch zu lösen war, daß ich die
Hintergrundfarbe auch dem <html>-Element zugeordnet habe.

Natürlich ist mir bewußt, daß ich mit obigem Mime-Typ wahrscheinlich
Probleme mit älteren Browsern bekommen werde. Deswegen werde ich das
PHP-Script, das im Moment den Header ausliefert, noch etwas
erweitern, irgendwas in der Art

---
if (strstr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml"))
  header("Content-type: application/xhtml+xml");
else
  header("Content-type: text/html");
---

Soweit ich das Verstanden habe heißt es ja nur man "soll" XHTML 1.1
nicht als text/html ausliefern - verboten ist es aber nicht (erst
mit XHTML 2.0).

Natürlich muß das Script noch verfeinert werden, weil z.B. der IE 6
(zumindest bei mir) kein application/xhtml+xml im HTTP_ACCEPT
mitliefert. Also müsste man halt den IE 6 noch extra rausfiltern -
wobei man diesen Header beim IE aber sowieso in die Tonne treten
kann, da steht schließlich nicht mal text/html drin ... und das
poplige */*, das er mitliefert ... naja.

Was die <style>-Elemente im <head> betrifft so habe ich diese im
Moment in der Form

---
<style type="text/css">
 <!--/*--><![CDATA[/*><!--*/

...

/*]]>*/-->
</style>
---

geschrieben. Damit wäre der Teil für ältere Prowser auskommentiert,
was ich aber prinzipiell für unnötig halte, denn wer einen so alten
oder dämlichen Browser hat, hat's eigentlich nicht viel anders
verdient. Ein einfaches <!-- ... --> ist ja in XHTML für #PCDATA-
Teile (was <style> glaube ich ja ist) ein echter Kommentar und alles dazwischen
wird ignoriert. Ich weiß das schaut ätzend aus und ich hab mir das
auch nicht ganz selber ausgedacht ;) Allerdings müßte es auf diese
Weise möglich sein, daß das Dokument sowohl als XHTML 1.1 als auch
als HTML 4 behandelt werden kann. Soweit mein Verständnis von diesem
XML-Zeug reicht, ist die Konstruktion zwar etwas verwegen aber
durchaus gültig und richtig:

Ich beginne einen XHTML-Kommentar und öffne in diesem einen CSS-
Kommentar. Dann schließe ich den XHTML-Kommentar wieder und weise
das nächste Element als #CDATA und nicht mehr #PCDATA aus. Damit
behandelt der XHTML-Parser den nachfolgenden Kommentar nicht mehr
als "echten" Kommentar im Sinne von XHTML und ignoriert das Folgende
nicht mehr. Nun schließe ich den CSS-Kommentar. Damit ist der vorige
Teil für den CSS-Parser uninteressant und kann nicht zu Fehlern
führen. Dann kommt das normale CSS-Geblubber und am Ende schließe
ich halt in gleicher Weise den #CDATA-Teil wieder ab.

Für JS gibt es eine ähnliche Konstruktion, da ich das aber in diesen
Seiten nicht benutze ist es für mich eher uninteressant (vgl.
http://www.hixie.ch/advocacy/xhtml).

Ciao,

Harry

[Harry]

Holladiewaldfee (schon wieder ein Nachtrag),

---

if (strstr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml"))
  header("Content-type: application/xhtml+xml");
else
  header("Content-type: text/html");

Natürlich muß das Script noch verfeinert werden, weil z.B. der IE6
(zumindest bei mir) kein application/xhtml+xml im HTTP_ACCEPT
mitliefert.

Das ist anscheinend auch richtig so, da muß ich mich korrigieren.
Wenn den application/xhtml+xml Header an den IE schicke bietet er
mit den Speichern-Unter-Dialog an. Interessant ist aber, daß wenn
die Seite einmal mit text/html an den IE ausgeliefert wurde und man
dann nur auf "Aktualisieren" geht, er trotz application/xhtml+xml
Header die Seite normal lädt. Es hat also den Anschein, als würde
der IE bei einem Reload den mitgelieferten Header ohne ihn zu
beachten in die Tonne treten ...

Damit wäre obiges Script also doch richtig und müsste nicht
erweitert werden.

Ciao,

Harry

(So langsam reichts mit den angeblich manipulierten Daten)

[molily]

Hallo,

Was die <style>-Elemente im <head> betrifft so habe ich diese im Moment in der Form

Wieso benutzt du nicht link-Elemente (und ggf. <?xml-stylesheet ?> Verarbeitungsanweisungen)? Dadurch lassen sich solche Probleme umgehen. Im Übrigen, wenn du Clients unterstützen willst, die keine Stylesheets unterstützen (denn das wollen solche Konstruktionen erreichen, sonst wäre ja /* <![CDATA[ */ ... /* ]]> */ ausreichend), dann hast du noch völlig andere Probleme, da diese Clients sicher nicht gut auf XHTML-Syntax zu sprechen sind. Aber wie du weißt, das ist sowieso ein Glücksspiel.

Ich weiß das schaut ätzend aus und ich hab mir das auch nicht ganz selber ausgedacht ;) Allerdings müßte es auf diese Weise möglich sein, daß das Dokument sowohl als XHTML 1.1 als auch als HTML 4 behandelt werden kann.

Im Archiv erfährst du, dass XHTML 1.1 im Gegensatz zu XHTML 1.0 nicht für Kompatibilität mit HTML 4 ausgerichtet ist. Wieso schreibst du nicht einfach XHTML 1.0 Strict nach den Kompatibilitätsrichtlinien? XHTML 1.0 kannst du ebenso als application/xhtml+xml ausliefern, und es hat dann auch einen Sinn und ist empfohlen, es gleichzeitig als abwärtskompatibles text/html auszuliefern.

Im Übrigen solltest du je nach Modus eine XML-Deklaration mit encoding-Angabe respektive ein entsprechendes meta-Element einfügen lassen.

Mathias

[Harry]

Holladiewaldfee,

Wieso benutzt du nicht link-Elemente (und ggf. <?xml-stylesheet ?> Verarbeitungsanweisungen)? Dadurch lassen sich solche Probleme umgehen.

ich benutze durchaus link-Elemente für Stylesheets. Allerdings möchte ich nicht für die "Kleinigkeiten", die in den einzelnen Seiten anfallen, für jede Seite ein extra Stylesheet verwenden. Deswegen verwende ich ein "großes" Stylesheet mit den generellen, seitenübergreifenden Angaben, und einen <style>-Bereich für die "Kleinigkeiten".

Im Übrigen, wenn du Clients unterstützen willst, die keine Stylesheets unterstützen (denn das wollen solche Konstruktionen erreichen, sonst wäre ja /* <![CDATA[ */ ... /* ]]> */ ausreichend), dann hast du noch völlig andere Probleme, da diese Clients sicher nicht gut auf XHTML-Syntax zu sprechen sind. Aber wie du weißt, das ist sowieso ein Glücksspiel.

Jein - so viel können sie eigentlich nicht falsch machen. Das "/" am Ende müssten sie wegen dem vorangehenden Leerzeichen eigentlich ignorieren. Und damit wäre eigentlich nichts mehr drin, was den alten Clients sauer aufstossen könnte. Das Dokument bekommen sie ja als text/html geliefert und die DTD sollten sie - da unbekannt - in die Tonne treten und in den wie auch immer gearteten Quirks- oder Interpretiere-Alles-Irgendwie-Modes schalten.

Im Archiv erfährst du, dass XHTML 1.1 im Gegensatz zu XHTML 1.0 nicht für Kompatibilität mit HTML 4 ausgerichtet ist.

Das mag sein, allerdings sehe ich zur Zeit zumindest bei meinen Seiten keine Probleme mit der Kompatibilität zu HTML 4.

Im Übrigen solltest du je nach Modus eine XML-Deklaration mit encoding-Angabe respektive ein entsprechendes meta-Element einfügen lassen.

Eine XML-Deklaration möchte ich nicht mitsenden, da mir der IE sonst wieder in den Quirks-Modus hüpft. Ein meta-Element mit Encoding-Angabe ist natürlich dabei.

Ach ja, falls es in Vergessenheit geraten sein sollte: Mein Problem ist nicht XHTML, egal ob 1.1 oder 1.0 strict oder was auch immer, sondern die Positionierung von Elementen am unteren Rand ...

Ciao,

Harry

[molily]

Hallo,

Im Übrigen, wenn du Clients unterstützen willst, die keine Stylesheets unterstützen (denn das wollen solche Konstruktionen erreichen, sonst wäre ja /* <![CDATA[ */ ... /* ]]> */ ausreichend), dann hast du noch völlig andere Probleme, da diese Clients sicher nicht gut auf XHTML-Syntax zu sprechen sind. Aber wie du weißt, das ist sowieso ein Glücksspiel.

Jein - so viel können sie eigentlich nicht falsch machen. Das "/" am Ende müssten sie wegen dem vorangehenden Leerzeichen eigentlich ignorieren. Und damit wäre eigentlich nichts mehr drin, was den alten Clients sauer aufstossen könnte.

Diese von Hixie zur Abschreckung angeführte Konstruktion zielt auf Browsern wie IE 2 und Netscape 3 ab. Ich wäre mir auch nicht sicher, dass diese Browser mit XHTML-Syntax problemlos klarkommen. Mit denen gibt's sowieso grundlegende Probleme, weil sie nicht einmal HTML 4 können. Es ist recht aussichtslos, diese unterstützen zu wollen. Für alle Browser darüber sollte die einfachere Variante reichen.

Im Archiv erfährst du, dass XHTML 1.1 im Gegensatz zu XHTML 1.0 nicht für Kompatibilität mit HTML 4 ausgerichtet ist.

Das mag sein, allerdings sehe ich zur Zeit zumindest bei meinen Seiten keine Probleme mit der Kompatibilität zu HTML 4.

Ich sehe nicht, wieso man mutwillig Internetstandards missachten sollte, wenn es unter Beachtung der Empfehlungen genauso geht und sich verschiedene Dinge dadurch abwärtskompatibel lösen lassen, selbst wenn du momentan kein Gebrauch davon machst (prominentes Beispiel: Linkanker).

Im Übrigen solltest du je nach Modus eine XML-Deklaration mit encoding-Angabe respektive ein entsprechendes meta-Element einfügen lassen.

Eine XML-Deklaration möchte ich nicht mitsenden, da mir der IE sonst wieder in den Quirks-Modus hüpft.

Ich meinte natürlich, dass diese nur im Falle von application/xhtml+xml eingefügt werden sollte.

Ein meta-Element mit Encoding-Angabe ist natürlich dabei.

Die hat aber keine Relevanz für den Browser, wenn das Dokument als application/xhtml+xml ausgeliefert und entsprechend verarbeitet wird.

Mathias

[Ingo Turski]

Hi,

warum nicht 1.0 ?

Persönlicher Ehrgeiz? Außerdem finde ich das Schöne an XHTML 1.1,
daß es einen regelrecht dazu zwingt, Layout und Struktur voneinander
zu trennen.

das ist bei 1.0 Strict doch auch der Fall. Und solange die Browser noch nicht reif für xhtml1.1 - als solches auch ausgeliefert - sind, halte ich es für übrzogenen Ehrgeiz.

Das Layout ist so ausgelegt, daß Schriftvergrößerungen um
bis zu 25% ohne jegliche Probleme und bis zu 50% mit kleineren
optischen Einschränkungen möglich sind.

Das hätte ich nun nicht vermutet..;-)

Absolute Positionierung verwende ich auch nur, weil relative
Positionierungen aufgrund der Unterschiede die Mozilla und IE bei
der Interpretation gewisser Angaben an den Tag legen nicht möglich
ist:

das wiederum glaube ich nicht. Hast Du denn überhaupt schon die Möglichkeiten von FLOAT versucht zu nutzen? Dies finde ich wesentlich sinnvoller als sich mit den Problemen absoluter oder relativer Positionierung herumzuschlagen.

freundliche Grüße
Ingo

[Harry]

Holladiewaldfee,

das ist bei 1.0 Strict doch auch der Fall. Und solange die Browser noch nicht reif für xhtml1.1 - als solches auch ausgeliefert - sind, halte ich es für übrzogenen Ehrgeiz.

Es gibt noch andere Gründe. Ganz besonders schiele ich da natürlich
auf die Möglichkeit der Implementierung von MathML2:
http://www.w3.org/TR/MathML2/appendixa.html#parsing.module

Natürlich ist mir bewußt, daß es mit der Unterstützung von MathML
nicht weit her ist, allerdings kann es ja nicht schaden, wenn man
sich schonmal den passenden Rahmen dafür schafft und sich mit der
Materie beschäftigt - "Learning By Doing" ist hier meine Direktive.

Absolute Positionierung verwende ich auch nur, weil relative
Positionierungen aufgrund der Unterschiede die Mozilla und IE bei
der Interpretation gewisser Angaben an den Tag legen nicht möglich
ist:
das wiederum glaube ich nicht. Hast Du denn überhaupt schon die Möglichkeiten von FLOAT versucht zu nutzen? Dies finde ich wesentlich sinnvoller als sich mit den Problemen absoluter oder relativer Positionierung herumzuschlagen.

Das Problem ist wiefolgt:

+---+
  | 1 | Überschrift
  |   |----------------------------------------- (Container-Div)
  +---+
    |     Blablubbertext.
    |
    |
    |
    X

Das große Ding ist das Container-Div. Die Elemente 1 (ein Bild) und
die Überschrift werden - obwohl Kindelemente des Containers -
außerhalb des Containers positioniert. Von dieser Konstruktion sind
mehrere am Ende eines Textes positioniert. Das Problem ist nun wie
zuvor beschrieben, daß der IE die Höhenangabe für das Container-Div
ignoriert. Aufgrund der relativen Positionierung (auch
des "Blablubbertext"-Elementes) verlängert nun der IE das Container-
Div an der mit X bezeichneten Stelle ein gutes Stück nach unten,
auch wenn dort überhaupt kein Text mehr kommt. Mozilla schneidet das
Div an der richtigen Stelle ab. Das hat jetzt aber zur Folge, das
alle nachfolgenden Konstruktionen im IE im Gegensatz zu Mozilla viel
zu weit nach unten verschoben sind.

Ich wüßte nicht, inwieweit float hier von Nutzen sein sollte.

Die Möglichkeit, zwei unterschiedliche Stylesheets an IE und Mozilla
auszuliefern, scheidet natürlich aus ...

Ciao,

Harry

Ja Himmiherrgott, was ist denn heut los? "Die Daten scheinen manipuliert worden sein" ... zum hundertausendsten mal.

[wahsaga]

hi,

Das Problem ist wiefolgt:
[...]

nein, das habe ich jetzt auch _mit_ ASCII-art und beschreibung noch nicht verstanden - hast du mal ein online-beispiel?

Ich wüßte nicht, inwieweit float hier von Nutzen sein sollte.

ich wüsste nicht, wozu deine oben beschriebene konstruktion überhaupt von nutzen sein sollte :-)

gruss,
wahsaga

[Harry]

Holladiewaldfee,

nein, das habe ich jetzt auch _mit_ ASCII-art und beschreibung noch nicht verstanden - hast du mal ein online-beispiel?

Hm, das ist ein anderes Problem als das ursprüngliche (immer noch ungelöste) mit der Positionierung von Elementen am unteren Rand.

Es ging mir darum, Ingor zu beschreiben, wo die Probleme bei der relativen Positinierung von Elementen auf meiner Seite liegen und warum ich deswegen absolute Positionierung verwendet habe.

Der grob vereinfachte Quelltext:

--- CSS
div { position:absolute; }

div.list { top:715px; width:780px; left:15px; border:0px; border-
           style:dashed; border-top-width:1px;
           border-left-width:1px; border-left-color:#222222;
           border-top-color:#222222; height:90px; }
div.icon { top:-18px; left:-13px; width:31px; height:31px; }
div.subheading { top:-14px; left:30px; }
--- XHTML
<div class="list">
 <div class="icon"><img src="./img/icons/berg.gif" alt="" /></div>
 <div class="subheading"><h2>Ueberschrift</h2></div>

<div class="desc">
  Hier finden Sie blablubb
 </div>
</div>
---

Aussehen soll das dann so:

+---+
  | 1 | |=2=|
  |   |--------------------------------------+
  +---+              3                       |
    |   +-----------------------------------+|
    |   |             4                     ||
    |   |                                   ||
    |   +-----------------------------------+|
    +----------------------------------------+

Wobei "1" dem Div mit der Grafik, 2 dem Div mit "subheading", 3 dem Container-Div mit "list" und 4 dem Div "desc" entspricht.

Aber eigentlich habe ich damit überhaupt kein Problem, nur Ingor meinte, ich hätte eines ;) Schließlich haut es mit der absoluten Positionierung gut hin, nur wenn ich die Elemente relativ positionieren will nicht. Aber die Ursache dafür habe ich ja schon beschrieben.

ich wüsste nicht, wozu deine oben beschriebene konstruktion überhaupt von nutzen sein sollte :-)

Ästhetik ;) Natürlich gibt es andere Möglichkeiten, das zu lösen.

Ciao,

Harry

[wahsaga]

hi,

Aussehen soll das dann so:

+---+
  | 1 | |=2=|
  |   |--------------------------------------+
  +---+              3                       |
    |   +-----------------------------------+|
    |   |             4                     ||
    |   |                                   ||
    |   +-----------------------------------+|
    +----------------------------------------+

warum du das nicht per float umzusetzen versuchst, ist mir ebenso unerklärlich wie Ingo.

gruss,
wahsaga

[Harry]

Holladiewaldfee,

warum du das nicht per float umzusetzen versuchst, ist mir ebenso unerklärlich wie Ingo.

warum ich das und vor allem was ich da überhaupt mit float machen soll, ist mir immer noch so unerklärlich wie vorher. Es gibt hier keinen Text oder sonstwas, der irgendwo drumrum fließen müsste. Aber das ist auch überhaupt nicht mein Problem. Dieses Dings da ist nicht mein Problem, es ist beliebig austauschbar und ist für die Seite an sich vollkommen unerheblich. Ob es absolut positioniert ist oder nicht ist egal, da der Container für dieses gesamte Ding absolut positioniert ist, weil ich fürs Layout keine Tabellen verwenden will. Und selbst wenn ich den Ober-Container nicht absolut positioniere renne ich mit den Elementen im Container wieder in die zuvor beschriebenen Probleme rein.

Was mich interessiert ist ob und ggf. wie ich in einer Seite mit einem Haufen absolut positionierten Elementen Elemente "unten" (wie eingangs beschrieben) ausrichten kann. Das ist alles, nicht mehr, nicht weniger.

Ich weiß ja, daß Ihr's gut mein, nur so langsam aber sicher wechsle ich in einen Zustand, der sich wohl recht passend mit "ge- bis entnervt" beschreiben lässt: Ich bin hier andauernd dabei mich für Technik X und Vorgehen Y zu rechtfertigen, auch wenn mein Problem ganz woanders liegt.

Und jetzt nochmal ganz ruhig, von vorne:

Auf der Seite sind (alle tragenden) Elemente absolut positioniert, deren Größe ist unbekannt und kann über den Bildschirmrand hinausreichen. Nun möchte ich - abhängig von der Größe der Elemente in der Seite - ein Element entweder am unteren Bildschirmrand oder am unteren Rand der Seite positionieren. Der Workaround mit dem div mit height:100% funktioniert aufgrund der absoluten Positionierung nicht. Die im von Jeena verlinkten Artikel (http://www.alistapart.com/articles/footers/) beschriebenen Tricks funktionieren aus demselben Grund ebenfalls nicht. Dabei ist es egal, ob die Seite in XHTML 1.1 oder 1.0 strict geschrieben ist. Andere Sprachvariationen sowie der Einsatz von Tabellen für Layout-Zwecke kommen für die Seite nicht infrage. Gibt es dennoch eine Möglichkeit, das Element wie beschrieben auszurichten?

Ciao,

Harry

[wahsaga]

hi,

Ich bin hier andauernd dabei mich für Technik X und Vorgehen Y zu rechtfertigen, auch wenn mein Problem ganz woanders liegt.

nein, dein problem _liegt_ in "technik x und vorgehen y":

[...] Der Workaround mit dem div mit height:100% funktioniert aufgrund der absoluten Positionierung nicht. Die im von Jeena verlinkten Artikel (http://www.alistapart.com/articles/footers/) beschriebenen Tricks funktionieren aus demselben Grund ebenfalls nicht.

siehst du immer noch nicht ein, dass "technik x und vorgehen y" dir hier das leben schwer machen?

Gibt es dennoch eine Möglichkeit, das Element wie beschrieben auszurichten?

wenn du bei "technik x und vorgehen y" bleiben möchtest, sehe ich keine möglichkeit.

gruss,
wahsaga

[Harry]

Hi wahsaga,

Ich bin hier andauernd dabei mich für Technik X und Vorgehen Y zu rechtfertigen, auch wenn mein Problem ganz woanders liegt.

nein, dein problem _liegt_ in "technik x und vorgehen y":

Das Technik X nicht das Problem ist, hat sich doch inzwischen wohl herausgestellt?

Es funktioniert weder mit XHTML 1.1 noch mit 1.0 strict, und ich geh jede Wette, daß es mit dem Rest auch net funkt. Das Problem liegt so weit ich das nun überrissen habe in der dummen Angewohnheit der Browser, die Höhe von absolut positionierten Elementen nicht in die Berechnung der Seitenhöhe mit aufzunehmen. Das Seltsame ist: Die Scrollbalken passen und werden richtig berechnet, die Seitenhöhe selbst, die ich per CSS anzapfen will, ist falsch. Und zwar in beiden Browsern.

siehst du immer noch nicht ein, dass "technik x und vorgehen y" dir hier das leben schwer machen?

Was mir das Leben schwer macht ist die absolute Positionierung. Allerdings weigere ich mich noch etwas zu glauben, daß die Browser wirklich so kreuzdoof sind und daß es keine Möglichkeit gibt an die wirkliche Höhe dieser Elemente dranzukommen.

wenn du bei "technik x und vorgehen y" bleiben möchtest, sehe ich keine möglichkeit.

Soll heißen wenn ich für's Layout nur absolut positionierte Elemente verwenden will / kann, habe ich automatisch verloren und kann nicht wie eingangs beschrieben Elemente unten positionieren? Gut, das wäre dann ziemlich genau das gewesen, worum es mir ging, Danke :)

Daß ich, wenn das mit der absoluten Positionierung nicht möglich ist, etwas ändern muß, ist mir schon klar. Wahrscheinlich werde ich dann wohl auf diese seltsamen Design-Elemente verzichten müssen und mir was einfacheres ausdenken müssen. Mir ist klar, daß ich mein Problem lösen kann, wenn ich auf die absolute Positionierung verzichte und das ganze mit (mindestens genauso seltsamen) relativen und/oder statischen Positionierungen löse. Allerdings hätte es ja sein können, daß es auch mit absoluter Positionierung lösbar gewesen wäre.

Ciao,

Harry

[Ingo Turski]

Hi,

Aussehen soll das dann so:

+---+
  | 1 | |=2=|
  |   |--------------------------------------+
  +---+              3                       |
    |   +-----------------------------------+|
    |   |             4                     ||
    |   |                                   ||
    |   +-----------------------------------+|
    +----------------------------------------+

in der Tat sehe ich hier nicht unbedingt eine Verwendungsmöglichkeit für FLOAT, allerdings auch keine Notwendigkeit, alles über POSITION auszurichten. Lediglich [1] müßte entweder über FLOAT und negative margins oder POSITION definiert werden. Das könnte dann so aussehen:

<!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" xml:lang="de" lang="de">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html, body { margin:0; padding:0; }
body {color:black; background:silver; }
div { text-align:center; }
#eins { position:absolute; top:0; left:0; width:31px; height:31px; background:red; }
#zwei { margin:3px 0 3px 40px; font-size:14px; }
#zwei span { background:yellow; }
#drei { width:700px; margin:0 0 0 15px; background:blue; }
#vier { margin:15px 3px 3px 25px; background:white; }
</style>
</head>
<body>
<h1 id="zwei"><span>= 2 =</span></h1>
<div id="drei">3<br />
  <div id="vier">4<br /><br /><br /><br /></div>
</div>
<div id="eins">1</div>
</body>
</html>

freundliche Grüße
Ingo

[Harry]

Hi Ingo,

vielen Dank für Deine Mühe, und sorry, daß ich Dich das letzte mal "Ingor" genannt habe, ich hab mir den Namen falsch gemerkt.

#eins { position:absolute; top:0; left:0; width:31px; height:31px; background:red; }

Genau da liegt der Hund ja wieder begraben. Obige Konstruktion ist wie schon erwähnt Teil eines größeren und kommt auf der besagten Seite mehrmals vor. Ich hab mal einen Screenshot gemacht:

http://harry.ilo.de/temp/sc1.jpg (70k)

Wie Du siehst, sind die Elemente unter einem Textabsatz angeordnet. Packe ich nun die ganze Konstruktion in ein Div, so kann ich nicht mehr mit der absoluten Positionierung arbeiten, da die Browser wie gesagt alle absoluten Positionierungsangaben auf die des in der Hierarchie nächsthöheren absolut positionierten Elementes beziehen.

Ich müßte also den Container für diese Konstruktion absolut positionieren - und da renne ich wieder in den Fehler der Browser rein, bei absoluter Positionierung die Höhe der Elemente nicht in die Berechnung der gesamten Seitenhöhe einzubeziehen.

Im Moment ist der "Ober-Container" ein Div, das sowohl den oberen Textabsatz als auch diese Konstruktionen beinhaltet. Dieses ist absolut positioniert - überflüssiger Weise. Das würde ich genausogut mit relativer Positionierung hinbekommen. Allerdings kann ich dann kein einziges Element mehr, das in diesem Container ist, absolut positionieren (aus oben beschriebenem Grund). Ich müsste also die gesamte Konstruktion (mehrmals) ohne absolute Positionierung hinbekommen - ein endloses Gefitzel mit relativer Positionierung, das nicht wirklich schön ist. Statisch ist wegen der Überlappung eigentlich nicht wirklich was machbar.

Ich werde also wohl auf diese Konstruktionen verzichten müssen, das ist mir inzwischen klar geworden.

Ciao,

Harry

[Ingo Turski]

Hi,

sorry, daß ich Dich das letzte mal "Ingor" genannt habe, ich hab mir den Namen falsch gemerkt.

nunja, solange es nicht "Igor" ist..;-)

Genau da liegt der Hund ja wieder begraben. Obige Konstruktion ist wie schon erwähnt Teil eines größeren und kommt auf der besagten Seite mehrmals vor. Ich hab mal einen Screenshot gemacht:

http://harry.ilo.de/temp/sc1.jpg (70k)

Wie Du siehst, sind die Elemente unter einem Textabsatz angeordnet. Packe ich nun die ganze Konstruktion in ein Div, so kann ich nicht mehr mit der absoluten Positionierung arbeiten

Und gerade hierzu brauchst Du nicht eine einzige Angabe zu position, allerdings float und - wie ich als Alternative schon sagte - negative margins:

<!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" xml:lang="de" lang="de">
<head>
<title>Float...</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {color:black; background:gray; font-size:101% }
#navi { width:10em; float:left; background:silver; }
#inhalt { margin-left:12em; background:white; }
.spezial { border-top:1px dashed black; border-left:1px dashed black; margin-left:15px; padding-left:25px; }
.spezial img { display:block; float:left; width:31px; height:31px; margin:-15px 0 0 -20px; }
html>body .spezial img { margin-left:-40px; }
h2 { font-size: 1.2em; float:left; margin:-25px 0 0 0; }
</style>
</head>
<body>
<div id="navi">Navigation<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>

<div id="inhalt"><h1>Inhalt</h1>
  <br /><br /><br /><br />Text<br /><br /><br />
  <div class="spezial"><img src="bild.gif" alt="" />
    <h2>Bergtouren</h2>
    <p>Text<br />Text<br />Text<br />Text<br />Text</p>
  </div>
</div>
</body>
</html>

freundliche Grüße
Ingo

[Harry]

Holladiewaldfee,

Und gerade hierzu brauchst Du nicht eine einzige Angabe zu position, allerdings float und - wie ich als Alternative schon sagte - negative margins:

he, das schaut ja echt vielversprechend aus :) Ich werde mal damit rumexperimentieren, Danke :) Wenn's nicht hinhaut werde ich das morgen oder so hier nochmal vermelden.

Trotzdem würde mich noch interessieren, ob es auch eine Lösung für mein ursprüngliches Problem mit den absolut positionierten Elementen gibt ;)

Ciao,

Harry