Elementausrichtung an Elternelement / Body

[Pida]

Hallo,

ich versuche grade, eine Seite von Tabellenlayout auf css umzustellen.
Das grobe Layout vorher (v.l.n.r.):
Navigation, ein leerer <td> mit 30% Breite zur Anpassung an verschiedene Fenstergrößen, der Hauptinhalt, ein weiterer Platzhalter-<td> und nochmal Navigation.

Die Platzhalter sind jetzt ersatzlos weggefallen, die Navigation konnte ich in folgender Art und Weise am linken bzw. rechten Fensterrand ausrichten:
<div style="position:absolute; top:20px; left:10px">

Nun aber der Hauptinhalt, der horizontal zentriert erscheinen soll:

<div style="text-align:center">
 <IMG SRC="dateien/titel.jpg" border=0 width="465" height="566" alt="Titel">
 <a class="mail" style="position:absolute; top:520px; left:130px; background-image:none; font-weight:normal"
href="mailto:mailadresse">mailtext</a>
</div>

Die Ausrichtung des Bildes gelang mit text-align:center perfekt, die email-Adresse allerdings schwirrt ganz links oben rum. Offensichtlich ist die Ausrichtung nicht am <div> orientiert, sondern am gesamten body.
Nur warum? Darf vielleicht ein <a> nicht Unterelement eines <div> sein? Falls dem so ist, wie kann ich das Problem umgehen?

Vielen Dank, Pida

[Peetah]

Hallo Pida,

Die Ausrichtung des Bildes gelang mit text-align:center perfekt, die email-Adresse allerdings schwirrt ganz links oben rum. Offensichtlich ist die Ausrichtung nicht am <div> orientiert, sondern am gesamten body.
Nur warum?

weil du die E-Mail-Adresse absolut positioniert hast. Das richtet sich immer nach dem Anzeigebereich des Browsers, nicht nach dem Elternelement.

Gruß,
Peetah

[Pida]

Hi,

weil du die E-Mail-Adresse absolut positioniert hast. Das richtet sich immer nach dem Anzeigebereich des Browsers, nicht nach dem Elternelement.

Das widerspricht aber der css-Kurzreferenz von Selfhtml. Zitat:
absolute = absolute Positionierung, gemessen am Rand des Elternelements, aber scrollbar.
fixed = absolute Positionierung, gemessen am Rand des Elternelements, bleibt beim Scrollen stehen.

Also sind die Infos von Selfhtml hier ausnahmsweise mal falsch oder (was wohl eher der Fall ist) das <div> wird aus irgendeinem Grund nicht als Elternelement des <a> anerkannt.

Danke, Pida

[wahsaga]

hi,

Das widerspricht aber der css-Kurzreferenz von Selfhtml. Zitat:
absolute = absolute Positionierung, gemessen am Rand des Elternelements, aber scrollbar.

da fehlt noch der zusatz, dass dieses elternelement selbst eine vom defaultwert static abweichende positionierung haben muss; andernfalls wird am viewport ausgerichtet.

gruß,
wahsaga

[wahsaga]

hi,

ich versuche grade, eine Seite von Tabellenlayout auf css umzustellen.

und dabei greifst du zum ersten notnagel, der dir in die finger gekommen ist:

<div style="position:absolute; top:20px; left:10px">

absolute positionierung ist _nicht_ der "heilige gral" des layoutens mit CSS.

beschäftige dich stattdessen mit eigenschaften wie float, so dass du auf absolute positionierung von elementen weitgehend verzichten kannst.

gruß,
wahsaga

[Pida]

Hi,

und dabei greifst du zum ersten notnagel, der dir in die finger gekommen ist:
absolute positionierung ist _nicht_ der "heilige gral" des layoutens mit CSS.

Wo siehst du denn im von dir zitierten Beispiel (erreicht werden sollte ja ein fester Abstand zum Fensterrand) ein Problem?

beschäftige dich stattdessen mit eigenschaften wie float, so dass du auf absolute positionierung von elementen weitgehend verzichten kannst.

Auf den ersten Blick scheint mir schleierhaft, wie ich mit Textfluss ein Element zentriert anordnen kann (werd mir das aber noch genauer anschauen). War der Tip denn auf mein Problem bezogen oder eher allgemeiner Natur?

Danke, Pida

[wahsaga]

hi,

Wo siehst du denn im von dir zitierten Beispiel (erreicht werden sollte ja ein fester Abstand zum Fensterrand) ein Problem?

wo siehst du da eine notwendigkeit, absolute positionierung zu verwenden?
abstände im textfluss macht man generell erst mal über margin.

Auf den ersten Blick scheint mir schleierhaft, wie ich mit Textfluss ein Element zentriert anordnen kann (werd mir das aber noch genauer anschauen).

inline elemente über text-align:center im elternelement,
block level elemente mit breitenangabe über margin:auto (und ebenfalls text-align:center im elternelement für den IE < 6 oder 6 im quirks mode).

War der Tip denn auf mein Problem bezogen oder eher allgemeiner Natur?

sowohl als auch, würde ich sagen :-)

gruß,
wahsaga

[Pida]

Was ich bisher übersehen hab: Sowohl Mozilla als auch Opera sind betroffen, nicht aber der IE 6...

Gruß, Pida