✔ Problem: CSS Homepage - Gestaltung - mitwachsende Layer + Hintergründe

Status
Nicht offen für weitere Antworten.
S

shorty

Erfahrenes Mitglied
Guten Tag,

ich habe wieder einmal ein Problem mit CSS und der Gestaltung einer Homepage:

Ich bin gerade dabeil, eine Art "Grundgerüst" für eine Homepage zu erstellen und möchte dazu gerne mit CSS arbeiten, d.h. CSS Layer erstellen. Dazu kommt, dass der "Rahmen" komplett aus Grafiken besteht, lediglich der "Content"-Bereich eine Hintergrundfarbe erhält und verfügbar für den (logischerweise) Inhalt der späteren Homepage.

Dadurch, dass links und rechts vom Contentbereich Hintergrund verwendet werden, sollen sie, je länger die Seite wird, mitwachsen. Habe mich dazu hier in dem Forum schon einmal umgeschaut und bin auf einen Verweis von Stu Nicholls' gestoßen, der dort sehr schön darstellt, wie man dieses Vorhaben am besten realisiert. Ich habe mich an seinem Beispiel orientiert und habe auch eine ähnliche Realisierung umsetzen können.

Leider passt das Design einfach nicht und wenn ich Inhalt einfügen möchte, speziell neue Div-Layer - beispielsweise für eine News-"tabelle", "verformt" sich die Homepage.

Von der Ansicht mit dem Internet Explorer muss man erst gar nicht sprechen. Dazu muss ich mir später noch Gedanken machen. Anschauen müsste man sich die Seite derzeit im Firefox.

Unter folgendem Link wäre das derzeitige Layout der Homepage: http://www.2dswork.info/mf2/

Es wäre sehr nett, wenn mir diesbezüglich jemand helfen könnte.
Ich danke schon einmal im Voraus für jegliche Hilfeleistung.
 
Da fehlen wohl noch zwei Grafiken und entferne mal die Hintergrundfarbe für das DIV #top.
 
Die Grafiken sind nun alle da und ich habe die Hintergrundfarbe entfernt.

Das Problem hier ist, dass sich alle Grafiken "überschneiden"...
 
Von welchen neuen Grafiken sprichst du? Und wo überschneiden sie sich bei dir? Hast du mal einen Screenshot zur Hand?

Bei mir überschneiden sie sich nicht, nur fehlt der obere und untere mittlere Rahmen für die Box.
 
Habe dir zur Veranschauen die Grafik als Anhang mitgesendet.

Zurzeit geht die Hintergrundgrafik über div#middle-right hinaus und "überschneidet" div#top-right und div#bottom-right. Genau dasselbe auf der anderen Seite...
 

Anhänge

  • div-layer.jpg
    div-layer.jpg
    45,6 KB · Aufrufe: 113
Okay, jetzt weiß ich, was du meinst :-( Am CSS- und HTML-Code liegt es aber nicht, denn der gleiche Darstellungsfehler tritt bei mir auf, wenn ich dein unvollständiges Grafik-Set (es fehlt "content-bottom-middle.png" und analog für #top "content-top-middle.png" ) in mein empfohlenes Beispiel einfüge.
 
Es ist ja nicht unvollständig, das Grafikset. Prinzipiell, also laut Code, müssten oben und unten ebenfalls Grafiken als Hintergrund angezeigt werden. Das habe ich so von deinem Code übernommen :).

EDIT:

Okay, es liegt wohl an den Grafiken selber, d.h. aber gleichzeitig, dass ich deinen Lösungsvorschlag leider doch nicht verwenden kann. :(

Was gäbe es denn für Alternativen?
 
Zuletzt bearbeitet:
Für oben (mitte) hast du diese Regel im Stylesheet notiert:
Code: 
div#top {
        /*background-color: #FFF;*/
}
und für unten (mitte)
Code: 
div#bottom-middle {
        background: url('../images/layout/content-bottom-middle.png') bottom repeat-x;
}
Im HTML-Dokument rufst du aber anstelle von #bottom-middle die ID #bottom auf, weshalb die untere mittlere Hintergrundgrafik nicht angezeigt wird.

Und diese Hintergrundgrafik überlagert dann ebenfalls die anderen.

Dieser Darstellungsfehler tritt dann aber auch wieder in meinem Original-Demo auf, und das in allen modernen Browsern (Firefox, Mozilla, Netscape, Opera und SeaMonkey). Dass der IE6 mit transparenten PNGs nicht umgehen kann, dürfte dir ja schon bekannt sein.

Von daher vermute ich jetzt mal, dass da irgendwas mit den Grafiken nicht simmt.

[editpost]

Eine Alternative zu den transparenten PNGs wäre das GIF-Format.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück