• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Inhalt hinter transparentem Header unsichtbar machen

ps2freak

Mitglied
Hallo,
Ich habe eine html-Datei mit einem festen Header, der als Hintergrund ein Bild mit einer Deckkraft von 40% hat - also transparent ist.
Der Inhalt im Body-Bereich ist dabei aber beim Scrollen quasi "unter" dem Header sichtbar.
Wie löse ich das Problem nun am besten?

MfG.

Edit: hab den Titel mal abgeändert, vielleicht ist er dann etwas verständlicher und es gibt etwas mehr Beteiligung...
Edit²: Ach verdammt, der Titel wird nicht übernommen... :(
 
Zuletzt bearbeitet:
Werbung:
Wieso hast du überhaupt ein transparenten Hintergrund, wenn der Inhalt dahinter nicht sichtbar sein soll?

Ich glaube dein Problem wäre besser mit einem Link zur Seite, zur Not auch mit einem Screenshot erklärt. Dann beantwortet sich vielleicht auch meine Frage...
 
Naja, nen Link hab ich nicht, aber n screenshot ist eigentlich auch nicht nötig, denn ich hab mich glaub ich hab mich etwas zu kurz gefasst:
Ich habe einen div container erstellt, der halt 30 Pixel hoch ist und 100% breit ist. er ist halt oben links ausgerichtet und zwar fixed (fest, bzw. "Mitscrollend", wie man oft hört), also ähnlich einer Leiste oben, wie sie bei Goggle oder Facebook etc. auch ist.
allerdings habe ich sie eben nicht komplett in schwarz oder blau oder wie auch immer, sondern halt transparent - und zwar nur aus "Schönheitsgründen". Ich war mir vorher schon bewussr drüber, dass man beim Scrollen dann den Text sehen wird, und genau deswegen frage ich nun, ob es generell eine Möglichkeit gibt das zu verhindern bzw. dass der Seitenanfang quasi und´ter diesem feststehenden div container ist.

Ich hoffe, es ist verständlich genug. Es geht mir ja auch um eine generelle Lösung des Problems, denn es ist ja auch so, wenn ich irgendwo einen Anker hinmache, würde ein Teil ja auch hinter dem Header verschwinden - das wär jetzt meine nächste Frage gewesen, wie man das hinbekommt...


MfG.
 
Werbung:
vielleicht hab ich das jetzt falsch verstanden, aber wenn du kannst zwei hintergründe angeben, bzw. ein bild und eine hintergrundfarbe.

z.B. so: background: url("...png") red.

Dann sind auch die transparenten Teile im Bild rot.
 
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...
 
Zuletzt bearbeitet:
ein beitrag reicht echt.

Hallo,

ach so der css ist schon deiner, schuldige sowas schau ich und andere selten an. Zeige ein Link oder erwarte nicht viel hilfe.

und wer hält dich jetzt auch
in

wie zu erwarten war - nicht mehr (es wird ein Teil unten abgeschnitten).
nö zeige ein Link damit wir das auch verstehen.
Dann Arbeite doch einfach mit padding-top:30px im content.

Wenn wir sehen könnte wäre es um einiges einfacher als so.

Cheffchen
 
Werbung:
Sorry, ich bin kein Freund des "Mehrfach-Thread-Eröffnen" etc., ich dachte nur, dass das Thema sich hier erledigt hätte und es im CSS-Bereich besser aufgehoben wäre, darum auch:
Wahrscheinlich sollte ich diese Frage nochmal speziell im CSS-Forum stellen, Thema sollte dann wohl an dieser Stelle geschlossen werden...
Witzig ist, jetzt ist das Ganze nach hinten losgegangen und nun ist das neue Thema geschlossen und nicht das hier ;ugl
Naja, mir auch egal...

So, jetzt zum Thema:
Wenn wir sehen könnte wäre es um einiges einfacher als so.
Wenn es mal so einfach wär, euch n Link zu geben, wenn die Seite nur Lokal bei mir auf dem Laptop ist ;)
Okay, ich könnt euch beim nächsten Mal die Dateien geben, wäre das in Ordnung?
Ich habe mittlerweile schon eine Lösung gefunden (jetzt gerade eben), ich zeige euch das liebend gerne noch, aber jetzt ist es mir zu spät *gähn*

Bis dahin dann ciao und MfG.
 
Zurück
Oben