background-image für Layer

Hallo!

Ich habe ein kleines (für mich großes) Problem, was mich echt wütend macht.
Bei solchen banalen Sachen hängen zu bleiben und über eine Stunde an einem Problemchen festzusitzen geht einem echt auf die Nerven.
Und zwar geht es um die Anzeige eines Hintergrundbildes für einen Layer.

Also...
Mein Verzeichnis für die Homepage sieht bis jetzt so aus:

../website/ = * hier befindet sich die index.html
../website/images/ = *hier sind alle Bilder drin
../website/css/ = * hier befindet sich die Datei layer.css

Ich habe in der Datei layer.css einen Layer definiert:

#header { height: 350px; width: 1007px; left: 0; top: 0; position: absolute; visibility: visible; background-image: url(../images/header.jpg); background-repeat:no-repeat; }

In der index.html habe ich die .css-Datei eingebunden mit:

<link href="./css/layer2.css" rel="stylesheet" type="text/css" title="layer2" />

Weiterhin habe ich den Layer aufgerufen und wieder geschlossen:

<div id="header">&nbsp;</div>

Ich Internet Explorer wird die Grafik angezeigt, aber in Firefox nicht.

Wie löse ich das Problem?
Ich achte beim Bau der Homepage auf eine saubere Struktur und die Unterteilung der Elemente z.B. Layer in der .css-Datei. Ich möchte vermeiden die index.html mit zuviel css-Code zu überfüllen...

Wenn ich ehrlich bin:
Nein.

Das liegt daran, dass ich vorhab, das Design noch einmal zu überarbeiten, bevor ich es online stelle. Ich habe nur die andere index.html mit dem anderen Designaufbau hochgeladen, die auf dem Tabellensystem basiert.

Link

Da es zu ein paar Schwierigkeiten damit kam, möchte ich nun mal eine Layervariante versuchen. Dann entscheide ich, welches besser zu handhaben ist.

Der Link da oben bringt uns aber nicht weiter, da es ein ganz anderer Code ist. Stell dir einfach mal eine schwarze Seite vor (body bg = schwarz).
Es gibt einen Layer (root), der die beinhaltenden Elemente zentrieren soll.
Am Top der Seite ist der Layer (header) plaziert mit den Maßen 350px Höhe und 1007px Breite.

Und dieser soll jetzt eben das Hintergrundbild beinhalten.
Mit dem Code, der da oben steht wird das HBild im IE angezeigt, aber im FF nicht.

Was soll ich machen?

So, ich hab es jetzt mal hochgeladen.

Klick

Zitat

Wenn du uns nicht die Seite zeigen kannst, um die es geht, dann kann man dir nicht helfen. Und der Link bzw. die Seite ist auch eine Katastrophe: Klich mich

So, jetzt dürft ihr loslegen.

Nur nochmal so zur Info:
Das, was ihr da seht ist die allergröbste Struktur, wie die Seite einmal aussehen soll. Die index.html wird dann in ein template System integriert.
Ich habe diese HTML-Datei nur gemacht um zu sehen wie die Grafiken, die ich mit Photoshop mache, später aussehen. Oder glaubst du etwa ich lege keinen Wert auf valides HTML? Da bist du aber auf dem Holzweg.
Solche Fehler werden später ausgemerzt.

Zitat von koslowski

Hi,

ähem..., die Seite ist leer.

Dein Doctype ist XHTML 1.0, aber du verwendest Attribute die dort nicht erlaubt sind (bgcolor, align).
Mit align kannst du deine Seite nicht zentrieren, da mußt du schon ne feste Breite zuweisen und das Ganze mit margin:0 auto; zentrieren.

Ich seh auch nirgendwo, das du versucht hast ein HG-Bild zuzuweisen.
Meine Kristallkugel meint, das du vielleicht die Hauptüberschrift in Form einer HG-Grafik einbinden willst.
Dann solltest du dich über Image Replacement Techniken, vorzugsweise Gilder/Levin kundig machen.

Ach, apropo "loslegen": Das Forum hier ist kein "Machs mir-Forum", es bietet Hilfe zur Selbsthilfe an.
Da kommt von dir einfach zu wenig.

Zeig was du versucht hast, dann kriegst du hier Tips.

Alles anzeigen

1. Die Seite ist nicht leer. Ich weiß nicht, wie oft ich es noch erwähnen soll:
die Grafik wird im IE angezeigt, aber im FF nicht. Also IE einschalten und folgenden Link in die Adressenleiste kopieren:
http://www.gatesofgothic.de/test/neu/index.html

2. Da ich leider erst 17 Jahre alt bin und mir mein alter Informatiklehrer kein valides HTML beigebracht hat, muss ich mir alles irgenwie selbst aneignen. So etwas wie ne tolle Ausbildung in dem Bereich ist für mich nicht in Sicht.
Sprich: Ich lerne noch.

Warum kann ich kein <div align... benutzen?
Welchen Doc-Type muss ich denn benutzen, damit es alles korrekt ist?

Das HG-Bild ist in der .css-Datei direkt zugewiesen worden:
http://www.gatesofgothic.de/test/neu/css/layer.css

Ich möchte jetzt einfach nur von euch wissen, warum die Grafik nicht im FF angezeigt wird. Das ist doch der einzige darstellende Code in der index.html den es gibt.

Was muss ich tun, damit der Layer das HG-Bild in beiden Browsern anzeigt?

Zitat von koslowski

Hi,

was soll FF denn anzeigen wenn dein header keine Ausmasse hat.
Gib ihm ne Breite und ne Höhe, wo die Grafik reinpaßt dann siehst du auch was.

position:absolute ist überflüssig. Laß deine Elemente im Fluß.

Informiere dich mal über die HTML-Tags die bei XHTML erlaubt sind und code entsprechend.

Der Layer "root" hat die Maße height: auto und width: 100%
Der Layer "header" hat die Maße height: 350px width: 1007px

Die Grafik ist genauso groß wie die Maße von "header".

EDIT: Dieser Validator sagt, dass meine Seite bis jetzt valide ist, also der Link, der ein Post weiter oben angegeben ist. Warum ist align in div und bgcolor in body jetzt verkehrt?

Zitat von bandit600

Nimm mal die Zeile

<link href="./css/basic.css" rel="stylesheet" type="text/css" title="basic" />

raus.

Moment.
Die Datei gibt es auch, die muss ich schon drin lassen. Dort sind die Formatierungen der Schrift gespeichert.

Soll ich sie trotzdem rausnehmen?

Zitat von bandit600

Nein, lass' sie drin, ich habe das nur so aus Langeweile gepostet und damit du was zu lesen hast.

:p

Also ich finde das ziemlich ungewöhnlich.
Die Pfade sind alle korrekt meiner Meinung nach. Ich muss in der .css-Datei aus der Sicht dieser das Bild scuhen lassen. Im IE funzt es, aber ausgerechnet in meinem Lieblingsbrowser, der immer alles fehlerfrei so wie ich es wollte angezeigt hat, verwehrt mir den Dienst.

Also jetzt habe ich euch das Problem doch so genau geschildert, wie es mir möglich war.

Weiß denn jetzt keiner eine Lösung für dieses simple Problem?
Oder wenigstens einen Ansatz?