seltsame Ausrichtung des Inhalts

[NUeB]

Hallo miteinander,

auf meiner Web-Site http://nueb.net/ habe ich kürzlich im Menü-Bereich (div id="mainmenu") zwei Banner eingebaut.

Nun fiel mir auf, daß seitdem der Seiteninhalt (div id="page") einer Seite (http://nueb.net/etc/dreckfelher/) auseinander gerissen wird ... ohne die Banner werden die beiden Schraibfelher Beispiele korrekt untereinander dargestellt (s. http://test.nueb.net/etc/dreckfelher/) -- mit den Bannern erscheint das zweite ("Snikers / Durstlöcher") viel zu weit unten, wie am unteren Ende des Menübereichs ausgerichtet.

Der Effekt tritt unabhängig von Betriebssystem (Linux / Win XP) und Browser (diverse) auf, der W3C Validator hat an den Seiten auch nichts auszusetzen ... und ich bin mit meinem Latein am Ende ... wer weiss Rat?

Danke vorab,
Marcus

[Encoder]

mit den Bannern

Ist das was man da sieht noch mit den Bannern?

erscheint das zweite ("Snikers / Durstlöcher") viel zu weit unten, wie am unteren Ende des Menübereichs ausgerichtet.

bei mir nämlich nicht.

Da wären Screenshots hilfreich, wie es bei dir mit und ohne aussieht.

[NUeB]

mit den Bannern
Ist das was man da sieht noch mit den Bannern?

http://nueb.net/etc/dreckfelher/ -- aktuelle Version mit Bannern
http://test.nueb.net/etc/dreckfelher/ -- alte Version ohne

erscheint das zweite ("Snikers / Durstlöcher") viel zu weit unten, wie am unteren Ende des Menübereichs ausgerichtet.
bei mir nämlich nicht.

Da wären Screenshots hilfreich, wie es bei dir mit und ohne aussieht.

Erstaunlich ... Screenshots gibt es hier:

http://tmp.nueb.net/30d/screenshot_linux_mit_Banner.jpg
http://tmp.nueb.net/30d/screenshot_linux_ohne_Banner.jpg
http://tmp.nueb.net/30d/screenshot_iexplore.jpg

Betriebssysteme sind ubuntu 12.04 LTS und Windows XP SP3, allesamt auf aktuellem Softwarestand.

• Marcus

[molily]

Hallo,

Deine Menüspalte hat float: left und in der Hauptspalte verwendest du <div class="clr"></div> mit clear: both. Das Clearing sorgt dafür, dass dieses Element und alle folgenden Elemente in der Spalte unterhalb des Menüs positioniert werden. So funktioniert die clear-Eigenschaft.

Du willst hier vermutlich, dass clear sich nur lokal auf Floats innerhalb der Hauptspalte auswirkt und nicht auf die floatende Menüspalte. Das kannst du erreichen, indem du die Hauptspalte zu einem »Block Formatting Context« macht. Dann wirkt sich das clear nämlich nur auf diesen Kontext aus, nicht darüber hinaus.

Es gibt verschiedene Möglichkeiten, das zu erreichen. Eine ist, die Hauptspalte ebenfalls floaten zu lassen. Oder ihr display: table zu geben. In diesen beiden Fällen muss eine Breitenangabe vergeben werden. Eine weitere Möglichkeit ist overflow: auto oder overflow: hidden. Das ist sehr einfach, kann aber unerwünschte Nebenwirkungen haben.

Hintergrund:
http://blog.selfhtml.org/2006/01/31/css-spaltenlayout/#float-verschachteln
http://blog.selfhtml.org/2006/01/31/css-spaltenlayout/#wunderwaffe-overflow
http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/
http://www.youtube.com/watch?v=8YtQwv1cUVs

Grüße,
Mathias

[NUeB]

Hallo Mathias,

Deine Menüspalte hat float: left und in der Hauptspalte verwendest du <div class="clr"></div> mit clear: both. Das Clearing sorgt dafür, dass dieses Element und alle folgenden Elemente in der Spalte unterhalb des Menüs positioniert werden. So funktioniert die clear-Eigenschaft.

Ah! Das <div class="clr"> habe ich so von Highslide JS (Galeriefunktion) übernommen, ohne je groß über die Auswirkungen nachgedacht zu habem ...

Du willst hier vermutlich, dass clear sich nur lokal auf Floats innerhalb der Hauptspalte auswirkt und nicht auf die floatende Menüspalte. Das kannst du erreichen, indem du die Hauptspalte zu einem »Block Formatting Context« macht. Dann wirkt sich das clear nämlich nur auf diesen Kontext aus, nicht darüber hinaus.

Meine Absicht hast Du absolut korrekt erkannt. :-)

Es gibt verschiedene Möglichkeiten, das zu erreichen. Eine ist, die Hauptspalte ebenfalls floaten zu lassen. Oder ihr display: table zu geben. In diesen beiden Fällen muss eine Breitenangabe vergeben werden. Eine weitere Möglichkeit ist overflow: auto oder overflow: hidden. Das ist sehr einfach, kann aber unerwünschte Nebenwirkungen haben.

Ich habe gerade ein bisschen damit herumexperimentiert: mit floaten der Hauptspalte oder display:table komme ich nicht zum Ergebnis; zumindest nicht, wenn ich die width "relativ" (also z. B. 100%) angebe ... absolute Breitenangaben mag ich nicht, denn die Seiten sollen unabhängig vom Ausgabegerät möglichst gut aussehen. Mit diesen beiden Methoden habe ich es (zumindest auf die Schnelle) nicht geschafft, daß die Hauptspalte wieder die maximale Breite vom Menü links bis zum Seitenrand rechts einnimmt.

Mit overflow:hidden sieht's wieder aus wie gewünscht ...
http://nueb.net/etc/dreckfelher/
bzw als Scrrenshot: http://tmp.nueb.net/30d/screenshot_overflow-hidden.jpg

Nebenwirkungen konnte ich hier mit meinen Test-Browsern keine beobachten.

Hintergrund:
http://blog.selfhtml.org/2006/01/31/css-spaltenlayout/#float-verschachteln
http://blog.selfhtml.org/2006/01/31/css-spaltenlayout/#wunderwaffe-overflow
http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/
http://www.youtube.com/watch?v=8YtQwv1cUVs

So ganz klar sind mir die Zusammenhänge zwar noch nicht, aber vielen Dank für die Links, ich werde das später noch mal vertiefen ...

Danke,
Marcus

[NUeB]

Mit overflow:hidden sieht's wieder aus wie gewünscht ...
http://nueb.net/etc/dreckfelher/
bzw als Scrrenshot: http://tmp.nueb.net/30d/screenshot_overflow-hidden.jpg

Nebenwirkungen konnte ich hier mit meinen Test-Browsern keine beobachten.

Klarer Fall von "denkste!" ... :-/ auf dem Android-eigenen Browsers meines Smartphones (HTC Sensation) wird die Hauptspalte nun zu schmal dargestellt:
http://tmp.nueb.net/30d/screenshot_android.png
(der rechte Rand des helleren Hauptspalte müsste um den eingezeichneten roten Pfeil weiter nach rechts)

• Marcus