Tipp für Umsetzung eines Layouts

[Raynaldo]

Hallo,

ich habe eine Layout-Vorgabe bekommen und versuche die nun 1:1 umzusetzen. Eigentlich habe ich es auch schon geschafft/fertig, würde aber gerne noch Meinungen einholen, ob ihr das auch so umsetzen würdet oder ob es einfachere/bessere Wege gibt.

Hier das Layout:

http://www.ray.mynetcologne.de/screen.jpg

Anmerkungen:
- oben in den blauen Balken kommt das Hauptmenü
- der Inhaltsbereich ist der weiße Kasten mit Schatten und Rahmen
- unten unter dem Inhaltsbereich im grünen Bereich kommen noch Punkte wie Impressum, Copyright etc.

Ich habe das umgesetzt (noch nicht in Contao), in dem ich den grünen Bereich mit einem Stück Inhaltsbereich als Hintergrundgrafik in einen (DIV) "footer" lade ( http://www.ray.mynetcologne.de/hg_1.jpg ). Den Inhaltsbereich setze ich dann mit einem Rand von links (margin-left bis er bündig mit dem weißen Feld der Hintergrundgrafik ist) und formatiere ihn per CSS3 mit Schatten, runden Ecken und Rahmen.

Sieht eigentlich in allen Browsern gut aus, aber dieses Pixelweise verschieben bis es passt, könnte vielleicht auch Probleme verursachen. Zudem bleibt natürlich der untere weiße Bereich, der in den grünen Bereich hereinragt immer leer (außer ich schreibe was in den DIV "footer".

Vielleicht hat jemand eine andere Idee wie man das umsetzen könnte? Oder vielleicht ist auch die einhellige Meinung, dass das schon ok ist, wie ich das gemacht habe...

Viele Dank schon mal für Anregungen.

Viele Grüße
Raynaldo

[Kayzu]

Also ich würde für den Footer eine komplette Hintergrundgrafik verwenden mit der breite des ganzen DIV welches Du in "#footer .inside" legst.
Dann eine 1-2px breite Grafik und hühe des grünen Bereichs für den restlichen BG welches Du in "#footer" legst.

#footer .inside per 0 auto einmitten und gut is. Alles über dem grünen Kasten kannst du dann als BG in den container legen.
So würd ich das machen.

Habe im Moment ein ähnliches Design, wobei bei mir der menübalken über einem coinsilder liegt und dieser Bereich 100% Bildschirmbreite hat.

[Raynaldo]

Hallo Kayzu,

vielen Dank für die Antwort.

Aber, um ehrlich zu sein, ich verstehe sie nicht

- welche Hintergrundgrafik würdest Du denn nehmen?
- was für eine 1-2px breite Grafik?
- und was soll ich "alles über den grünen Kasten in den container (welchen?)" legen?

Versuche das gerade nachzuvollziehen, schaffe es aber nicht. Mir ist die Aufteilung nicht ganz klar...

Danke schon mal

Viele Grüße
Raynaldo

[Fryd]

Hallo Raynaldo,

wenn die Höhe des Inhaltsbereichs fest ist, dann würde ich die komplette Grafik (grünes Teil plus Inhaltsrahmen) als Hintergrundgrafik im Body unterbringen.

Grüße
Fryd.