zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Layoutumsetzung

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.04.2007, 17:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.04.2007
Beiträge: 10
poke befindet sich auf einem aufstrebenden Ast
Standard 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?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.04.2007, 22:53
Rettet das Internet!
neuer user
 
Registriert seit: 28.04.2007
Beiträge: 5
knispel befindet sich auf einem aufstrebenden Ast
Standard

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:
Nun kann man mit CSS jedes Element verschieben, einrahmen, mit Farbe verschönern, Schriften individuell zuweisen oder mit Farbflächen oder Bildern hinterlegen. Bei der Verwendung von CSS wird oft vergessen, dass man keine zusätzlichen <div>s oder <span>s zum Designen braucht, sondern jedem HTML-Tag (zum Beispiel <p>, <em>, <li>, <a>) Styles zuweisen kann.

<div>s sind für Grobstrukturen da: Kopf, Fuss, Hauptteil, Randspalte. Alles weitere kann meist direkt über <p>s, <ul>s oder <dl>s gestylt werden.

Viele tabellenlose Websites in validem XHTML, sind nicht immer semantisch gecodet – also schlank und sinnhaft. Unnötige und unsemantische <div>s in Kombination mit <span>s werden oft zu Design-Zwecken verschachtelt, wie vorher <table>s, <tr>s und <td>s.
Mir fielen ja echt die Schuppen aus den Augen!

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!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.04.2007, 23:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.04.2007
Beiträge: 10
poke befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 29.04.2007, 10:20
Rettet das Internet!
neuer user
 
Registriert seit: 28.04.2007
Beiträge: 5
knispel befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
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
Ok, deine Meinung.

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?
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:47 Uhr.