nicht angemeldet
Design eines Kopfbereiches einer Seite mit fixen Bereichen.
Hallo,
Bräuchte etwas Hilfe, beim CSS und layouten einer Seite:
Auf einer Seite befindet sich oben eine Leiste, die über die volle Breite geht, und mit position: fixed fixiert ist. Diese soll auch über alles drüber gehen.
Darunter befindet sich eine Art Menuleiste über die volle Breite, mit einem Background-Image. Der background bleibt stehen.
Darauf befindet sich links ein Logo, welches halbtransparent ist. Dieses ist auch fixed. Der Inhalt soll UNTER diesem Logo herscrollen und durch die Transparenz leicht durchscheinen, aber immer noch über dem Background der kompletten Leiste gehen.
Rechts von dem Logo befindet sich schon scrollbarer Content, der über über dem Background liegt (welcher fixiert sein soll).
Alles weitere darunter ist scrollbarer Content.
Also es soll ungefähr so aussehen:
|----------------------------------------------------------------
| fixe Leiste mit Background, über allem. |
|---|
| Logo, fix, |
| halbtransparenz |
| ------------------------- |
| scrollbarer Text, und weiter Content. |
^ erscheint unter dem ^ ^ Content hier voll sichtbar, beim Scrollen ^
Logo durch, aber ÜBER obigem background.
über dessen fixem BG
Hoffe es wird etwas klar. background-attachment: fixed hat leider keine Auswirkung (IE7 & FF2). Geht das nur im body tag?
Oben die Leiste zu fixieren ist ja einfach. Aber das andere Leider nicht so...
Gruß
Christian
-
Hallo,
Hoffe es wird etwas klar. background-attachment: fixed hat leider keine Auswirkung (IE7 & FF2). Geht das nur im body tag?
fixed bezieht die Hintergrundposition offenbar nicht auf das betr. Div.
Vielleicht benötigst du einen zusätzlichen Container innerhalb des scrollbaren
Divs für den Hintergrund?Grüsse
aus Düsseldorf
-
Hm,
also am liebsten würde ich die Struktur so aufbauen (da es semantisch auch am meisten Sinn macht):
<div class="LogoContainer">
<div class="Logo"></div>
</div><div class="Main"></div>
Wobei LogoContainer fixed ist, und den background enthält. Logo enthält das Logo als Background-image.
Main ist der scrollbare Bereich, und der müsste sich visuell quasi zwischen die Layer LogoContainer und Logo schieben, so dass das Logo drüber liegt, und LogoContainer drunter.
Ist das so möglich? Habe nun schon viel rumprobiert mit position: relative und z-indezes aber bringt alles nichts. Entweder "Main" ist ganz drunter oder ganz drüber, über "LogoContainer"
Gruß!
-
Hallo,
<div class="LogoContainer">
<div class="Logo"></div>
</div><div class="Main"></div>
Wenn das div.Main mit fester Höhe etc. scrollen soll, vielleicht ein Container
innerhalb dieses Divs nur für den Hintergund.<div class="Main"><div class="bg">
...
</div></div>div.Main erhält overflow:auto; und div.bg bekommt background-image: ohne fixed,
oder sollte das Ergebnis anders ausschauen?Grüsse
Cyx23
-
-