Heike Hoerig: Wie baue ich ein Scrollfenster?

Hallochen zusammen :-)

Auf meiner Homepage habe ich einige längere Texte. Bisher sind sie so eingebaut, dass man ganz normal auf dem Bildschirm von oben bis nach unten liest. Also der gesamte Text auf der Seite auch angezeigt wird.

Nun möchte ich das so verändern, dass ich "Lesefenster" einbaue, wo man dann nur innerhalb des Fensterbeereiches den Text hoch und runter scrollen kann. Also nur der Text sich innert des Fensters bewegt wird.

Wie muss ich da vorgehen?

Beste Grüße
Heike

  1. Hallochen alleine,

    Nun möchte ich das so verändern, dass ich "Lesefenster" einbaue, wo man dann nur innerhalb des Fensterbeereiches den Text hoch und runter scrollen kann. Also nur der Text sich innert des Fensters bewegt wird.

    Schau mal hier:
    http://www.aktivferien.de/v2/af000.php

    Ist mit Firefox 1.5 getestet. Im IE 5 sind die Überrschriften der "Lesefenster" weg. Bin jetzt aber auf einer anderen Baustelle mit wenig Zeit.

    Kalle

    1. Hi Kalle,

      Schau mal hier:
      http://www.aktivferien.de/v2/af000.php
      Ist mit Firefox 1.5 getestet. Im IE 5 sind die Überrschriften der "Lesefenster" weg.

      nö, zumindest im 5.5er ist alles einwandfrei da. Aber dafür hat dein Layout auf einem Firefox 1.0x massive Probleme (Screenshot, 53k PNG).

      Heike, solche "Lesefensterchen", wie du sie nennst, erhält man, indem man einem Element (meistens wohl ein div, könnte aber auch jedes andere Blockelement sein) eine feste Höhe und dann die Eigenschaft overflow:auto; oder overflow:scroll; gibt. Bei der Variante mit 'auto' werden Scrollbalken nur angezeigt, wenn der Inhalt das erfordert, bei 'scroll' sind sie immer da.

      Ciao,
       Martin

      --
      Die Zeit, die man zur Fertigstellung eines Projekts wirklich braucht, ist immer mindestens doppelt so lang wie geplant.
      Wurde dieser Umstand bei der Planung bereits berücksichtigt, gilt das Prinzip der Rekursion.
      1. Hi Martin,

        danke für den Screenshot.

        Sieht so aus, als ob ein "clear" nicht funktioniert.

        Vielleicht wird dieser leere DIV ignoriert?
        <div class=clear></div>

        IE ignoriert jedenfalls ein leeres P
        <p class=clear></p>

        deshalb habe ich div genommen. Wenn ich dem P oder DIV ein &nbsp; als Inhalt gebe, bekomme ich zwangsweise einen Abstand, den ich nicht will.

        Eigentlich wieder ein guter Grund zurück zur alten <table>

        Kalle

        1. Hallo

          Sieht so aus, als ob ein "clear" nicht funktioniert.

          Vielleicht wird dieser leere DIV ignoriert?
          <div class=clear></div>

          Wo sind die Anführungszeichen um clear?

          IE ignoriert jedenfalls ein leeres P
          <p class=clear></p>

          Ein Textabsatz (Element) ohne Textabsatz (Inhalt)? Wie unsinnig. <div> ist da schon das Richtige.

          deshalb habe ich div genommen. Wenn ich dem P oder DIV ein &nbsp; als Inhalt gebe, bekomme ich zwangsweise einen Abstand, den ich nicht will.

          Hast du das Element dimensioniert (width, height)?

          Eigentlich wieder ein guter Grund zurück zur alten <table>

          nicht wirklich

          Tschö, Auge

          --
          Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
          (Victor Hugo)
          Veranstaltungsdatenbank Vdb 0.1
  2. hi,

    Nun möchte ich das so verändern, dass ich "Lesefenster" einbaue, wo man dann nur innerhalb des Fensterbeereiches den Text hoch und runter scrollen kann. Also nur der Text sich innert des Fensters bewegt wird.

    Wie muss ich da vorgehen?

    overflow lautet dein Stichwort.

    Setze es aber bitte sparsam und mit bedacht ein.
    Niemand mag es, auf einer Seite an zig Stellen Scrollen zu müssen.
    Längere Texte präsentierst du besser auf einer normalen Seite, so dass nur das "Hauptfenster" gescrollt werden muss. Und falls das "zu lang" wird, dann teile den Inhalt auf mehrere Dokumente auf.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Hallochen zusammen :-)

      Erstmal vielen Dank an Kalle, Martin und Wahsaga (Sorry wegen dem Doppeöposting - Bleibe jetzt in meinem Thread dazu), die mich mit ihren Tipps schon einiges voran gebracht haben.

      Ich komme jetzt schon auch soweit klar, dass das Scrollfensterchen in Position und Inhalt und größe genauso erscheint, wie ich es haben will. Aber ein kleines Problem habe ich momentan dennoch:

      Das Scrollfenster übernimmt als Hintergrundfarbe meine Webseitengrundfarbe. Ich möchte für dieses Element aber einen weißen Hintergrund, während alles drum herum bleiben soll wie es ist.

      wie bekomme ich dies hin?

      :-)
      Heike

      1. Hallo.

        Das Scrollfenster übernimmt als Hintergrundfarbe meine Webseitengrundfarbe. Ich möchte für dieses Element aber einen weißen Hintergrund, während alles drum herum bleiben soll wie es ist.

        wie bekomme ich dies hin?

        So wie bei jedem anderen Element auch.

        :-)

        Das ersetzt die selbständige Suche auch nicht.
        MfG, at