Zum Inhalt springen

Headergrafik - default im CSS und als div umsetzen

Erstellt am 13. Oktober 2008 · 1 Antwort · letzte Antwort am 23. Januar 2009

Tags: Bilder, Frage

montharon ·

Hallo und schönen Nachmittag zusammen!

Ich habe folgendes Problem:
Ich möchte auf der Startseite eine Headergrafik platzieren, die 290 Pixel hoch ist. Auf den Folgeseiten ist
die Headergrafik dann nur mehr 150 Pixel hoch.
In meinem HTML Template wird die Headergrafik als Background eines <div>-Tags platziert und zusätzlich mit einem <hr> befüllt...

<div id="imagepic"><hr /></div>
div#imagepic {
	width: 900px;
	height: 294px;
	background-image: url(image_start.jpg);
}

div#imagepic hr {
	display: none;
}

Dies hat den Sinn, dass wen man CSS deaktiviert (für die Druckversion z.B🙂 wird das Bild durch eine einfache Linie ersetzt.

Nun soll das Ganze in Typo3 eingebunden werden. Ich habe diesen Typo-Script Schnippsel dazu verwendet:

lib.HEADER = IMG_RESOURCE
lib.HEADER {
  listNum = 0
  file.import = uploads/media/
  file.import.data = register:page_media
  file.maxW = 900
  file.maxH = 294
  file.import.override {
    required = 1
    data = levelmedia: -1, "slide"
    listNum = 0
  }
  stdWrap.wrap = <div id="imagepic" style="background-image:url( | );"><hr /></div>  
}

Allerdings sollte der Marker im HTML-Tag auch nur wirklich dann ersetzt werden, wenn ein Bild hinterlegt ist, ansonsten das Standardbild anzeigen! Ausserdem weiss ich nicht, wie ich die Höhe des <div>-Tags dynamisch setzen kann - wie gesagt sollte das Bild auf den Folgeseiten kleiner sein, also auf den Folgeseiten...

Kann mir noch jemand folgen? 🙂

Ich müsste also den id des <div>-Tags dynamisch setzen, je nachdem ob es sich um die Startseite oder um eine Folgeseite handelt. So könnte ich mir 2 Klassen im CSS anlegen, die eine für das höhere und die andere für das schmälere Bild...

DANKE
montharon