|
|||
Layoutumsetzung
Hallo,
ich arbeite derzeit an der Umsetzung eines Layouts. Ich hab einmal grob das Design nachgebildet: So. die Hellgrauen Bereiche oben und unten sind jeweils 2 Hintergrundgrafiken, die unabhängig von der Seitenlänge oben und unten dargestellt werden sollen. Die dunkelgrauen Bereiche sind Inhalts-Bereiche. Die beiden oberen (Header + Menü) und der ganz unten (Footer) sollen dabei eine feste Position haben (die unten ganz unten am seitenrand) Die zweispaltigen Bereiche stellen Boxen dar, in denen der Inhalt dargestellt werden soll. Abhängig von der Länge soll der Footer mit dem unteren Hintergrund nach unten rutschen, so dass beide immer am unteren Seitenrand sind. Zuerst habe ich die beiden Hintergrundgrafiken in jeweils ein div gesetzt und diese über position: absolute oben und unten am seitenrand positioniert. Der Header, das Menü und den footer setzte ich ebenfalls je in einem div und positionierte sie absolut. Die Inhalte setzte ich in einen div pro Spalte und positionierte diese auch. Anschaulich dargestellt so: Jede Farbe entspricht dabei einem div. Das klappte auch ganz gut, aber als ich dann den Inhaltsbereich so groß hatte, dass das Browserfenster nicht mehr ausreichte, bemerkte ich, dass der Inhalt über den Footer drüberging, das Browserfenster dadurch zwar verlängerte, aber sowohl Footer als auch Hintergrund da blieben wo sie waren. Nun hatte ich die Idee, die Hintergrundbilder in den body und/oder html Tag per css zu setzen. Dabei hab ich dann auch gelernt, dass sowohl body als auch html Tag bei festgesetzter Höhe (height: 100%) auch so bleiben, wenn die Seite über 100% hinausgeht. Also hab ich min-height: 100% benutzt, damit der untere Hintergrund auch wirklich unten bleibt. Allerdings ist das sicherlich auch ein Problem für IE6, ich suche also noch nach einer Alternative. Ich bin mir auch noch weiterhin nicht sicher, wie ich das Layout am besten umsetzen soll. Vor allem, dass der Footer bei wenig Inhalt trotzdem am unteren Rand des Browserfensters ist, und bei viel Inhalt unter dem Inhalt ist. Ich hab mir überlegt, den Inhalt mit dem Footer in einen zusätzlichen Div zu packen (absolut positioniert), die divs innerhalb dieses containers allerdings im normalen Textfluss zu lassen. Dazu folgende Grafik (grün ist der container): Doch weiß ich nicht, wie es mir dann gelingt, den Footer trotzdem an der unteren Seite zu positionieren. Und auch mit dem "min-height: 100%" bei der unteren Hintergrundgrafik bin ich noch nicht zufrieden. Habt ihr einen Lösungsansatz? |
Sponsored Links |
|
|||
Hi poke,
du hast dir sehr große Mühe gemacht, Hut ab! Habe eine ganze Weile hin und her überlegt, wie man dein Problem angehen kann. Bin gerade auch bei der Vertiefung meiner Kenntnisse im Kochen von div-Suppen, nein, das Gegenteil natürlich Ich möchte mal etwas zitieren, was ich neulich gelesen habe: Zitat:
Mal zu deinem Layout: Ich würde die divs rot, blau und gelb im normalen Fluss lassen. Auch den Footer lass doch wie die anderen einfach im Fluss und nimm doch hier mal kein div, sondern ein simples mit css formatiertes p, wäre doch mal besonders semantisch ... Wenn ich jetzt deine Erwartungen nicht erfüllt haben sollte, dann ... versuch` ich`s wieder! |
Sponsored Links |
|
|||
hm, danke erstmal für die Antwort ^^
Ich hab in der Zwischzeit fleißig gegoogelt und zu meinem footer problem ein paar links gefunden: 29 Manuel Bieh – xhtml, css, webdesign … 22 » Einmal Erdgeschoss bitte! 198 The Man in Blue > footerStickAlt: A more robust method of positioning a footer footerStick › CSS › Learn › solarDreamStudios bin grad dabei, die dortigen Informationen in meinem Design umzusetzen und dann mal gucken obs klappt ^^ Dein Vorschlag alles im Fluss zu lassen kann ich nur teilweise zustimmen. Ich möchte ja schließlich auch, dass wenn der Inhalt so kurz ist, dass nicht das ganze Fenster ausgefüllt wird, der Footer trotzdem unten kleben bleibt ^^ (deswegen auch die links) Und der Footer als <p> tag wär nicht so schön, weil der p tag ja ansich schon einige Paragraphen-Eigenschaften mit sich bringt, die der div von vornerein nicht hat (margin z.B.). Außerdem ist der footer eher grafisch, so dass sich ein div eher eignet als ein p |
|
|||
Zitat:
Aber auch ein <p> oder <h> lässt sich als Blockelement entsprechend stylen... Finde übrigens deine Links sehr aufschussreich. Für welche Variante hast du dich denn entschieden? |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Layoutumsetzung in CSS | Lithrasil | CSS | 2 | 13.10.2006 21:27 |
probleme bei layoutumsetzung von table nach div | docstevie | CSS | 19 | 07.02.2005 13:30 |