Scrollboxen

Eine beliebte Lösung für überlange Texte, die vielleicht auch nur ergänzende Informationen für spezielle Interessen enthalten, sind Scrollboxen innerhalb der Seite.

Vorsicht: Besonders häufig wird danach gefragt um darin rechtliche Informationen in eBay Angeboten unterzubringen.
Gerade für diesen Zweck sind sie fragwürdig und es ist zweifelhaft ob damit eine rechtswirksame Information erreicht wird. Ganz sicher ist dies nicht der Fall wenn die Box ein "Briefschlitzformat" hat in dem jeweils nur 1-2 Zeilen sichtbar sind - sowas kann man niemandem zum lesen zumuten. Ob größere Formate akzeptabel sind müssen Juristen entscheiden - zwingend erforderliche Infos wie Widerrufsbelehrung sind deshalb nicht gut in einer Scrollbox aufgehoben. Wenn ihr sie dennoch z.B. für AGB benutzen möchtet ist es sinnvoll den Inhalt noch einmal an anderer Stelle ohne Scrollbox anzubieten und ergänzend dahin zu verlinken (Links zu einer PDF für diesen Zweck sind bei eBay erlaubt wenn der Text auch schon im Angebot steht). Inhalte einer Scrollbox lassen sich nicht ausdrucken - auch andere Inhalte die druckfähig sein sollen müssen noch einmal in anderer Form angeboten werden. (Dies ist keine Rechtsberatung)

Scrollboxen lassen sich auf zwei verschiedene Arten herstellen - als textarea und als scrollbares div

Textarea

Die zunächst einfachste Form ist eine schlichte Textarea. Bei ihr wird dann zusätzlich die Breite als Anzahl der Zeichen in der Zeile angeben (cols) und die Höhe der Box als Anzahl der Zeilen (rows). Da in einer Textarea auch geschrieben werden kann ist es möglich dies auszuschließen indem readonly hinzugefügt wird. Das sieht dann so aus:

<textarea readonly cols="60" rows="5"> Inhalt der Box </textarea>

Und ergibt die allseits bekannte box. In einer textarea wird grundsätzlich nur schlichter Text angezeigt - deshalb wird sie auch für die Darstellung von Quelltext verwendet der kopiert werden kann aber nicht ausgeführt wird.

Trotz dieser Beschränkungen kann man die Box mit CSS auch an das Design der jeweiligen Seite anpassen. Auch die folgende Box ist eine Textarea:

HTML für diese Box:

<textarea class="farbig"> Hier der Inhalt </textarea>

Die Gestaltung der Box erfolgt über CSS:

<style type="text/css">

textarea.farbig {   border:4px dotted #c30c40; /* Rahmen um die Box - Dicke, Stil und Farbe veränderbar*/   width:95%; /* Breite in % */   height:10em; /* Höhe relativ zur Schriftgröße */   color:#244B74; /* Schriftfarbe */   font-family: Arial,sans-serif; /* Schriftart */   padding:8px; /* Textabstand zum Rand - Opera ignoriert den */   font-weight: bold; /* Schriftgewicht - fetter Text */   background:#ffffff url(http://domain.de/ordner/datei.jpg);/* Hintergrund */ }

</style>

Ich würde nicht wirklich ein Hintergrundbild für die Box empfehlen - das dürfte normalerweise für den Zweck nicht angemessen sein - möglich ist es aber schon eins einzufügen.

Achtung - trotz aller Gestaltungsmöglichkeiten solltet ihr diese Möglichkeit für eine Scrollbox nicht benutzen wenn ihr den Turbo Lister verwendet. Aus unerfindlichen Gründen fügt der TL in den Text der Box zusätzliche Leerzeilen ein und zieht den Text damit in die Länge. Deshalb ist in diesem Fall unbedingt die zweite Möglichkeit anzuraten.

Scroll-div

Diese Methode benutzt ein ganz normales div mit fester Höhe. Scrollbalken erhält man hier erst dann wenn der Inhalt größer ist als der Platz der zur Verfügung steht - je nach Inhalt horizontal und/oder vertikal.
Dafür wird in der CSS overflow:auto festgelegt. Die minimale Grundform sieht also so aus:

<div style="height:50px; overflow:auto;"> Hier der Inhalt </div>


Über die minimalen Festlegungen hinaus kann diese Scrollbox natürlich auch weitergehend formatiert werden - diese hier sind so gemacht:

<style type="text/css">
.scrolldiv {                             /* der Name kann frei gewählt werden */
    height:10.5em;                       /* Höhe - auch px oder andere Einheiten */
    overflow:auto;                       /* Regel für übergroßen Inhalt */
    border: 3px double #244B74;          /* Rahmen */
    padding:8px;                         /* Textabstand zum Rand */
    font-family:Arial,Verdana,sans-serif;/* Schriftart */
    color:#00009F;                       /* Schriftfarbe */
    background:#fff;                     /* Hintergrund */
}
.scrolldiv h4 {color:#007070;}           /* Schriftfarbe der Überschrift h4 */
</style>

<div class="scrolldiv"> Hier der Inhalt</div>

Und so sieht es mit viel Text drin aus:

Leseprobe

Nur ein Beispieltext ... Lorem ipsum dolor sit amet consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.

Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.


Der entscheidende Unterschied zu einer Textarea ist, daß diese scrollenden div mehr als reinen Text enthalten können. In der oberen Box zum Beispiel Absätze (<p>Text</p>) und eine Überschrift (<h4>Leseprobe</h4>)

Aber auch Bilder - wenn sie z.B. ein extremes Format haben - oder lange Tabellen für Versandkosten oder Kleidergrößen lassen sich in so einer Scrollbox unterbringen ohne viel Platz auf der Seite zu beanspruchen.

Der Besucher der Seite muß dann für die Zusatzinfos keine weitere Seite über einen Link öffnen - also das Angebot nicht verlassen.


Für Details bitte scrollen

Fototapete für Treppenhäuser, gläserne Fahrstühle ....



Versandkostentabelle

Land Gewicht Preis
Deutschland
Inland (sofern nicht anders angegeben)

bis 5 kg

7,95 Euro

5 bis 10 kg 9,95 Euro
jedes weitere kg
(max 31 kg)
1,00 Euro
EU Zone I
Schweiz, Belgien, Dänemark, Frankreich, Großbritannien, Italien, Luxemburg, Niederlande, Österreich bis 5kg 17,95 Euro
5 bis 10 kg 22,95 Euro
jedes weitere kg 2,00 Euro
EU Zone II
Finnland, Irland, Norwegen, Portugal, Schweden, Spanien, Greece, Polen, Ungarn, Tschechische Republik, Slowakische Republik bis 5kg 22,95 Euro
5 bis 10 kg 29,95 Euro
jede weitere angefangene10 kg 2,50 Euro

Überbreite Bilder werden im Internet Explorer allerdings nur gescrollt wenn auch für die Breite ein fester Wert eingegeben wird (hier: width: 500px) - % Werte werden vom IE nicht akzeptiert.

Statistik
heute: 9 
online: 2