Ihr wollt Euren Steckbrief optisch etwas aufhübschen? Etwas mehr vom Charakter in diesen widerspiegeln und einige Bilder einbauen? Dann findet Ihr hier Codes, die Ihr verwenden dürft. Es wird genau erklärt, wie man einen Code einbauen und anpassen kann. Solltet Ihr noch Codewünsche haben oder Fragen, könnt Ihr Euch gerne an das Team wenden.

Es werden die Grundlagen für die Codes erklärt. Kurz und knapp, nur das wesentliche. Dies sollen Hilfen sein, die auch ein Code-Anfänger schaffen kann. Wer wirklich ausgeklügelte Codes will, der soll sich bitte selbstständig damit befassen und etwaige Hilfsseiten, wie SELFHTML, aufsuchen.

Hinweis: Die Bilder bei den Erklärungen sind oft verkleinert, um Platz zu sparen. Wer das Bild in voller Größe sehen möchte, muss es einmal als Extra-Tab öffnen.

Beinhaltet:
• Bilder
- Bilder seitlich am Text
- Bilder über den Rand
- Bilder als Bereich-Banner

• Schriften
- Schrift-Familien / Fonts
- Schriftgrößen
- Schriftfarben


Bilder

margin
• sagt aus, wie der Abstand um das Objekt herum ist. Würde man also angeben, margin: 5px, hätte das Objekt nach oben, rechts, unten und links je einen Abstand von 5px.

• wenn man "margin: 5px" angibt, ist der Abstand überall gleich. Doch kann man auch die Abstände nach oben, rechts, unten und links einzelnd bestimmen. Dies sähe dann so aus, wenn man nur oben und unten einen Abstand möchte: "margin: 5px 0px 5px 0px". Wichtig ist, dass die Reihenfolge dieser Werte so gelesen werden: oben, rechts, unten und links. Praktisch so, wie man die Uhr liest - als kleine Eselsbrücke.

• mit margin kann man ebenso den Abstand zu anderen Objekten verringern, durch Minuswerten. So könnte man einen Steckbrief zu gestalten, dass ein Bild über den Rand hinweg geht. Wer also beispielsweise möchte, dass ein Bildlinks über den Rand steht, muss dies angeben: "margin: 0px 0px 0px -20px".

• der Abstand von dem Textinhalt in den Steckbriefen zu der Box eines einzelnen Bereichs (Aussehen, Allgemeines, etc.) beträgt 10px. Wenn Ihr also direkt am Rand ansetzen wollt, müsst Ihr mit -10px arbeiten oder mehr, wenn es über den Rand soll.

float
• sagt aus, wie ein Objekt "fließt/floatet". Wenn Ihr also beispielsweise schreibt, float: left, dann wird das Objekt/Bild nach links versetzt und alles weitere "fließt" um dieses Bild herum, ohne es zu verschieben. So könnt Ihr perfekt Objekte neben einen Text setzen, ohne dass komische Lücken entstehen. Am einfachsten sind hier left = links & right = rechts.

height
• bestimmt die Höhe eines Objekts. Würdet Ihr also schreiben, height: 100px, dann würde das Objekt in dieses Maß gezwungen werden.

• wenn Ihr verschiedene Bilder einbaut, die aber nicht zwingend die selbe Größe haben müssen, ABER ein Maß nicht überschreiten sollen, gibt es auch einen Code. max-height. Wenn Ihr also schreibt, max-height: 200px, kann kein Bild höher als 200px werden. Bilder von 190px werden davon nicht beeinflusst, aber wenn eins 210px wäre, würde es automatisch verkleinert werden.

• Wichtig - hier kann es zu Verzerrungen in der Optik kommen. Zudem nutzt bitte nicht den Code, um ein 1500px hohes Bild auf 400px runterzuskalieren. Dies frisst unnötig Internet.

width
• hier gilt dasselbe, wie beim height. Nur, dass hier die Breite beeinflusst wird. Auch max-width ist hier möglich.


Bild seitlich am Text

Besonders schön beim Aussehen, wenn man Ganzkörper-Bilder des Charakters einfügen möchte, aber auch für kleinere Details. Wer solch einen Effekt haben möchte, muss mit float & margin arbeiten. Hier findet Ihr den Roh-Code, ohne Maßeinheiten.

Code:

<img src="LINK" style="float: ; margin: 0px 0px 0px 0px;">

Bild links, Abstand zum Text:
float: left; margin: 0px 10px 0px 0px;

Bild links, Abstand zum Text & über den Rand links:
float: left; margin: 0px 10px 0px -10px;

Bild rechts, Abstand zum Text:
float: right; margin: 0px 0px 0px 10px;

Bild rechts, Abstand zum Text & über den Rand links:
float: right; margin: 0px -10px 0px 10px;


Mit der Bildergröße variieren
Wenn Ihr den selben Effekt haben wollt, aber feststellt - das Bild ist mir 50 Pixel zu hoch! -, dann müsst Ihr es nicht direkt wieder zuschneiden gehen. Sondern ein height-Code hilft Euch dabei, das Bild ein wenig zu verkleinern.

Code:

<img src="LINK" style="float: left; margin: 0px 0px 0px 0px; height: px;">

Banner einbauen
Ihr wollt einen schönen, kleinen Banner im Steckbrief haben? Ob ganz oben, mitten in einem Text oder als Abschluss eines Bereichs? Dann geht dies hier!



• wenn Ihr solch einen Banner einbauen wollt, muss er 450px breit sein!

Banner oben

Code:

<img src="LINK" style="margin: -10px -10px 5px -10px;">

Banner unten

Code:

<img src="LINK" style="margin: 5px -10px -10px -10px;">

Banner mittig

Code:

<img src="LINK" style="margin: 5px -10px 5px -10px;">

Schriften
Hallo, ich bin Unica One! Schön Euch kenennzulernen! Ich bin Schriftgröße 15 und blau!
Und ich bin Yellowtail! Ich freu mich hier zu sein! Ich bin Schriftgröße 17! UND ICH BIN P I N K!
Ich bin Julius Sans One, 14px, und hab keine Lust hier zu sein.

Wie Ihr seht, kann man schön mit Schriftarten spielen. Sowohl im Schreibstil, in der Farbe und in der Größe. Natürlich gibt es noch mehr, aber dies sind wohl die drei simpelsten Möglichkeiten. Wichtig ist - Schriftarten haben oft eine verschiedene Größe. Wenn man also 3 verschiedene Schriftarten nutzt und alle auf 15px setzt, heißt dies nicht, dass sie dann wirklich gleichgroß sind. Jede Schriftart ist da etwas eigen.

font-family
• sagt die Schriftart/-familie aus, die man nutzt. Es gibt viele verschiedene und man findet sie auf allerhand Internetseiten. Die bekannteste ist wohl https://fonts.google.com/ und dort kann man die Schriften kostenlos und hier im Forum nutzen.

Um eine font-family einzubauen, benötigt Ihr diesen Code:

Code:

<link href="https://fonts.googleapis.com/css?family=SCHRIFTART" rel="stylesheet">

Ohne diesen wird eine Schriftart nicht richtig angezeigt. Wenn doch, haben wir die zufällig in das Forumdesign generiert, aber grundsätzlich ist dies nicht der Fall. Wenn Ihr also eine bestimmte Font nutzen wollt, benötigt Ihr diesen Code.

Diesen setzt Ihr am besten nach ganz noch unten oder oben vom Beitrag. Dort, wo "Schriftart" steht, muss die font-family hin, die Ihr nutzen wollt. Also als Beispiel:

Code:

<link href="https://fonts.googleapis.com/css?family=Unica One" rel="stylesheet">

Wenn Ihr mehrere Schriften einbauen wollt, müsst Ihr den Code nicht neu einfügen, sondern könnt ihn mit einem | erweitern. Ein weiteres Beispiel:

Code:

<link href="https://fonts.googleapis.com/css?family=Unica One|Julius Sans One" rel="stylesheet">

font-size
• bestimmt die Größe der Schrift. Es gibt verschiedene Möglichkeiten, einen Wert anzugeben, doch am Einfachsten ist per Pixel = px.

Code:

font-size: 15px

color:
• hier stellt Ihr die Schriftfarbe ein. Auch hier gibt es verschiedene Möglichkeiten einzufärben, doch auch hier der einfachste Weg, per HEX-Code. HEX-Codes findet Ihr in unserer Farbtabelle des Eingabefelds, im Internet oder in Grafikprogrammen auf Eurem Rechner.

Hier ein Beispiel mit schwarz - #000000

Code:

color: #000000

Anders als die anderen Schrift-Codes muss hier kein "font" vor. Zwar geht auch "font-color", aber nur "color" ist einfach kompakter.


Somit sähe ein ganzer Schriftcode so aus:

Code:

<span style="font-family: ; font-size: px; color: #;">Inhalt</span>

Und einmal ausgefüllt!

Code:

<span style="font-family: Yellowtail; font-size: 16px; color: #006600;">Inhalt</span>