Verschiedene Hintergrundbilder für versc. Seiten

[Thunfisch]

Hallo zusammen,

ich hoffe ihr könnt mir helfen.

Ich habe als Webseite ein fertig Template, mit dem bin ich auch soweit zufrieden.
Die Webseite ist in 2 Teile aufgeteilt, Links ist eine Grafik, rechts der Text.
Die Grafik ist per CSS als Hintergrundgrafik definiert.

Nun möchte ich aber, das auf jeder Seite eine andere Grafik auf der linken Seite zu sehen ist und da hapert es.

Die Webseite ist: www. ut - photo . de

In der Style.css steht zu der Grafik.

Code: Alles auswählen

#containerleft
{
    float: left;
    width: 350px;
    height: 350px;
    background-image:url('front.gif');
    border-right: 20px solid #FFF;
    padding: 10px;
}


Wie bekomme ich es hin, dass ich bei Klick auf index, About me, Photos, TFP, Links oder Impressum eine andere Hintergrundgrafik angezeigt bekomme?

Sollten noch Informationen nötig sein, einfach Fragen.

Wäre sehr dankbar, wenn es hier zu eine einfach Lösung geben würde.

Danke und noch einen schönen Tag.

[Azra]

Du vergibst einfach eine andere ID mit den selben Attributen jedoch einem anderen Bild.

[Thunfisch]

Hallo,

erst mal danke für deine Hilfe, aber was für dich ganz einfach ist, ruft bei mir ganz viele Fragezeichen hervor.

Könntest du mir bitte DAU mäßig erklären was du meinst, bzw. wie ich an mein Ziel komme.

Danke.

[BertaBiene]

index.html
#containerleft1,
#containerleft2,
#containerleft3
{
float: left;
width: 350px;
height: 350px;
background-image:url('bild1.jpg');
border-right: 20px solid #FFF;
padding: 10px;
}



About.html
##containerleft2
{
background-image:url('bild2.jpg');
}

Photos.html
##containerleft3
{
background-image:url('bild3.jpg');
}

[Thunfisch]

Hallo,

leider bekomme ich es nicht hin.

ich habe deinen Code mal "angepasst", so sieht es bei mir aus.

Code: Alles auswählen

index.html
#containerleft1,
#containerleft2,
#containerleft3
{
float: left;
width: 350px;
height: 350px;
background-image:url(pic/yunus.jpg);
border-right: 20px solid #FFF;
padding: 10px;
}



aboutme.html
##containerleft2
{
background-image:url(pic/caitlin.jpg);
}

photos.html
##containerleft3
{
background-image:url(pic/elvis.jpg);
}


Das Ergebnis sieht aber wie folgt aus: http://www.ut-photo.de/web1/

Irgendetwas passt da nicht.

Bin für jede weitere Hilfe dankbar.

[sejuma]

Diese Schreibweise ist mir nicht geläufig, vor allem nicht die doppelten Rauten.

Versuch's mal mit folgenden Varianten:

Variante A:
Wenn die Fotos konstant bleiben sollen und nicht öfters ausgetauscht werden müssen, dann verzichte in der CSS-Datei auf das Hintergrundbild bei #containerleft. In der CSS-Datei steht dann:

Code: Alles auswählen

#containerleft
{
float: left;
width: 350px;
height: 350px;
border-right: 20px solid #FFF;
padding: 10px;
}

Ergänze dann jede Seite mit Styleangaben im Headbereich, wo du das jeweils spezifische Foto einbindest.
Beispiel:
Auf der Indexseite fügst du innerhalb des head-Bereichs ein:

Code: Alles auswählen

<style type="text/css">
#containerleft {
background-image:url(web1/pic/yunus.jpg);
}
</style>

Auf der Seite Fotos wäre einzufügen:

Code: Alles auswählen

<style type="text/css">
#containerleft {
background-image:url('pic/christin.jpg');
}
</style>

usw.
Vorteil: Du kannst mit einer einheitlichen Div-Bezeichnung arbeiten.
Nachteil: Du musst auf jeder Seite das individuelle Bild im Headbereich als Style-Angabe einbinden.

Variante B:
Du packst alles in die CSS-Datei. Alle konstanten Angaben packst du in #containerleft:

Code: Alles auswählen

#containerleft
{
float: left;
width: 350px;
height: 350px;
border-right: 20px solid #FFF;
padding: 10px;
}

Für die variablen Angaben nimmst du unterschiedliche Klassen:

Code: Alles auswählen

.index {
background-image:url(web1/pic/yunus.jpg);
}

.fotos {
background-image:url('pic/christin.jpg');
}

usw.

Auf der Indexseite erfolgt der HTML-Aufruf mit

Code: Alles auswählen

<div id="containerleft" class="index">

Auf der Fotoseite mit

Code: Alles auswählen

<div id="containerleft" class="fotos">

usw.

Vorteil: Du hast wieder alle Angaben in der CSS-Datei
Nachteil: Du musst für jede Seite eine eigene Klasse angeben.

Variante C:
Du verwendest für jede Seite eine eigene Containerbezeichnung mit dem jeweiligen Bild und hast dann in der CSS-Datei und HTML entsprechend unterschiedliche Container.
Beispiel:

Code: Alles auswählen

#containerleft_index
{
float: left;
width: 350px;
height: 350px;
background-image:url(web1/pic/yunus.jpg);
border-right: 20px solid #FFF;
padding: 10px;
}

#containerleft_fotos
{
float: left;
width: 350px;
height: 350px;
background-image:url('pic/christin.jpg');
border-right: 20px solid #FFF;
padding: 10px;
}

HTML:
Indexseite:

Code: Alles auswählen

<div id="containerleft_index>

Fotoseite:

Code: Alles auswählen

<div id="containerleft_fotos">

Vom Codeumfang her würde ich Variante A oder B nehmen.

Edit:
Es gibt natürlich noch eine einfachere Variante, die mir gerade einfällt:
Du verwendest überhaupt keine Hintergrundgrafiken, sondern fürgst die images direkt ein.
Den Text, der innerhalb h2 steht, schreibst du mit einem Grafikprogramm auf die jeweiligen Fotos. Hat den Nachteil, dass er von Suchmaschinen nicht erkannt wird, aber danach wird wohl eh niemand suchen. Du kannst ihn ferner in die "alt-Angabe" beim Image schreiben.