Hallo Steffen
ohne die Installation zu sehen, kann man da allenfalls raten. Allerdings kann
man aus dem Text schon ein paar Fehler ableiten.
- Inhalts-div
-> enthält 3 Spalten (Navigation = left: feste Breite, floating links; middle:
floating rechts; right: feste Breite, floating rechts)
das riecht nach einem Problem. Wenn du alle drei floaten lässt, brauchen auch
alle drei feste Breiten. Wenn die mittlere Spalte eine flexible Breite haben
soll, darf sie nicht floaten.
- je Spalte ein separater div für den eigentlichen Inhalt (Ziel: separate
Größendefinitionen und Vervielfältigungsmöglichkeit innerhalb der Spalte)
-> jeweils per CSS "width=100%;
- Footer: floating rechts, width: 100%; separater div für Inhalt (width: 100%)
Spätestens jetzt muss es auseinanderbrechen. Der Footer darf nicht floaten und
muss ausserdem die Floats der Inhaltsspalten beenden. Er braucht also entweder
ein clear:both oder du musst auf andere Art clearen. Schau dir mal das Clearing
von floats genauer an.
Im Wesentlichen funktioniert das bereits, allerdings haben sich einige Probleme
ergeben:
Klar ... Diese Probleme sind aber grundlegender Art.
1) die Fußzeile macht nicht, was sie soll
-> setze ich statt relativer eine absolute Positionierung (position: absolute),
das position:absolute nimmt den Container komplett aus dem Seitenfluss - das
Ergebnis kann ich mir vostellen ... vagabundieren passt wahrscheinlich ganz
gut. Das geht nicht.
vagabundiert der Footer quer durchs Bild - je nachdem, was alles absolut steht,
sitzt er mal oben und mal mittendrin - hält sich also nicht an seine Position
nach dem Inhalts-div, sondern scheint sich eher an der letzten relativ
positionierten Spalte zu orientieren
2) in der Analyse mit Firefox steht laut Code alles an der richtigen Stelle,
aber der Bildschirm zeigt was Anderes an
Logisch, weil das CSS die Position bestimmt und nicht das HTML.
-> die hellen Stellen in der Anzeige ergeben, dass weder der page-content noch
der Inhalts-div all das beinhalten, was drin sein sollte...aber wieso stimmt dann
im Code alles ?! *confused*
3) gebe ich Allem ein "position: relative",
Das ist wieder für was anderes gedacht, man kann damit Container innerhalb des
Seitenflusses relativ verschieben und es dazu benutzen, enthaltende Container
mit position:absolute relativ zum übergeordneten Container und nicht reltiv zum
Fenster zu positionieren. Es ist damit nicht möglich, kaputte floats zu
korrigieren.
- Floats müssen Breiten bekommen sonst fallen sie auf die Breite des Inhalts
zusammen. Oder auf 0, wenn nichts drin ist.
- Floats müssen beendet werden sonst wirken sie ad infinitum. Das passiert über
das sog. Clearing.
- nicht floatende Container breiten sich immer auf 100% aus, brauchen also nur
eine Breite, wenn sie kleiner sein sollen.
- Container, die Floats enthalten, fallen auf eine Höhe von 0 zusammen und die
Floats ragen unten raus. Man kann das umgehen, indem man dem Container z. B.
ein overflow:hidden geben (nicht ganz optimal, leider) oder ihn anders clearen.
passt es optisch, aber die Mittelspalte nutzt nicht den vollen Platz bzw tut
dies nur bei 800*600er-Auflösung (zufällig die richtige Gesamtbreite dafür
*lach*)
-> Prozentangaben für die Breite des Mittelspalten-div's:
kann nicht gehen. Entweder alle drei Spalten haben Prozentwerte, die sich
insgesamt zu 100% ergänzen, oder die flexible Spalte darf nicht floaten.
äusserer Container: feste Breite in Pixel, margin: 0 auto;
- innerer container für die Floats: overflow:hidden (= einfachstes Clearing der
Floats)
- - linke Spalte: float left; feste Breite
- - rechte Spalte: float: right, feste Breite
- - mittlere Spalte: kein float; keine Breite: margin-left: Breite der linken
Spalte; margin-right: Breite der rechten Spalte
(mittlere Spalte = letzte Spalte im HTML, sonst gehts nicht)
- ende innerer Container
- Footer: kein Float. Damit auch keine Breitenangabe.
Ende äusserer Container.
=> das ist keine optimale Anordnung, aber eine, die erst mal funktioniert.
Mehr und eleganter: siehe YAML und vor allem die Doku dazu. Oder andere Quellen zu
CSS und Floats.
Gruß
Peter
--
Xing: http://www.xing.com/profile/Peter_Linzenkirchner
Web: http://www.typo3-lisardo.de
Facebook: http://tinyurl.com/lisardo-multimedia
