Thema: Beitragskopf mit Stylesheets: Bilder werden nicht angezeigt

Hallo zusammen,

auf meiner Homepage möchte ich die Beitragsköpfe ganz speziell gestalten. Dazu habe ich mir folgendes ausgedacht: [Das Bild befindet sich im Anhang]

Dies habe ich mittels CSS erstellt. Dazu einmal der komplette Code:

Code:

.landheader {width: 705px; height: 123px;border-top: 1px solid #000000;clear: left;position: relative;overflow: hidden; }

.landbackground {border-bottom: 1px solid #000000;border-right: 1px solid #000000;border-left: 1px solid #000000;width: 278px;height: 120px; float: left; }

.landuberschrift {margin-top: 10px;margin-left: 20px;font-size: 12pt;font-weight: bold; letter-spacing: 1px; color: #000000; }

.landziel {margin-top: 6px;margin-left: 20px;font-size: 18pt;font-weight: 400;text-transform: uppercase;letter-spacing: 1px;color: #000000; }

.landdatum {margin-top: 3px; margin-left: 20px; font-size: 8pt; color: #000000; letter-spacing: 1px; }

.landbeschreibung {margin-top: 10px;margin-left: 20px;font-size: 8pt;color: #000000;}

.landbild {border-bottom: 1px solid #000000;border-right: 1px solid #000000;width: 424px;height: 120px;float: left; }

<!----------------------------------------------------->

<div class="landheader">
         <div class="landbackground">
                 <div class="landuberschrift">Überschrift</div>
                 <div class="landziel">Ziel</div>
                 <div class="landdatum">Datum</div>
                 <div class="landbeschreibung">Beschreibung</div>
         </div>
         <div class="landbild"></div>
</div>

Nun soll auf der linken Seite ein Farbverlauf als Hintergrund angezeigt werden. Dazu habe ich auch schon die Grafik bzw. Grafiken erstellt, da der Farbverlauf je nach Beitrag anders sein soll.

Auf der rechten Seite soll auch immer ein Bild angezeigt werden, was in jedem Beitrag anders sein muss.

Dazu habe ich mir folgendes ausgedacht:

Code:

<div class="landheader">
         <div style=“background:url('pfad');“ class="landbackground">
                 <div class="landuberschrift">Überschrift</div>
                 <div class="landziel">Ziel</div>
                 <div class="landdatum">Datum</div>
                 <div class="landbeschreibung">Beschreibung</div>
         </div>
         <div style=“background:url('pfad');“ class="landbild"></div>
</div>

Dabei tritt allerdings ein Problem auf: Mir werden nicht immer die Bilder angezeigt.
Dann habe ich versucht die Bilder in dem Container mit <img src=““> einzubinden. Das hat allerdings auch nicht den gewünschten Effekt erzielt. Das Bild wurde immer im Vordergrund angezeigt.

Ein weiteres Problem wird es sein, dass ich die Bilder mit einem Hovereffekt versehen muss, wobei ich nicht weiß, ob das überhaupt mit DIV’s möglich ist.

Zurzeit sieht es so aus, dass ich immer eine Grafik mit allen Informationen erstellt habe. Das ist allerdings dür die Suchmaschinenoptimierung ja nicht ganz ideal, weswegen ich es versuche nun mit DIV’s zu lösen. Hat jemand eventuell ein paar Tips oder eine Lösung für das Problem parat?

Ich hoffe, dass ich das Problem verständlich geschildert habe. Wenn nicht, einfach bitte noch einmal nachfragen.

Danke schön schoneinmal für eure Antworten.

Schöne Grüße


P.S.: Ich werde wahrscheinlich erst morgen früh wieder antworten können.