header123: Auf jeder Seite ein anderes header-bild

SELF-Forum

Auf jeder Seite ein anderes header-bild

header123
+1 Informationen zu den Bewertungsregeln

Hallo, ich habe ein kleines Problem. Ich möchte,dass auf meinen Seiten (Kontakt,Unternehmen,Produkte,usw.) jeweils ein anderes Header-bild erscheint. Mein Header steckt wie folgt in einer main.css-datei: (Auszug)

#header { background: #fff url(../Bilder/header/header_1.jpg) no-repeat; height: 252px; }
#header p { margin: 30px 0 0; color: #D6E5EA; }[/color]

Gibt es eine Möglichkeit dem Browser zu sagen: Auf der Seite "Unternemen" zeige header1.jpg auf der Seite "Kontakt" zeige header2.jpg usw.?
Habe gelesen, dass es mit php einfach funktionieren soll. Kenne mich da jedoch noch nicht aus.

Wär echt super, wenn mir jemand helfen könnte!!!!!!
Danke.

Beitrag melden
+1
Informationen zu den Bewertungsregeln

  1. Auf jeder Seite ein anderes header-bild

    Stefan Eickhoff Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Moin,

    am einfachsten kannst Du das per CSS lösen wenn Du dem body-Tag jeweils eine ID zuweist.

    Also zum Beispiel

    <body id="unternehmen">
    <body id="kontakt">
    <body id="produkt">

    Im CSS kannst Du dann entsprechende Styles für die Varianten vergeben:

    #header { /* allgemeine header-Styles */}

    #unternehmen #header {}
    #kontakt #header {}
    #produkt #header {}

    Viele Grüße

    Stefan

    --
    bythewaythewebsuxgoofflineandenjoytheday
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Auf jeder Seite ein anderes header-bild

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@header123:

    Gibt es eine Möglichkeit dem Browser zu sagen: Auf der Seite "Unternemen" zeige header1.jpg auf der Seite "Kontakt" zeige header2.jpg usw.?

    Ja. Gib in XHTML dem 'html'-Element (oder alternativ dem 'body'-Element; in HTML 4 nur 'body'-Element möglich) eine ID (für jede Seite eine andere):
    <html id="kontakt" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> bzw. <body id="kontakt">;
    <html id="unternehmen" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> bzw. <body id="unternehmen">

    Dann kannst du mit den Nachfahrenselektor im Stylesheet für jede Seite ein anderes Hintergrundbild festlegen:

    #header { background: #fff no-repeat }  
#unternehmen #header { background-image: url(../Bilder/header/header_1.jpg) }  
#kontakt #kontakt { background-image: url(../Bilder/header/header_2.jpg) }

    Ich würde die Bilder nicht numerieren, sondern auch nach ihrer Funktion benennen: header_unternehmen.jpg, header_kontakt.jpg.

    Live long and prosper,
    Gunnar

    --
    Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln