[an error occurred while processing this directive]

Finden Sie harmonische Farben

Mit MyColor Studio, dem professionellen Farbmanagement für Ihre Webseite

Hier klicken und mehr erfahren

Neu: Inspirationen für Webdesigner

Entdecken Sie die schönsten Seiten im Netz

Hier klicken und mehr erfahren

[an error occurred while processing this directive]

(Stand: 28.03.24, Adresse: http://www.grammiweb.de/html/html065.shtml)

 

Scrollbare Bereiche auf Webseiten

Reicht der Platz im Layout nicht aus, einen längeren Text unterzubringen, kann dieser auch in einen eigenen Bereich verschoben werden, der dann je nach Bedarf mit Scrollleisten versehen wird.

Ein Beispiel:

Dies ist ein Blindtext. Ein Blindtext ist ein Text, der eigentlich alles andere als Sinn macht und nur dazu dient, leeren Platz auf einer Internetseite auszufüllen. Gut, natürlich dient er mitunter auch als Ausrede, da es immer besser ist, eine Seite mit Inhalten zu füllen, als dem Kunden eine leeres Beispiel mit der Begründung, man hätte sich nur auf sein Layout, nicht auf seine Seiteninhalte konzentriert, zu präsentieren. Nun ja, auf jeden Fall können Sie so schon einmal vorab sehen, wie die Seiten in "gut gefülltem" Zustand aussehen, und wenn Ihnen unser Angebot zusagt, wird hier bald der Inhalt zu sehen sein, den diese Seite eigentlich präsentieren sollte.

Diese Variante wird von allen aktuellen Browsern unterstützt. Ältere Anzeigeprogramme wie der Netscape Navigator 4.7 zeigen statt dessen einfach den kompletten Text in einer entsprechend angepassten Box an - die Information geht also so oder so nicht verloren.

Der Quellcode:

In den Seitenkopf (zwischen <HEAD> und </HEAD>) wird folgender Quelltext eingefügt (sofern bereits CSS-Definitionen vorhanden sind, können Sie die ".scrollen"-Zeile auch einzeln in diese integrieren):

<style type="text/css">
.scrollen { width: BREITE; height: HÖHE; overflow: AUTO; padding: TEXTABSTAND; background: HINTERGRUNDFARBE; border: RAHMEN}
</style>

Die Anweisung zu unserem Beispiel oben:

.scrollen { width: 300px; height: 100px; overflow: auto; padding: 10px; background: #F2F7D3; border: 1px solid #B6D303 }

Anschließend fügen Sie den Text in den Seitenkörper (zwischen <BODY> und </BODY>) an der Stelle ein, an der der scrollbare Bereich erscheinen soll. Markieren Sie dann den gewünschten Text mit der CSS-Definition "scrollen":

<div class="scrollen">

... Text ...

</div>


Zurück zum Inhaltsverzeichnis

[an error occurred while processing this directive] [an error occurred while processing this directive]

© Grammiweb.de Internetlösungen. Alle Rechte vorbehalten. Stand: 28.03.2024
Seitenanfang - Sponsor werden - Datenschutz - Medien - Impressum - Werbung - Hilfe - Kontakt