Hallo,
Ich habe eine ganz simple Box mit einer Grösse von 800x600 Pixel, die sowohl vertikal als horizontal in der Bildschirmmitte zentriert ist, egal bei welcher Auflösung
Die Box hat einen schwach sichtbaren Hintergrund, und der Content befindet sich darauf, soweit alles klar:
CSS:
Code:
#box {
border: 1px dotted #666666;
width: 800px;
text-align: center;
float: right;
position: absolute;
left: 50%;
margin-left: -400px;
vertical-align: middle;
height: 600px;
top: 50%;
margin-top: -300px;
background-image: url(/images/intro.jpg);
background-repeat: no-repeat;
}
HTML:
Code:
<body>
<div id="box">
blablabla...
</div>
</body>
Aber jetzt kommts. Ich will einen farbigen Streifen (wieder einen DIV-Container) mit 60 Pixel Breite längs über das komplette Bild (also von oben nach unten) laufen lassen, und zwar diesmal ausserhalb der Mitte, eher viel weiter rechts der Bildschirmbreite. An welcher Position genau ist ja mal egal. Das muss ich noch ermitteln.
Aber jetzt liegt die Schwierigkeit darin, diesen Streifen "hinter" der oben genannten Box verlaufen zu lassen. Geht das überhaupt? Oder muss man dann 2 Teile machen (ein oberes und ein unteres Stück Streifen?) wobei der obere eben von Bildschirmanfang bis zur Oberkante der Box verläuft, und der untere Streifen an der Unterkante der Box anfängt, und nach unten bis zur Bildschirmunterkante verläuft.
Sinn des Ganzen: Das Hintergrundbild der Box enthält bereits diesen Streifen, und dieser soll ausserhalb der Box fortgeführt werden.
Ich hab mich jetzt ne Ewigkeit daran versucht, hat bereits eine 2-Teile-Lösung, allerdings hat sich der untere Teil nicht der Bildschirmgrösse angepasst, je kleiner die Auflösung wurde, desto mehr konnte man nach unten scrollen, das ist Mist. Das muss sich als der Bildschirmhöhe anpassen.
Das mit z-index hab ich erstens nicht hinbekommen, zweitens hab ich schon gelesen dass das nicht mit allen Browsern kompatibel ist, weshalb schon alleine deswegen diese Lösung ausscheidet.
Kann mir Jemand helfen bitte?
