Sabine: Kopfgrafik an der Oberkante vom Browser fest positionieren

Hallo,
ich würde gerne eine Kopfgrafik (770px x 120px) oben im Fenster positionieren. Beim Scrollen soll die Kopfgrafik immer da stehen bleiben und der Text hinter der Grafik beim runterscrollen verschwinden. Ich möchte keine Frames verwenden, sondern jeweils immer eine vollwertige Seite.

Hat jemand eine Idee bzw. dies schon mal irgendwo gesehen? Geht sowas per CSS oder per JS?

Gruss,
Sabine

  1. Hi,

    position:fixed; - Kann der IE aber nicht, scheint aber irgendwelche workarounds zu geben, hab es selber noch nicht ausprobiert.

    Aber bist du sicher, das das so eine gute Idee ist? Ich empfände es als ziemlich nervig immer 120px von meinem Bildschirm zu verlieren. dazu noch die Browser-bedienleisten (die einiges an Platz kosten können - bei mir zum Beispiel 190px), die Startleiste (50px), evtl. eine horizontale scrolleiste (15px) und eine niedrige Auflösung (oder einfach die Standardauflösung 1024x768, da bleiben noch nicht mal 400px für den Text - an 800x600 mag ich gar nicht denken) das macht die Seite ziemlich zuverlässig unlesbar.

    Marc

    1. probier mal das:

      <div style="position:absolute;top:0px;left:0px;">Head</div>

      gruß Knut

      1. achsoo! das soll nicht mitscrollen *uhm* dafür ist "position:fixed" gedacht - was aber beim IE nicht geht wie schon gesagt wurde.

        Du kannst versuchen mit einem hintergrundbild, background-attachment:fixed, einem div mit overflow:scroll und margin/padding-top(damit der text unter dem bild anfängt) rumzuspielen.

        Andere möglichkeit ist nen javascript das das bild beim event onscroll jeweils wieder oben positioniert.

        ist aber nicht gerade nett dem user ständig nen bild in den top zu knallen *schulterzuck*

        gruß

        1. achsoo! das soll nicht mitscrollen *uhm* dafür ist "position:fixed" gedacht - was aber beim IE nicht geht wie schon gesagt wurde.

          Du kannst versuchen mit einem hintergrundbild, background-attachment:fixed, einem div mit overflow:scroll und margin/padding-top(damit der text unter dem bild anfängt) rumzuspielen.

          Andere möglichkeit ist nen javascript das das bild beim event onscroll jeweils wieder oben positioniert.

          ist aber nicht gerade nett dem user ständig nen bild in den top zu knallen *schulterzuck*

          gruß

          Hallo Knut,
          jetzt war ich auch zu schnell und hab schon auf dein erstes Posting geantwortet.
          Kennst du ein JS, was das macht?

          Gruss,
          Sabine

      2. probier mal das:

        <div style="position:absolute;top:0px;left:0px;">Head</div>

        gruß Knut

        Hallo Knut,
        leider scrollt es mit dieser Möglichkeit mit. Das soll es ja gerade nicht.
        Gruss,
        Sabine

    2. Hi,

      position:fixed; - Kann der IE aber nicht, scheint aber irgendwelche workarounds zu geben, hab es selber noch nicht ausprobiert.

      Aber bist du sicher, das das so eine gute Idee ist? Ich empfände es als ziemlich nervig immer 120px von meinem Bildschirm zu verlieren. dazu noch die Browser-bedienleisten (die einiges an Platz kosten können - bei mir zum Beispiel 190px), die Startleiste (50px), evtl. eine horizontale scrolleiste (15px) und eine niedrige Auflösung (oder einfach die Standardauflösung 1024x768, da bleiben noch nicht mal 400px für den Text - an 800x600 mag ich gar nicht denken) das macht die Seite ziemlich zuverlässig unlesbar.

      Marc

      Hallo Marc,

      danke für deine Antwort. Ich möchte eine Website machen, wo rechts, links und oben ein Vorhang ist. So dass es ausschaut wie eine Bühne. Und auf der Bühne soll dann der Inhalt sein. 800x600 User vergraule ich bestimmt damit, aber damit muss ich leben.

      Gruss,
      Sabine

  2. Hallo Sabine

    Hat jemand eine Idee bzw. dies schon mal irgendwo gesehen? Geht sowas per CSS oder per JS?

    Schau dir mal Footer aller Art - feststehende Elemente realisieren an.

    Auf Wiederlesen
    Detlef

    --
    - Wissen ist gut
    - Können ist besser
    - aber das Beste und Interessanteste ist der Weg dahin!