[CoronaLemon]

Hallo,

ich hab ein kleines Problem beim Floaten. Ich habe einen Content DIV und darunter einen Footer DIV.

Der Content div enthält wiederum 5 DIVs, welche nebeneinander dargestellt werden sollen. Ich habe jedem der 5 DIVs ein float:left verpasst und nun werden sie auch schön brav nebeneinander dargestellt.

Der Footer div besitzt zwei weitere DIVs, wobei einer links gefloatet wird und der andere rechts - wird auch wunderbar dargestellt.

Wenn ich das Browserfenster nun zusammenschiebe, dann werden die Content DIVs von dem Hintergrundbild meines Footers überlagert - der Text des Footers wird brav nach dem Content angezeigt. Wie kann das sein? Habe versucht, dem Footer ein clear:left zu verpassen, aber auch das hat nichts geholfen.


Ansehen kann man sich das Ganze auf dieser Website

Für Vorschläge wie ich meinen Code verbessern kann, bin ich übrigens immer dankbar!

Danke und LG

Philipp

[fricca]

Cleare innerhalb von #nonFooter. Ein hr-Element eignet sich.

[CoronaLemon]

Danke für die schnelle Antwort!

Hätte am Ende von #nonFooter noch ein hr Element (mit clear) eingebaut, aber leider hat auch das nicht geholfen.

EDIT // Ich habe gerade gemerkt, dass Sie die Autorin von dem CSS-Techniken Buch sind, welches ich mir heute Mittag bei Amazon bestellt habe. *grins*

[fricca]

Das hilft ganz sicher!

[CoronaLemon]

Gut, dann mach ich wohl etwas falsch.

Hätte vor dem </div> von #nonFooter folgendes eingepflanzt:

<hr id="clearAfter"/>

Weiters: #clearAfter { clear: left; }

Wie wird hr eigentlich behandelt? Als Inline- oder Blockelement?


EDIT// Mit einem DIV hat es auf Anhieb geklappt, vielen Dank für die schnelle Hilfe!

[fricca]

Zeig doch her, was du machst.

Das Clear sorgt dafür, dass nonFooter die Floats einschließt. Bei dir beginnt der Footer immer bei 100%.
Es ändert aber nichts daran, dass du Platz für die negative Verschiebung schaffen musst.
The Man in Blue > footerStickAlt: A more robust method of positioning a footer

For the case where the Web page content is larger than the browser window, the footer will be positioned naturally below the content, then brought up by the margin. For this scenario you should provide a bit of space at the bottom of your content which the footer can rise into without covering anything. This can be done with a bit of padding or margin on your content, as you can see in the CSS above.

Das hr-Elemnent kann auch eine Höhe bekommen.

[CoronaLemon]

Klingt einleuchtend und funktioniert wunderbar, danke!

[fricca]

Zitat von CoronaLemon

EDIT // Ich habe gerade gemerkt, dass Sie die Autorin von dem CSS-Techniken Buch sind, welches ich mir heute Mittag bei Amazon bestellt habe.

Huch, das seh ich ja jetzt erst.
Das freut mich natürlich -- aber du darfst trotzdem beim Du bleiben.
Viel Spaß mit dem Buch; den FooterStickAlt behandeln wir auch ...

[CoronaLemon]

UPDATE ...

So, habe heute wieder an der Website gearbeitet und habe bemerkt, dass ich Opfer vom "double margin bug" im IE wurde. Bei den 3 DIVs im #content DIV wurden die margin-Werte im IE verdoppelt, konnte das jedoch durch "display: inline" wieder beheben.

Nun habe ich aber 3 weitere Probleme.

#content (welcher 3 Spalten beinhaltet), hat als Hintergrundbild die beiden strichlierten Trennlinien. Da ich die 3 DIVs im Inneren nun mit display:inline versehen habe, schiebt sich im IE das Hintergrundbild unter die drei Spalten.

Außerdem wird die rechte Spalte nun ein Stück weiter nach unten verschoben. Hier zwei Screenshots zum Vergleichen:

Safari, FF, Opera Ansicht (gewünscht) // IE6 Ansicht (böse!)

Was kann ich dagegen tun?
Vielleicht wird sich jemand fragen, warum der #content das Hintergrundbild übernimmt. Anfangs wollte ich die strichlierten Linien als Hintergrund in ein DIV packen, welches sich zwischen den 3 Spalten befindet. Leider hat das nicht geklappt, da die Linie / DIV nicht länger wurde.
So habe ich eben die zwei Linien in ein Bild zusammengefasst und sie dem #content als HGB verpasst ... klappt ja eigentlich ganz gut - nur leider nicht im IE.

Ein weiteres Problem was ich mir ÜBERHAUPT nicht erklären kann, sind die zwei, falsch dargestellten Links im Footer. Die Links im Footer wurden einer Klasse zugeordnet, aber die zwei Links auf der Rechten Seite nehmen diese wohl nicht an.

Bin für jeden Tip dankbar!

LG und schönes WE,

Philipp

[fricca]

Zitat von CoronaLemon

#content (welcher 3 Spalten beinhaltet), hat als Hintergrundbild die beiden strichlierten Trennlinien. Da ich die 3 DIVs im Inneren nun mit display:inline versehen habe, schiebt sich im IE das Hintergrundbild unter die drei Spalten.

Der Hintergrundbild wird nur nicht vollständig dargestellt. #content braucht hasLayout.

Außerdem wird die rechte Spalte nun ein Stück weiter nach unten verschoben.

Entferne die komischen "columnBuffer".

Vielleicht wird sich jemand fragen, warum der #content das Hintergrundbild übernimmt.

Nein, das fragt man sich nicht. Das ist ein übliches Vorgehen und trägt den Namen Faux Columns.

Anfangs wollte ich die strichlierten Linien als Hintergrund in ein DIV packen, welches sich zwischen den 3 Spalten befindet.

Das wäre fragwürdig.

Ein weiteres Problem was ich mir ÜBERHAUPT nicht erklären kann, sind die zwei, falsch dargestellten Links im Footer. Die Links im Footer wurden einer Klasse zugeordnet, aber die zwei Links auf der Rechten Seite nehmen diese wohl nicht an.

"Falsch dargestellt" soll vermutlich bedeuten, dass das Hintergrundbild im IE 6 nicht sichtbar ist. (Bitte bemüh dich um verständliche Fehlerbeschreibungen! Und nenn auch die IE-Versionen, von denen du sprichst. "Der IE" kann seit gestern sogar IE8 sein. edit: Ich sehe gerade, dass dein Screenshot beschriftet ist. Ich nehme alles zurück -- wobei eine Erwähnung trotzdem nicht schlecht wäre.).
Auch dagegen hilft vermutlich hasLayout.