|
|||
Feststehenden Header durchsichtig machen
Hallo,
seit heute bin ich neu hier im Forum und möchte zunächst alle User begrüßen. Natürlich habe ich auch gleich ein Problem, welches ich hier schildern möchte: Ich habe einen Header (inkl. Logo + Menü) am oberen Rand fixiert und er bleibt beim scrollen des Textes oben stehen. Nun habe ich auf einer anderen Internetseite gesehen, dass im gleichen Fall dieser oben fixierte Header halbtransparent ist. Das heißt, dass beim scrollen des Textes aus dem Inhalt (contend), dieser Text durch den Header durch scheint. Zum eigentlichen Aufbau der Seite: Der Header besteht aus einem DIV-Container (container_oben), der wiederum einen zentrierten DIV-Container beinhaltet (container_oben_innen). Darunter kommt dann ein weiterer DIV-Container (container_mitte) - ebenfalls mit einem weiteren zentrierten DIV-Container (header), der eine Grafik (headergrafik) beinhaltet. Darunter dann nochmals ein DIV-Container (container_inhalt) mit einem zentrierten Container (inhalt), der dann den Text enthält. Nun habe ich versucht, das wie folgt umzusetzen: hier die "index.php": Code:
<div id="container_oben"> <div id="container_oben_innen"> Logo und Menü </div></div></div> <div id="wrapper"> <div id="container_mitte"> <div id="container_header"> <div id="headergrafik"></div> </div> </div> <div id="container_inhalt"> <div id="inhalt"> <?php page_content(1); ?> </div> </div> </div> Code:
#container_oben { width: 100%; height: 120px; background-color: #fde803; /* background-color: rgba(253, 232, 3, 0.5); */ position: fixed; top:0; left:0; z-index:1; } #container_oben_innen{ max-width: 1300px; height: 100%; margin: 0 auto; background-color: rgba(253, 232, 3, 0.0); color: #808080; z-index: 30; } #container_mitte { width: 100%; height: 400px; background-color: #808080; } #container_header { max-width: 1300px; height: 100%; margin: 0 auto; background-color: #fde803; } #headergrafik { max-width: 100%; height: 100%; margin: 0 auto; background-color: #fde803; background-repeat: no-repeat; color: #808080; } #container_inhalt{ width: 100%; height: 100%; background-color: #fde803; } #inhalt{ max-width: 1270px; height: 100%; min-height: 384px; margin: 0 auto; padding: 8px 15px 8px 15px; background-color: #f0f0f0; color: #808080; } Es soll ja so sein, dass der komplett gelbe Bereich (container_oben) ganz unten liegt. Oben soll der Bereich liegen mit Menü und Logo (container_oben_innen). Dieser soll halbtransparent sein. Und dazwischen soll sich dann beim scrollen der Container mit der Grafik (header / headergrafik) sowie der eigentliche Inhalt mit dem Text (container_inhalt / inhalt) schieben. Wie Ihr im Code sehen könnt, habe ich auch schon mit den Transparenzen versucht zu arbeiten... leider ohne Erfolg. Wenn ich jetzt scrolle, verschwinden Headergrafik und Text einfach komplett hinter dem fixierten Header. -->> Habe mal einen Screenshot der Seite mit Erklärungen angehängt! Wie kann ich dieses Problem lösen? Danke und Gruss, imebro |
Sponsored Links |
|
|||
Hallo
deine Angaben sind leider dürftig. Wir haben weder Zugriff auf die Bilder noch auf den Inhalt der PHP-Texte. Am sinnvollsten wäre ein Link zu der Seite. Zitat:
Gruss MrMurphy |
Sponsored Links |
|
|||
Hallo und danke für Deine Antwort.
Leider kann ich keinen Link posten, da diese Webseite bisher nur LOKAL auf meinem Rechner existiert. Meine Angaben würde ich jetzt nun wirklich nicht als "dürftig" bezeichnen. Ich habe doch den kompletten HTML- u. CSS-Code eingefügt, sowie eine sehr detaillierte Erklärung Vielleicht erkläre ich es mal ganz grob: Der Header soll so aufgebaut sein, dass ganz unten ein gelber Hintergrund ist. Darüber soll dann ein halbtransparenter Hintergrund in gleicher Größe liegen, der Menü und Logo enthält. Und zwischen diese beiden Hintergründe soll sich der Contend schieben, wenn nach unten gescrollt wird. Und dieses ganze Gebilde soll fix oben am Rand stehen. ------------- Es muss ja nicht so umgesetzt werden, wie ich es gemacht habe (mit Container in Container). Vielleicht habt Ihr ja eine andere Idee, wie man das erfolgreich umsetzen könnte. In meinem Screenshot sieht man aber, dass sich Menü und Logo nicht direkt am linken bzw. rechten Rand befinden, sondern mit jeweils etwas Abstand. Ich hatte das dadurch erreicht, dass ich eben in den oberen Container einen weiteren zentrierten Container eingefügt hatte, der dann Menü und Logo enthält... das nur zur Info. Freue mich auf Eure Tipps & ggf. Vorschläge. Danke und Gruss, imebro |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit Header | systemius | CSS | 10 | 04.05.2012 08:21 |
Abstandproblem im #header | Bake | CSS | 8 | 26.11.2011 18:55 |
Untermenü im IE | nici | CSS | 10 | 22.06.2009 22:19 |
header verrutscht... | weblearner | CSS | 6 | 03.12.2008 20:34 |
Header mit img, h1 und form | Uwe_B | CSS | 22 | 02.10.2008 12:07 |