|
|||
Gelöst: Hintergrund ignoriert clear - *update*
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 Geändert von CoronaLemon (20.03.2009 um 15:05 Uhr) Grund: update |
Sponsored Links |
|
|||
Cleare innerhalb von #nonFooter. Ein hr-Element eignet sich.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
|
|||
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*
__________________
Make websites, not war! |
|
|||
Das hilft ganz sicher!
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
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!
__________________
Make websites, not war! Geändert von CoronaLemon (16.03.2009 um 18:10 Uhr) |
|
|||
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 Zitat:
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Zitat:
Das freut mich natürlich -- aber du darfst trotzdem beim Du bleiben. Viel Spaß mit dem Buch; den FooterStickAlt behandeln wir auch ...
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
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
__________________
Make websites, not war! |
Sponsored Links |
|
|||||
Zitat:
Zitat:
Zitat:
Zitat:
Zitat:
Auch dagegen hilft vermutlich hasLayout.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken Geändert von fricca (20.03.2009 um 15:31 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Layoutcheck + Including | crimi | Site- und Layoutcheck | 8 | 27.09.2008 21:08 |
So langsam bekomme ich die Krise mit den DIVs | Thuroc | CSS | 12 | 12.11.2007 14:25 |
Div Orientierung | Leonidus | CSS | 22 | 30.05.2007 17:05 |
Float und Clear ändern sich durch Hintergrund?!? | samderhobbit | CSS | 8 | 04.04.2007 14:03 |