Forum Wegweiser Mitglieder FAQ Suche Regelwerk Registrierung
Liebe Krieger groß und klein, Regeln müssen immer sein. Drum bitten wir einen Besuch beim Sonnenaltar zu begehn, um die Regeln zu lesen und zu verstehn. Meldet ihr euch neu hier an- endet euer Name nun mit einem -Pakal hinten dran. Haltet euch stets an diese göttlichen Schriften, damit nicht die Götter schlecht über euch richten.
Diese liebenswerten User helfen dir bei jedem Problem was in ihrem Bereich der Möglichkeiten liegt.

Klick auf den Button um sie näher kennen zu lernen!

  Scrollbox

©Rhiannon
Mi Jun 08, 2016 9:55 pm
Rhiannon
Obsidianschmied
Anzahl der Beiträge : 870
Anmeldedatum : 30.04.16

 Scrollbox  Empty
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



http://warriors-cats-rpg.forumieren.com/
©Jaysong
Mo Jun 13, 2016 5:58 pm
Jaysong
Jadeträger
Anzahl der Beiträge : 1159
Anmeldedatum : 23.12.15

 Scrollbox  Empty
Nochmals ein grosses Dankeschön für die Mühe, die du dir gegeben hast!



©Gast
Di Nov 29, 2016 8:21 pm
Anonymous
Gast

 Scrollbox  Empty
Hallo @Rotpanda, ich hoffe, ich bin hier richtig.

Und zwar... mit border-width ist es ja glaube ich möglich einen runden Rand zu erstellen. Geht es dann auch eine runde Scrollbox zu coden?

Viele Grüße, Arya.



©Rhiannon
Di Nov 29, 2016 10:20 pm
Rhiannon
Obsidianschmied
Anzahl der Beiträge : 870
Anmeldedatum : 30.04.16

 Scrollbox  Empty
Man kann mit Border-radius auf jeden Fall einen machen. Mit -width kenn ich mich nicht so aus. Sollte aber auch funktionieren^^

Mit freundlichen Grüßen
Auf Ewig und immer während
Hochachtungsvoll
Rotpanda



http://warriors-cats-rpg.forumieren.com/
©Gast
Mi Nov 30, 2016 4:33 pm
Anonymous
Gast

 Scrollbox  Empty
border-radius meinte ich. ^^ Aber ich wollt eigentlich wissen, ob man eine runde Scrollbox erstellen kann und nicht nur den Rahmen. (;



©Gast
Mi Nov 30, 2016 6:12 pm
Anonymous
Gast

 Scrollbox  Empty
Ich hoffe ich darf hier auch schreiben? o:

@Arya jup das geht :3

TEXT


´Das wär jetzt mal ein kleines Beispiel, der Code dazu ist der hier:

Code:
<div style="overflow: auto; width: 200px; height: 200px; text-align: center; border: 1px solid white; border-radius: 100px;">TEXT</div>

Einfach bei den Code ein border-radius einfügen und schon hast du eine runde Scrollbox ^^

Ich hoffe das war das was du gemeint hast? o:

LG



©Gast
Mi Nov 30, 2016 6:38 pm
Anonymous
Gast

 Scrollbox  Empty
Danke dir. (:
Ich werde es gleich ausprobieren. (;



©Gast
Mi Nov 30, 2016 6:43 pm
Anonymous
Gast

 Scrollbox  Empty
Kein Problem ^^ Falls es damit Probleme gibt kannste auch gerne per PN schreiben :D



©Gesponserte Inhalte

 Scrollbox  Empty



Seite 1 von 1


Finsterkatzen :: Probleme :: Obsidianschmiede :: Codes für Beiträge