header bild wechseln (css)

**header123** · 30.03.2009, 09:48

Hallo, ich habe ein kleines Problem. Ich möchte,dass auf meinen Seiten (Kontakt,Unternehmen,Produkte,...) 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]

Ich habe bisher auf jeder Seite das gleiche Bild. Dies möchte ich ändern.
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.

**koenixblau** · 30.03.2009, 09:58

Fertige für jede Seite eine extra Datei an - mit den entsprechenden Header-Anweisungen,
welche du dann in die jeweilige Seite importierst.

Bspw. so:

HTML-Code:

<link href="hauptdatei.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css" media="screen">
<!--
@import url("startseite_css.css");
-->
</style>

Oder die Header-Anweisungen direkt in die Seite auslagern.

**max.m** · 30.03.2009, 09:59

Das kann man über PHP lösen, ich weiss aber nicht wie fit Du darin bist.
Oder als reines CSS, dann gibt es eben:

Code:

#headerKontakt { background: #fff url(../Bilder/header/header_kontakt.jpg) no-repeat; height: 252px; }
#headerKontakt p { margin: 30px 0 0; color: #D6E5EA; }
 
#headerUnternehmen { background: #fff url(../Bilder/header/header_unternehmen.jpg) no-repeat; height: 252px; }
#headerUnternehmen p { margin: 30px 0 0; color: #D6E5EA; }

usw. Und im entsprechenden HTML-Dokument eben den entsprechenden Header zuweisen.

**jayjay** · 30.03.2009, 10:02

als erstes eine gegenfrage: läuft php bei dir?
wenn ja kannst du das über php abfangen, zb so
oder du fragst im php nach der seite und wechselst da deinen header.
oder du bleibst bei css und erstellst für jede seite eine einzelne css-datei wo nur der header definiert ist und diese dann zusätzlich zu deiner default verknüpft wird.

**header123** · 30.03.2009, 10:23

Als erstes mal DANKE an euch alle.

Werde eure Vorschläge mal testen.

@jayjay: Ja php läuft bei mir. Bin grade dabei mich da mal ein bisschen einzuarbeiten, denn die Lösung mit php gefällt mir. Mal sehn obs klappt.

**jayjay** · 30.03.2009, 10:44

die variante von max.m hatte ich vergessen, du kannst es auch noch etwas ändern

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
.header {
	background-color: #ccc;
	background-repeat: no-repeat;
	height: 252px;
}
.header p {
	margin: 30px 0 0;
	color: #D6E5EA;
}
.header.Kontakt {
	background-image: url(kontakt.gif);
} 
.header.Unternehmen {
	background-image: url(unternehmen.gif);
}
-->
</style>
</head>

<body>
<div class="header Kontakt">k</div>
<div class="header Unternehmen">u</div>
</body>
</html>

**header123** · 30.03.2009, 11:09

danke.
Ich habe auch mal die variante von koenixblau versucht. Das klappt aufjeden fall mal

. Ist halt nicht die eleganteste Art. Mich würd trotzdem interessieren, ob es irgendwelche negative auswirkungen (Ladezeiten,oder ähnl.) hat, wenn ich für jede Seite eine neue Css datei verwende. Weiß das jemand?

**koenixblau** · 30.03.2009, 11:11

Zumindest so das es unspürbar ist, ...
wohl eher von dem Header-Bild abhängig.

**MatthiasG** · 30.03.2009, 11:14

Denke mal das es drauf ankommt wie groß der Inhalt der CSS-Datei ist...denk mal so um die 15-20 KB wirst Du noch nichts merken.

**Boris** · 30.03.2009, 12:16

Ich würde es so ähnlich wie max.m umsetzen - nur dass ich eine ID dem <body> übergeben würde und der Rest geschieht über ein CSS.

Mehrere CSS Dateien dafür zu nutzen ist nicht sehr schön, zumal der Browser das ja zusätzlich nachladen muss.

Code:

body#home #header{ background-image: url(...) }
body#about #header{ background-image: url(...) }
body#work #header{ background-image: url(...) }

Dann einfach auf der Seite manuell oder mit PHP die ID zuweisen lassen:

<body id="about">

zur Startseite vom TP

Thema: header bild wechseln (css)

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

header bild wechseln (css)

Aktive Benutzer

Aktive Benutzer

Ähnliche Themen

[DW CS4] Wie Spry widgets ins header bild bringen?

Web-Design: Wort aus Header-Bild entfernen und durch ein neues ersetzen

[PHP] Fehler 500 malformed header from script. Bad header

Link über Header Bild geht nicht

DNS wechseln???

Stichworte

Aktive Benutzer

Aktive Benutzer

Berechtigungen