[lemon]

Hallo Leute!

Ich möchte auf meiner Seite einen Header erstellen, der aus einem Hintergrundbild und einem darauf liegenden, kleineren Bild bestehen soll. Dieses kleinere Bild soll außerdem einen Link beinhalten.
Momentan sieht das so aus:

Typoscript-Code:

1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26:

HEADER = COA HEADER { 10 = IMAGE 10 { file = GIFBUILDER file { XY = 980, 158 10 = IMAGE 10 { file = fileadmin/images/header.jpg file.width = 980 offset = 0,0 } } } 19 = TEXT 19.value = <a href="http://www.google.de"> 20 = IMAGE 20 { file = fileadmin/images/roterhahn.gif file.width = 50 offset = -200,-200 } 21 = TEXT 21.value = </a> }

Der Marker heißt "HEADER", und das Bild auf Position 10 ist gleich groß wieder der div-Container. Das kleinere Bild wird aus irgend einem Grund UNTER dem Hintergrundbild plaziert, jegliche Offset-Angaben werden ignoriert.
Warum?

Viele Grüße

Lemon

[lemon]

Hab's inzwischen hinbekommen, aaaaaber...
Der TS-Code sieht inzwischen so aus:

Typoscript-Code:

1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27:

HEADER = COA HEADER { 5 = HTML 5.value = <div class="header-layer1"> 10 = IMAGE 10 { file = GIFBUILDER file { XY = 980, 158 10 = IMAGE 10 { file = fileadmin/images/header.jpg file.width = 980 offset = 0,0 } } } 19 = TEXT 19.value = </div><div class="header-layer2"><a href="http://www.roterhahn.it"> 20 = IMAGE 20 { file = fileadmin/images/roterhahn.gif file.width = 50 } 21 = HTML 21.value = </a></div> }

Die beiden CSS-Klassen und das umschließende HEADER-DIV hab ich folgendermaßen definiert:

#header {
  height: 158px;
  width: 980px;
  border-color: green;
  text-align: center;
  margin: 0px 0px 15px 0px;
}

.header-layer1 {
 position: relative;
 left: 0px;
 top: 0px;
 z-index: 1;
}

.header-layer2{
  position: relative;
  left: 460px;
  top: -60px;
  z-index: 2;
}

Das Problem ist nun, daß der Internet Explorer <=6 einen Abstand unterhalb des ersten Bildes einfügt, der gleich groß ist wie das zweite, obenliegende Bild. Da max-height beim IE keine Wirkung zeigt, bin ich momentan ratlos und hoffe auf Hilfe Eurerseits.
Falls meine Fragestellung nicht klar ist, könnt Ihr unter lafoi.lemonline.eu selbst sehen, was ich meine. Ganz oben ist der Header, und rechts der Hahn ist das obenliegende Bild mit dem Link.

Vielen Dank & Grüße aus Südtirol!

Lemon

[lemon]

Habe im anderen Forum eine Lösung gekriegt und möchte sie Euch nicht vorenthalten:

Dann gib #header mal ein position: relativ; und header-layer2 ein position: absolute;

Viele Grüße

Lemon

[Kurt51]

Hi,
ich habe das nur mit CSS umgesetzt!
Zwei DIVs mit Marker.
Die DIVs im CSS absolute positioniert an dieselbe Position und mit z-Index die Lage bestimmt! Dann brauchst Du im Typoscript ja nur noch den Marker zu füllen, sonst nix!?

<div class="layerUnten">###BILD_UNTEN###</div> <div class="layerOben">###BILD_OBEN###</div>

CSS:
div.layerUnten { position:absolute; ... z-index:10;}
div.layerOben { position:absolute; ... z-index:20;}