Discussion:
[TYPO3-german] [ot: css] ebenen übereinander: position:relative
Markus Bucher
2006-01-18 09:04:16 UTC
Permalink
Hallo,

ich habe in einer zentrierenden Tabelle mehrere Ebenen, die ?ber
einander liegen sollen. Dies erreiche ich mit:

style="position:relative; top:0px; height: 50px"
f?r Layer1,

style="position:relative; top:-50px; height: 50px"
f?r Layer2,

style="position:relative; top:-100px; height: 50px"
f?r Layer3.

Anschlie?end kommen weitere Tabellen und Ebenen.

Unter Firefox/Mozilla werden folgende Elemente bei der H?he 50px
ausgegeben, IE summiert auf 150px.

Ist dies ein weiteres Beispiel f?r das "Boxing model" mit
unterschiedlicher Interpretation der verschiedenen Browser?

Wie kann ich den Code f?r beide Browser gestalten?

Mit "position:absolute" kann ich nicht arbeiten, weil sonst die
Zentrierung durch die Tabelle wegf?llt. Mir bleibt nur
"position:relative", oder?

Danke,

Markus
JoH
2006-01-18 10:06:47 UTC
Permalink
Post by Markus Bucher
ich habe in einer zentrierenden Tabelle mehrere Ebenen, die ?ber
style="position:relative; top:0px; height: 50px"
f?r Layer1,
style="position:relative; top:-50px; height: 50px"
f?r Layer2,
style="position:relative; top:-100px; height: 50px"
f?r Layer3.
Anschlie?end kommen weitere Tabellen und Ebenen.
Warum ausgrechnet Tabellen? Ginge doch sicher auch mit DIV ...
Post by Markus Bucher
Unter Firefox/Mozilla werden folgende Elemente bei der H?he 50px
ausgegeben, IE summiert auf 150px.
Weil er die Teile bei position:relative quasi erst aufbaut und dann
verschiebt.
Wenn Du mit positiven Werten arbeiten w?rdest, w?rden nachfolgende Elemente
die vorhergehenden ?berlagern.
So entstehen L?cken. Firefox macht das teilweise auch.
Post by Markus Bucher
Ist dies ein weiteres Beispiel f?r das "Boxing model" mit
unterschiedlicher Interpretation der verschiedenen Browser?
Nein. Aber unsch?n ist es dennoch.
Post by Markus Bucher
Wie kann ich den Code f?r beide Browser gestalten?
Mit "position:absolute" kann ich nicht arbeiten, weil sonst die
Zentrierung durch die Tabelle wegf?llt. Mir bleibt nur
"position:relative", oder?
Nein. Denn auch position:absolute mu? sich nicht immer auf den Browser
beziehen. Wenn Du mit verschachtelten Elementen arbeitetst, wird immer das
n?chstgelegene Elternelement verwendet, das nicht position:static hat.
Weil position:static der default ist, der bei keinerlei Positions-Angaben
verwendet wird, hat position:absolute zun?chst mal den Effekt, sich immer am
Fenster selbst auszurichten.
Nicht so, wenn Du einem Elternelement position:relative zuweist.

Beispiel:

<body style="text-align:center;">
<div style="position:relative; margin-left:auto; margin-right:auto;
width:790px; height:450px; background:#fc9;">
<div style="position:absolute; top:0; left:0; width:100px;
height:100px; background:#f00;">Testbox</div>
<div style="position:absolute; top:0; right:0; width:100px;
height:100px; background:#f00;">Testbox</div>
<div style="position:absolute; bottom:0; left:0; width:100px;
height:100px; background:#f00;">Testbox</div>
<div style="position:absolute; bottom:0; right:0; width:100px;
height:100px; background:#f00;">Testbox</div>
</div>
</body>

Ergibt ein zentriertes DIV Element mit apricotfarbenem Hintergrund.
Darin findest Du an jeder Ecke ein rotes Quadrat.

Spiel mal damit rum

Joey
--
Wenn man keine Ahnung hat: Einfach mal Fresse halten!
(If you have no clues: simply shut your knob sometimes!)
Dieter Nuhr, German comedian
http://www.cybercraft.de
Christian Wolff
2006-01-18 10:14:37 UTC
Permalink
Hallo Markus,
ich w?rde mal folgende idee probieren:
<div style="position:relative">
<div style="position:absolute; top:0px;left:0px;">layer 1</div>
<div style="position:absolute; top:0px;left:0px;">layer 2</div>
<div style="position:absolute; top:0px;left:0px;">layer 3</div>
</div>

sollte eigendlich dazu f?ren das alle layer ?bereinander in der
zelle liegen.
durch den ?usseren div mit position:relative
werden die inneren absolut positionen darauf bezogen
und nicht mehr auf die seite.
das funktioniert, getestet unter ie und firefox

das ganze packst du dann einfach in deine tabellen zelle und sch?n ist.
gruss chris
Post by Markus Bucher
Hallo,
ich habe in einer zentrierenden Tabelle mehrere Ebenen, die ?ber
style="position:relative; top:0px; height: 50px"
f?r Layer1,
style="position:relative; top:-50px; height: 50px"
f?r Layer2,
style="position:relative; top:-100px; height: 50px"
f?r Layer3.
Anschlie?end kommen weitere Tabellen und Ebenen.
Unter Firefox/Mozilla werden folgende Elemente bei der H?he 50px
ausgegeben, IE summiert auf 150px.
Ist dies ein weiteres Beispiel f?r das "Boxing model" mit
unterschiedlicher Interpretation der verschiedenen Browser?
Wie kann ich den Code f?r beide Browser gestalten?
Mit "position:absolute" kann ich nicht arbeiten, weil sonst die
Zentrierung durch die Tabelle wegf?llt. Mir bleibt nur
"position:relative", oder?
Danke,
Markus
_______________________________________________
TYPO3-german mailing list
TYPO3-german at lists.netfielders.de
http://lists.netfielders.de/cgi-bin/mailman/listinfo/typo3-german
Markus Bucher
2006-01-20 18:53:46 UTC
Permalink
Post by Christian Wolff
Hallo Markus,
<div style="position:relative">
<div style="position:absolute; top:0px;left:0px;">layer 1</div>
<div style="position:absolute; top:0px;left:0px;">layer 2</div>
<div style="position:absolute; top:0px;left:0px;">layer 3</div>
</div>
Hi Christian,

danke, klappt einwandfrei.

@JoH: Deins setze ich _bestimmt_ einmal um, ist die erste L?sung, die
ich kenne, die ohne Tables auskommt. Danke auch daf?r.

Gru?

Markus Bucher

Christian Welzel
2006-01-18 17:32:57 UTC
Permalink
Hallo,

wo wir schonmal offtopic und bei CSS sind, nutz ich den Thread
doch auch gleich mal:

Ist es von Seiten Barrierefreiheit eigentlich besser divs mit float
zu verwenden, oder die divs mit position:absolute und top/left
zu platzieren ?
(ich meine so eine typische Seite: oben ein Balken quer r?ber,
dann links Men?, mitte/rechts Content und unten noch ein Balken)
--
MfG, Christian Welzel

GPG-Key: http://www.camlann.de/key.asc
Fingerprint: 4F50 19BF 3346 36A6 CFA9 DBDC C268 6D24 70A1 AD15
Peter Linzenkirchner
2006-01-18 17:36:20 UTC
Permalink
Hallo Christian
Post by Markus Bucher
Hallo,
wo wir schonmal offtopic und bei CSS sind, nutz ich den Thread
Ist es von Seiten Barrierefreiheit eigentlich besser divs mit float
zu verwenden, oder die divs mit position:absolute und top/left
zu platzieren ?
(ich meine so eine typische Seite: oben ein Balken quer r?ber,
dann links Men?, mitte/rechts Content und unten noch ein Balken)
1. Beachte die Reihenfolge im Quelltext:
Navigation - Content - rechte Spalte

2. Zoome deine Seite mal auf 200% oder noch h?her. Wenn der Content
lesbar und das Layoutraster halbwegs erhalten bleibt, ist es in Ordnung.

Gru?
Peter
--
-----------------------------------------------
Peter Linzenkirchner
Lisardo Multimedia GmbH
http://www.lisardo.biz/
Herrenbachstra?e 19, 86161 Augsburg
Tel. ++49-821-150565, Fax ++49-821-150595
-----------------------------------------------
JoH
2006-01-18 17:46:12 UTC
Permalink
Post by Peter Linzenkirchner
Post by Christian Welzel
wo wir schonmal offtopic und bei CSS sind, nutz ich den Thread
Ist es von Seiten Barrierefreiheit eigentlich besser divs mit float
zu verwenden, oder die divs mit position:absolute und top/left
zu platzieren ?
(ich meine so eine typische Seite: oben ein Balken quer r?ber,
dann links Men?, mitte/rechts Content und unten noch ein Balken)
Navigation - Content - rechte Spalte
Im Sinne der Barrierefreiheit w?rde ich im HTML Code selbst eher
folgenderma?en sortieren:

Link zur Navigation mit Accesskey anzusteuern
Content
Rechte Spalte
Navigation

Das Ganze kann dann mit CSS f?r Sehende Menschen in eine andere Reihenfolge
gebracht werden.
Auch f?r die Relevanz in Suchmaschinen kann es hilfreich sein, das Menu ans
Ende des Codes zu packen.
Post by Peter Linzenkirchner
2. Zoome deine Seite mal auf 200% oder noch h?her. Wenn der Content
lesbar und das Layoutraster halbwegs erhalten bleibt, ist es in Ordnung.
Da macht Opera uns momentan vor, wie's richtig geht: Echte Skalierung des
Screens bei gleichbleibendem Layout.
Die ?belste Nummer bringt in diesem Zusammenhang Firefox, der selbst
Schriften mit fixer Gr??e eiskalt skaliert und damit so ziemlich jedes
Layout zerschie?t.

Joey
--
Wenn man keine Ahnung hat: Einfach mal Fresse halten!
(If you have no clues: simply shut your knob sometimes!)
Dieter Nuhr, German comedian
http://www.cybercraft.de
Peter Niederlag
2006-01-18 17:55:34 UTC
Permalink
Moins,

JoH schrieb:
[...]
Post by JoH
Im Sinne der Barrierefreiheit w?rde ich im HTML Code selbst eher
Link zur Navigation mit Accesskey anzusteuern
Content
Rechte Spalte
Navigation
Warum in dieser Reihenfolge?

Das macht f?r mich nicht soviel Sinn, weil:
* die rechte (linke) Spalte oft auf meheren Seiten die gelichen Inhalte
haben und ich diese eher statische Infos (auch wegen Suchmaschienen?)
eher hinten habe
* die Navigation ziemlich wichtig ist (surf mal mit links/lynx) und es
nervt wenn man da nicht schnell drankommt.

Gru?,
Peter
--
Peter Niederlag
http://www.niekom.de * TYPO3 & EDV Dienstleistungen *
http://www.typo3partner.net * professional services network *
JoH
2006-01-18 18:07:31 UTC
Permalink
Post by Peter Niederlag
Post by JoH
Im Sinne der Barrierefreiheit w?rde ich im HTML Code selbst eher
Link zur Navigation mit Accesskey anzusteuern
Content
Rechte Spalte
Navigation
Warum in dieser Reihenfolge?
* die rechte (linke) Spalte oft auf meheren Seiten die gelichen
Inhalte haben und ich diese eher statische Infos (auch wegen
Suchmaschienen?) eher hinten habe
* die Navigation ziemlich wichtig ist (surf mal mit links/lynx) und es
nervt wenn man da nicht schnell drankommt.
Deswegen ja accesskeys - oder kann dieser Dinosaurier auch das nicht? ;-)

Du willst zum Menu? - Dr?ck CTRL-M (oder whatever)
Schneller geht's kaum.

Das wirklich wichtige ist IMHO immer der Inhalt und nie die Navigation.
La? Dir eine Seite mit insgesamt drei Ebenen an Menustruktur mal von einem
Screenreader vorlesen.
Da wirst Du sp?testens beim dritten mal wahnsinnig, speziell wenn Du kein
Zusatzmodul f?r einigerma?en nat?rliche Stimmausgabe installiert hast.
Klingt immer ein wenig nach einem Song von Kraftwerk.

OK - man k?nnte nat?rlich auch einen Accesskey nutzen, um direkt zum Inhalt
zu springen.
In der Regel sollte man aber eher beide Keys verwenden. Und von der
Priorit?t her k?me dann Inhalt immer noch vor Navi.

Einigen wir uns auf

Link zur Navigation mit Accesskey anzusteuern
Content
Link zum Content mit Accesskey anzusteuern
Navigation
Rechte Spalte

Wird aber eh zu sehr OT ...

Joey
--
Wenn man keine Ahnung hat: Einfach mal Fresse halten!
(If you have no clues: simply shut your knob sometimes!)
Dieter Nuhr, German comedian
http://www.cybercraft.de
Mike Ritter
2006-01-20 02:37:35 UTC
Permalink
Post by JoH
La? Dir eine Seite mit insgesamt drei Ebenen an Menustruktur mal von einem
Screenreader vorlesen.
Da wirst Du sp?testens beim dritten mal wahnsinnig, speziell wenn Du kein
Zusatzmodul f?r einigerma?en nat?rliche Stimmausgabe installiert hast.
Ein sch?neres Beispiel dazu: Man schaue sich mal so einen Seite auf
einem PocketPC/ oder Handy, an, da muss man nicht "behindert" sein, um
bei jeder Seite ?ber das Men? zu fluchen ;)
Post by JoH
OK - man k?nnte nat?rlich auch einen Accesskey nutzen, um direkt zum Inhalt
zu springen.
Anker ist auch ein Kompromiss, hat auch den Vorteil, dass es in
jedem(TM) Browser funktioniert.
Mike Ritter
2006-01-20 02:33:19 UTC
Permalink
Post by JoH
Die ?belste Nummer bringt in diesem Zusammenhang Firefox, der selbst
Schriften mit fixer Gr??e eiskalt skaliert und damit so ziemlich jedes
Layout zerschie?t.
Unsinn. Wozu bitte denkst Du ist eine Skalierungsfunktion da? Und nein,
nat?rlich skaliert auch Opera feste Schriftgr?ssen, der meines Wissens
einzige Browser der hier aus der Reihe tanzt, ist der Internet Explorer.
JoH
2006-01-18 17:42:03 UTC
Permalink
Post by Christian Welzel
wo wir schonmal offtopic und bei CSS sind, nutz ich den Thread
Ist es von Seiten Barrierefreiheit eigentlich besser divs mit float
zu verwenden, oder die divs mit position:absolute und top/left
zu platzieren ?
(ich meine so eine typische Seite: oben ein Balken quer r?ber,
dann links Men?, mitte/rechts Content und unten noch ein Balken)
Was hat denn das mit Barrierefreiheit zu tun?
Dadurch wird der Inhalt nicht mehr oder weniger zug?nglich.
Es ist nur bei absoluter Positionierung zu beachten, da? z.B. umschlie?ende
Container nicht mehr automatisch mitskalieren, wenn der Inhalt sich ?ndert
und Elemente ungewollte hinter anderen verschwinden k?nnen.
W?hrend float das Element nur aus dem "Flu?" des Layouts entfernt, der dann
"drumherum" flie?t, wird es mit position:absolute komplett aus dem
Zusammenhang genommen und hat keinerlei Einflu? mehr auf umgebende Elemente.
Als Faustregel mag dabei gelten:
Alles, was keine fixe Gr??e hat und ggf. die Position anderer Elemente
beeinflussen soll, sollte nicht mit absoluter Positionierung platziert
werden.

Joey
--
Wenn man keine Ahnung hat: Einfach mal Fresse halten!
(If you have no clues: simply shut your knob sometimes!)
Dieter Nuhr, German comedian
http://www.cybercraft.de
Mike Ritter
2006-01-20 02:40:07 UTC
Permalink
Post by JoH
Post by Christian Welzel
(ich meine so eine typische Seite: oben ein Balken quer r?ber,
dann links Men?, mitte/rechts Content und unten noch ein Balken)
Was hat denn das mit Barrierefreiheit zu tun?
Dadurch wird der Inhalt nicht mehr oder weniger zug?nglich.
Doch, man muss auf kleinem Viewport nicht scrollen, wenn man float
verwendet -> barrierefrei.
JoH
2006-01-20 12:36:37 UTC
Permalink
Post by Mike Ritter
Post by JoH
Post by Christian Welzel
(ich meine so eine typische Seite: oben ein Balken quer r?ber,
dann links Men?, mitte/rechts Content und unten noch ein Balken)
Was hat denn das mit Barrierefreiheit zu tun?
Dadurch wird der Inhalt nicht mehr oder weniger zug?nglich.
Doch, man muss auf kleinem Viewport nicht scrollen, wenn man float
verwendet -> barrierefrei.
Da wir es bei TYPO3 mit einem CMS zu tun haben, k?nnte man doch einfach mal
dar?ber nachdenken, was bez?glich barrierefreiheit intelligenter ist:
a) Nur einen einzigen universellen HTML/CSS Code ausgeben, der mit Hilfe von
float z.B. auf einem PocketPC grauenhaft zefleddert wird.
b) Mit Hilfe eines Seitentypen und einer Condition daf?r sorgen da? f?r
verschiedene Medien ein entsprechendes Layout geliefert wird, das speziell
f?r das jeweilige Medium erzeugt wurde.

Joey
--
Wenn man keine Ahnung hat: Einfach mal Fresse halten!
(If you have no clues: simply shut your knob sometimes!)
Dieter Nuhr, German comedian
http://www.cybercraft.de
Mike Ritter
2006-01-20 14:51:11 UTC
Permalink
Post by JoH
Post by Mike Ritter
Post by JoH
Post by Christian Welzel
(ich meine so eine typische Seite: oben ein Balken quer r?ber,
dann links Men?, mitte/rechts Content und unten noch ein Balken)
Was hat denn das mit Barrierefreiheit zu tun?
Dadurch wird der Inhalt nicht mehr oder weniger zug?nglich.
Doch, man muss auf kleinem Viewport nicht scrollen, wenn man float
verwendet -> barrierefrei.
Da wir es bei TYPO3 mit einem CMS zu tun haben, k?nnte man doch einfach mal
a) Nur einen einzigen universellen HTML/CSS Code ausgeben, der mit Hilfe von
float z.B. auf einem PocketPC grauenhaft zefleddert wird.
Intelligenter. Aus mehreren Gr?nden. 1. stimmt es nicht, dass etwas
grauenvoll zerfleddert wird, wenn man entsprechenden Code schreibt,
?berleg nur einmal, wie ein absolut positioniertes Layout auf bspw.
320x240 ausssehen k?nnte. Der Sinn von absolut positionierten Elementen
(dtp-?hnliche feste Darstellung auf dem Client) geht Dir auf so einer
Aufl?sung v?llig ab, da gibt es f?r den Browser verschiedene m?gliche
Szenarien: Das komplette Design wie vom Autor gewollt darstellen. Im
Ergebnis sieht das so aus, dass man sich dumm und dusslig scrollt lesbar
w?re da nix mehr, das schaut man sich genau eine halbe Minute an, oder
die Seite komplett skalieren, dass sie von der Breite in den Viewport
passt -> viel zu kleine Schrift/ Bilder.
Intelligent einfach auch aus dem Grund, dass man selbst den Fluss der
Seite in der Hand hat, anstatt es den Browsern zu ?berlassen, wie sie
die Seite zerrupfen.
btw empfehle ich Dir dringend, Dir das mal auf verschiedenen
Pocket-browsern anzuschauen, die Darstellung ist extrem unterschiedlich
und bei konzeptarmen Seiten f?chterlich.
Post by JoH
b) Mit Hilfe eines Seitentypen und einer Condition daf?r sorgen da? f?r
verschiedene Medien ein entsprechendes Layout geliefert wird, das speziell
f?r das jeweilige Medium erzeugt wurde.
Ja, man kann das ganze nat?rlich auch umst?ndlich gestalten, da stimme
ich Dir zu, bei durchdachtem Code aber reicht es der Seite einfach ein
anderes Stylesheet mitzugeben.
JoH
2006-01-20 16:12:59 UTC
Permalink
Post by Mike Ritter
Post by JoH
b) Mit Hilfe eines Seitentypen und einer Condition daf?r sorgen da?
f?r verschiedene Medien ein entsprechendes Layout geliefert wird,
das speziell f?r das jeweilige Medium erzeugt wurde.
Ja, man kann das ganze nat?rlich auch umst?ndlich gestalten, da stimme
ich Dir zu, bei durchdachtem Code aber reicht es der Seite einfach ein
anderes Stylesheet mitzugeben.
Falsch. Bei durchdachtem Konzept lasse ich ggf. Elemente, die nur der
Gestaltung dienen komplett weg und zwar schon im HTML-Code. Bilder werden
mit Hilfe von Imagemagick von vornherein kleiner erzeugt, damit sie den
Rahmen des Mediums nicht sprengen. Alles in allem deutlich weniger Traffic,
was bei PocketPCs, die ?ber teure Funknetze im Web sind erheblich Kosten
spart, und ... und ... und

Genau das ist doch der eigentliche Sinn von Content _Management_ und
dynamisch generierten Seiten: Sich der Situation jederzeit anpassen zu
k?nnen und exakt das zu liefern, was der Benutzer ben?tigt. Nicht mehr und
nicht weniger.
Diese sogenannten Liquid-Layouts mit verschiedenen Stylesheets m?gen zwar
momentan hip und technisch gesehen geschickt gel?st sein, aber wirklich
sinnvoll sind sie eher nicht. Es gibt schlie?lich nicht nur Pocket PCs
sondern auch rein textbasierte WAP-Handies und sonstige Nettigkeiten. Das
willst Du alles ?ber Stylesheets l?sen? - Viel Spa? dabei!

Joey
--
Wenn man keine Ahnung hat: Einfach mal Fresse halten!
(If you have no clues: simply shut your knob sometimes!)
Dieter Nuhr, German comedian
http://www.cybercraft.de
Mike Ritter
2006-01-20 18:03:48 UTC
Permalink
*snip*
Richtig.
Loading...