Scrollbaren Bereich erstellen - nur Inhalte scrollen lassen

[nettesekel]

Immer wieder mal besteht der Wunsch, eine Website zu erstellen, die ansich nicht scrollt. Wenn denn aber doch einmal Inhalte den zur Verfügung stehenden Platz sprengen, sollen diese innerhalb der Seite in einem Layoutbereich scrollen.
Wie man soetwas mit einfachsten Mitteln realisieren kann, erkläre ich Euch kurz im folgenden Tutorial.

Ihr habt beispielsweise eine Seite „Produktinfos" deren Inhalte für Euer kurzes Layout zu lang würden. Also legt Ihr euch in der Baumansicht Eures Projekts eine neue Seite an, nennt sie z.B. „Produktinfos_Inhalt” und schließt nur diese Seite von der Navigation aus.
Wo Ihr schon mal in der Baumansicht seid, stellt Ihr auch gleich beide Seiten, also „Produktinfos" und „Produktinfos_Inhalt” auf php um.

[nettesekel]

Nun öffnet Ihr die Seite für die Inhalte und stellt den Masterrahmen dieser Seite auf ZeroMargins um.

[nettesekel]

Erstellt nun hier die Inhalte für Eure Seite nach gewohnter Arbeitsweise m.H. von Textfeldern, Layoutbereichen oder Tabellen.
Achtet darauf, dass Ihr Euch mit den Inhalten nicht breiter macht, als es der Platz in Eurer Seite später zulässt. In meinem Beispiel habe ich das Textfeld für meine Inhalte auf eine Breite von 600px gezogen.

[nettesekel]

Nun wechselt Ihr zu eigentlichen Seite, in der die Inhalte später scrollen sollen, und fügt an der gewünschten Stelle ein Textfeld ein. Klickt danach einmal ins Layout, danach wieder mit einem einfachen Klick auf das Textfeld (der Cursor darf nicht im Textfeld blinken) und dann auf den html-Button auf der Eigenschaftenpalette.

[nettesekel]

Es öffnet sich ein Fenster, in welchem Ihr „Vor dem Tag” den folgenden Code einfügt:

Code: [Auswählen]

<div style="position:relative; width:620px; height:400px; overflow:auto;">
Achtet darauf, dass die Breite (width:620px;) ein paar Pixel mehr beträgt, als die Breite Eurer Inhaltsseite. Die Höhe (height:400px;) müsst Ihr Euren Bedürfnissen entsprechend anpassen.


und „Nach dem Tag” fügt Ihr diesen Code ein:

Code: [Auswählen]

</div>

[nettesekel]

Danach doppelklickt Ihr in das Textfeld, so dass der Cursor blinkt und klickt wieder auf der Eigenschaftenpalette den html-Button.

[nettesekel]

Im sich öffnenden Fenster tragt Ihr nun noch folgenden Code ein und passt den Namen der einzubindenden Seite an. (falls Ihr nicht nach Assettyp publiziert und Eure Seiten nicht in den Ordner „html” publiziert werden, müsst Ihr ggf. auch den Pfad noch anpassen)

Code: [Auswählen]

<?php include "./produktinfos_inhalt.php"; ?>
Wolltet Ihr die zu scrollenden Inhalte in die Startseite einbinden, dann müsste der Code so ausehen:

Code: [Auswählen]

<?php include "./html/produktinfos_inhalt.php"; ?>

[nettesekel]

So, das wars auch schon. Das Ergebnis seht Ihr nach Publizierung beider Seiten, aber erst auf Eurem Server, es sei denn, Ihr nutzt einen lokalen Webserver.

Viel Spaß!