Hi Drathy
Über diesem Bild soll nun ein Layer gelegt werden, welcher ein transparentes PNG mit Linien enthält, die um das Bild laufen und es teilweise überschneiden... Das ist nun soweit ja kein Problem.
Ist es doch, sofern du IE 6 Benutzer nicht aussperren möchtest. Deren Browser kann transparente PNGs nämlich nur mit Hilfe von htc Skripten darstellen (es gibt allerdings fertige Bibliotheken).
Problematisch ist allerdings, dass der Kunde möchte, dass die Linien bei einer 1024er Auflösung aus dem Viewport rechts herausragen und bei höheren Auflösungen dann komplett sichtbar sind...
Nein, ist es nicht. Musst das Bild so breit machen wie du's haben willst und dann das hier schreiben (tested IE6, IE7, FF):
body, html {
margin: 0;
padding: 0;
border: 0 none;
width: 100%;
}
#pngheader {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 200px; //oder was immer
overflow-x: hidden;
}
#header {
width: 1000px;
margin: 0 auto 0 auto;
background: url(img/header.jpg) no-repeat 0 0;
height: 200px;
}
#content {
width: 1000px;
margin: 0 auto 0 auto;
}
<body>
<div id="pngheader"><img src="img/pngheader.png" alt="" /></div>
<div id="header">normaler header mit navi oder was immer</div>
<div id="content">hier alles andere, p's div's etc</div>
</body>
Gruß
Antipitch