Deine Eigene Scrollbox
Dies ist eine Anleitung zur eigen Gestaltung einer Scrollbox. Ein Feld auf den man den Text scrollen kann. Eine Scrollbox ist ganz leicht zu machen.
Du machst als erstes ein Block-Feld oder div-code wie ich es gerne nenne.
Danach gibst du dem Feld eine Breite mit
width und eine Höhe mit
height mit der Größen Angabe Pixel(px). In diesem Bereich wird dann dein Text angezeigt, den du später in deine Scrollbox einfügst. Damit sich das aber auch scrollen lässt musst du ein
overflow: auto einfügen. Du kannst auch statt auto scroll benutzen, doch mit Auto solltest du nichts falsch machen. Zum Schluss vergrößerst du noch den Abstand zwischen dem Rand und dem Text, damit es etwas besser zu lesen ist. Das machst du dann einfach mit
padding.
Und schon ist die Scrollbox fertig.
Jeder Befehl (Width, height, padding,...) wird mit einer Semikolon
; getrennt und die genaueren Angaben vom Befehl mit einem Doppelpunkt
: getrennt. Dies gilt für alle HTML-Style-Codes.
Dies ist ein Beispiel-Code für eine einfache Scrollbox.
- Code:
-
<div style="width: 470px; height: 170px; overflow: auto; padding: 5px;"> Text der in der Scrollbox stehen soll</div>
Wenn du gerne einen Rand noch in deiner Scrollbox haben möchtest musst du ein
border dafür einsetzen. Border ist in diesem Fall der Oberbegriff und du kannst Breite, Art und Farbe des Randes selbst bestimmen.
Wie folgt könnte es dann aussehen.
- Code:
-
border: 1px solid black;
Das '1px' ist die breite des Randes.
Das 'Solid' ist die Art. In diesem Fall ist es ein durchgehender Rand. Du kannst aber auch noch folgende arten machen:
Dotted = gepunktes
Dashed = gestrichelt
double = doppelt <- da musst du die Breite des Randes jedoch erhöhen, damit man das erkennt
Gibt aber noch mit google mehr zu finden :3
Die Angabe 'black' ist halt die Farbe des Randes.
Dies fügst du dann einfach entsprechend in den Div-Code mit ein. Achte jedoch darauf, dass es vor den Gänsefüßchen
" ist, ansonsten zerstörst du den Code.
Einen Hintergrund erreichst du mit
background. Dies ist wieder ein Überbegriff, so dass du verschiedene Funktionen einfügen kannst. Da kenne ich mich aber noch nicht genau aus, wie das alles so klappt.
Um jedoch einfach nur Farbe ein zufügen machst du folgenden Code:
- Code:
-
background: black;
Du kannst auch eine Hexacode-Farbe machen. Hexacode-Farben sind die Farben mit dem # (auf denen sechs Zeichen, die aus den Zahlen 0-9 und Buchstaben A-F bestehen folgen). Schwarz wäre im Heaxacode: #000000
Auf die Art hast du ganz viele Farben. Google kann dir ganz leicht auch mehr Farben zur Verfügung stellen, die das Forum z.B. nicht hat.
Ansonsten kannst du auch ein Bild einfügen mit dem Background.
- Code:
-
background:url('BILDLINK');
So würde das dann aussehen. Damit haste dann ein Bild im Hintergrund.
Als Hintergrundbild würde ich dir jedoch irgendwas empfehlen, was ziemlich schlicht ist. Ansonsten kann man vielleicht den Text nicht mehr in der Scrollbox lesen.
Hoffe du hast alles verstanden und diese Anleitung konnte dir helfen eine eigene Scrollbox zu erstellen.
Mit freundlichen Grüßen
Wildrose
