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:
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 http://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