okay, lassen wir die transparent mal beiseite - das scheint nur Verwirrung zu stiften.
Ich denke für mich wäre die beste Lösung sowas hier:
Feststehender Footer fr den Internet Explorer
Ich habe schon ein bisschen rumprobiert, denn ich brauche ja quasi genau das, nur für meinen header - welcher aber eine feste größe hat, was laut self-html bei diesem beispiel nicht geht.
Ich habe es halt ausprobiert, gesagt dass der content container da halt 30px Abstand oben haben soll (weil der header 30px groß ist) und dann halt eine höhe von 100% haben soll - wie schon befürchtet funktionioert das nicht ganz, ein Teil wird unten abgeschnitten...
Kann mir irgendjemand Tips für eine gescheite Lösung geben???
Danke und MfG.
Edit: letztendlich ist der 30 Pixel hohe, feste Header zwar transparent (soll ja auch so), aber das spielt ja keine Rolle. Fakt ist, dass bei diesem Beispiel der Text nicht mehr "hinter dem Header verschwindet" ;).
Nochmal Edit:
Code:
@charset "utf-8";/* CSS Document */
html, body {
margin:0;
padding:0;
height:100%;
overflow:hidden;
background-attachment: fixed;
background-image:url(background.jpg);
background-repeat: no-repeat;
background-position: left top;
}
div#header{
position:absolute;
width:100%;
height:3%;
background-color:#005;
}
div#content{
width:100%;
height:97%;
overflow:auto;
}
@media screen{
body>div#header{
position:fixed;
}
}
* html body{
overflow:hidden;
}
* html div#content{
height:100%;
overflow:auto;
}
Das ist jetzt was, was ich mal konstruiert habe (Ja, der header ist jetzt blau und nicht mehr transparent, das spielt ja aber wie gesagt keine Rolle, ich werde ihn danach wieder transparent machen. So, wie schon erwähnt, funzt das ganze mit relativen (%) Angaben, bloß wenn ich jetzt anfange dem Header eine feste Größe zu geben, geht das Ganze nach hinten los. Meine Frage ist jetzt halt, wie löse ich dieses Problem optimal?
Ein letztes Mal Edit: Wahrscheinlich sollte ich diese Frage nochmal speziell im CSS-Forum stellen, Thema sollte dann wohl an dieser Stelle geschlossen werden...