Layerpositionierung mit float

[Elya]

Hallo Forum,
bin gerade etwas ratlos und vor allem z.Zt. nur mit Mac OS X unterwegs, deshalb meine Bitte, mal mit Windows-Browsern oder Opera Mac OSX hier drauf zu schauen:

http://www.visuelya.net/neu/index.html
http://www.visuelya.net/neu/style/styles.css

Mein Mozilla 1.0 RC3 und Safari stellen die so dar wie es gedacht war:
links eine Navilayer mit float:left; (roter Rand)
oben eine Titellayer mit float:right; (grün)
darunter 1 Inhaltslayer, ebenfalls float:left;(blau) (left weil da rechts noch ein Layer hinkommt)

Was ich heute morgen unter Windows gesehen habe (Mozilla 1.3) war in etwas das gleiche wie Opera 6 (Mac OSX) anzeigt:
Navileiste hat Abstand zum Außenrand trotz body margin:0;
Bei Opera liegt der Inhaltslayer noch dazu unter der Navileiste (auch wenn ich float:right; angebe, dann zwar ganz rechts, aber trotzdem ganz unten)

Valide ist das ganze mehr oder weniger, deshalb verwirrt mich die unterschiedliche Darstellung etwas. Ich hab auch schon relative Positionierung des Navilayers y mit 0px versucht, kein Effekt.

Hat jemand einen Tipp für mich? Auf Wunsch gibt's auch einen Screenshot.
Danke!

Schöne Grüße aus Köln-Ehrenfeld,
Elya

[nag]

hi

Auf Wunsch gibt's auch einen Screenshot.

ich geb DIR mal 2 screenshots (system: windows). die fehler traten auf, wenn man das anzeigefenster in horizontaler richtung verkleinert.

IE 6
<img src="http://www.stud.uni-giessen.de/~su6690/test/bild2.gif" border="0" alt="">

und Netscape 7.02
<img src="http://www.stud.uni-giessen.de/~su6690/test/bild1.gif" border="0" alt="">

Valide ist das ganze mehr oder weniger

mehr oder weniger reicht nicht...

Tipp

http://www.stichpunkt.de/css/bereiche.html
http://www.css4you.pehlgrim.de/wslayout1/index.php

und die selfhtml-dokumentation natürlich!
mfg NAG

[Elya]

Hallo nag,

Valide ist das ganze mehr oder weniger

mehr oder weniger reicht nicht...

War natürlich bescheiden untertrieben - natürlich ist das Doc valide! Anders würde ich mich mit einer eigenen Seite hier gar nicht mehr hintrauen... ;-)

Schöne Grüße aus Köln-Ehrenfeld,

Elya

[nag]

hallo.

hätte ich fast vergesse ...

nan spitzen link
http://css.fractatulum.net/beispiele.htm

mfg sagt NAG de hesse

[Elya]

Hallo Forum,

danke! ich hab mir auch schon ein paar in die Richtung angeschaut (glish, meyerweb), aber beim klappt's die "Energie des Verstehens" wirklich nur durch Üben, üben, üben, deshalb auch diese Fingerübung.

Schöne Grüße aus Köln-Ehrenfeld,

Elya

[Joachim]

Hi,

ich kann am Mozilla 1.4 / Pc (und am IE 6) _keinen_ Randabstand der Navi links/oben feststellen. Auf Wunsch schicke ich Dir einen Screenshot.

Schöne Grüße aus Köln-Ehrenfeld,

Gruesse von der Raderthal-Fraktion im Muenchener Exil ;-)

Joachim

[Elya]

Hallo Joachim,

danke, dann ist ja alles gar nicht so schlimm wie ich dachte, nur Opera 6 zickt etwas...

Schöne Grüße aus Köln-Ehrenfeld,

Elya

[molily]

Hallo Elya,

Was ich heute morgen unter Windows gesehen habe (Mozilla 1.3) war in etwas das gleiche wie Opera 6 (Mac OSX) anzeigt:
Navileiste hat Abstand zum Außenrand trotz body margin:0;

Setze padding auch auf 0.

Bei Opera liegt der Inhaltslayer noch dazu unter der Navileiste (auch wenn ich float:right; angebe, dann zwar ganz rechts, aber trotzdem ganz unten)

Hm, tatsächlich (Opera 6.06/Win). Opera 7.11/Win macht es hingegen richtig.

Mir fällt nur ein, #content anstatt mit float mit margin-left:22% o.ä. in die richtige Position zu bringen. Da sowieso zwangsweise alles nebeneinanderliegt, ist es nicht schlimm, dass dadurch das mögliche Verschieben untereinander bei sehr kleinen Fensterbreiten und Vergrößerungen verhindert wird.

Grüße,
Mathias

[Elya]

Hallo Mathias,
Danke, das probier ich heute abend gleich mal aus.

Schöne Grüße aus Köln-Ehrenfeld,

Elya

[molily]

Zusätzlich:

Die Klassen navi und main brauchst du vermutlich nicht, du kannst mit Nachkommensselektoren arbeiten, also #left a, #left a:link usw.

Das Bild in #title kannst du mit text-align:right anstatt mit float ausrichten (hatte die Verwendung von float einen bestimmten Grund?).

Trenne die span-Elemente in den Navigations-Links mit einem Leerzeichen ab:
<a href="#">sinn_verwandt <span>Ausgewähltes aus meinen Bookmarks. Tools, Tipps, Lieblingsseiten</span></a>
Sonst klebt das erste Wort jeweils am Linktext (»sinn_verwandtAusgewähltes«), wenn keine Styles interpretiert werden.

Lass die Breite für #left a:hover span weg, die Prozentangabe bezieht sich auf das Elternelement a und somit wird der Text extrem schmal angezeigt (Opera7, IE6).
Hm, achso, Gecko braucht die Angabe... mit width:inherit geht es anscheinend.

Grüße,
Mathias

[Elya]

Hallo Matthias,

vielen Dank für die ausführliche Beschäftigung mit der Seite! Hier mal die Zusammenfassung Deiner Tipps:

Setze padding auch auf 0.

das klappt - hätte ich ja auch selbst drauf kommen können... ;-)

Mir fällt nur ein, #content anstatt mit float mit margin-left:22% o.ä. in die richtige Position zu bringen.

das klappt leider nicht. Bei meinem Opera 6 steht der Layer zwar an der richtigen horizontalen Position, aber weiterhin unten, unterhalb des Navi-Layers.

»Die Klassen navi und main brauchst du vermutlich nicht, du kannst mit Nachkommensselektoren arbeiten, also #left a, #left a:link usw.
da fliegt mir aber einiges um die Ohren mit der span-Konstruktion. Ich experimentiere aber mal weiter mit den Selektoren

»Das Bild in #title kannst du mit text-align:right anstatt mit float ausrichten (hatte die Verwendung von float einen bestimmten Grund?).
das klappt. weiß auch nicht, war vermutlich im "float"-Rausch ;-)

»Trenne die span-Elemente in den Navigations-Links mit einem Leerzeichen ab:
guter Tipp. schon umgesetzt.

»Lass die Breite für #left a:hover span weg, die Prozentangabe bezieht sich auf das Elternelement a und somit wird der Text extrem schmal angezeigt (Opera7, IE6).
Hm, achso, Gecko braucht die Angabe... mit width:inherit geht es anscheinend.
das schmale hab ich gesehen, aber width:inherit ignoriert wiederum Safari...

<seufz>Von wegen DOM-Browser</seufz>

Mal sehen, ob ich nochmal das Konzept überdenke oder mich zum Ignorieren weiterer Browser entschließe oder noch ein paar Workarounds bastele...

Nochmal danke!

Schöne Grüße aus Köln-Ehrenfeld,

Elya