HTML Vorlagen für eure Gesuche

[Holden Santvoort]

Hier haben wir einige Steckbriefvorlagen vorbereitet, die du benutzen kannst um dein Gesuch optisch ein wenig "aufzuhübschen". Alle Vorlagen sind dabei so gestaltet, dass sie in jedem Forenstyle eine gute Lesbarkeit garantieren. Das HTML, das für die Formatierung benötigt wird, wurde so gering wie möglich gehalten. Dennoch sollten HTML-Grundkenntnisse bei dir vorhanden sein, wenn du sie benutzen möchtest. Solltest du überhaupt nicht mit HTML vertraut sein, raten wir von der Benutzung einer Vorlage ab, weil dann sehr leicht Fehler passieren könnten. Bei kleinen Fehlern oder Schwierigkeiten mit dem Code, melde dich einfach oder fang einfach noch mal neu an die Vorlage auszufüllen.

Wenn du dich gut mit HTML auskennst, kannst du gern auch Modifizierungen an unseren Vorlagen vornehmen. Achte dabei nur darauf, dass der Code keine Fehler verursacht und dein Gesuch gut lesbar ist. Einige Farbänderungen sind in den Vorlagen bereits vorgesehen und deshalb einfach vorzunehmen. Falls du gern einen Banner oder andere Grafiken für dein Gesuch haben möchtest, aber selbst keine erstellen kannst, kann dir in diesem Thread weitergeholfen werden.

Selbstverständlich kannst du dein Gesuch aber auch ganz ohne Formatierung posten. Wir haben keine festen Vorgaben, was den Inhalt deines Gesuchs angeht, hier allerdings ein paar Tipps zusammengestellt, die dir beim Schreiben weiterhelfen können.

Unsere Vorlagen

• Schlicht und Schmal, ans Forendesign angepasst, für kürzere Texte
• Schlicht und Breiter, ans Forendesign angepasst, für längere Texte
• Klein und Kompakt, dunkler Text auf hellem Hintergrund, für kürzere Texte
• Dunkel und Hölzern, heller Text auf dunklem Hintergrund mit Holzmuster, für längere Texte
• Hell mit Mosaik, grauer Text auf hellem Hintergrund, mit Mosaik im Kopfbereich, für längere Texte
• Hell mit Kreisen, dunkler Text auf hellem Hintergrund, mit runden Bildern, für kürzere Texte

Jede Vorlage besteht aus einem Code für das "Grundgerüst" der Vorlage und weiteren Codeschnipseln für Elemente, die du zusätzlich in das Grundgerüst einfügen kannst. Falls du ein Element nutzen möchtest, das in einer Vorlage noch nicht definiert ist, meld dich einfach bei mir, dann reiche ich den Code dafür noch nach. Alle Stellen, an denen ihr etwas ändern sollt, sind in Großbuchstaben geschrieben.

Der Text, der in der Vorlagenvorschau steht, erklärt die jeweilige Vorlage und gibt weitere Hinweise zu ihrer Nutzung!

[Holden Santvoort]

Schlicht und Schmal

Deine Überschrift steht hier

Unterüberschrift

Diese Vorlage sieht keine Hintergrundfarbe und kein Hintergrundbild vor, sondern benutzt Standard-Hintergrund- und Schriftfarbe des Boardstyles. Auf diese Weise ist sie unaufdringlich und passt sich gut ein, macht aber trotzdem ein bisschen mehr her als ein Gesuch ganz ohne Formatierung. Dein Gesuch bekommt einen kleinen, dezenten Rahmen verpasst und dank ihrer geringen Breite eignet sich die Vorlage sehr gut für kurze, aufs wesentliche reduzierte Texte.
Wenn du dein Gesuch mit weiteren Linien noch ein wenig strukturieren möchtest, kannst du das mit hr-Tags tun.

---

Unterüberschrift

Auch in dieser Vorlage kannst du ein Bild vom Text umfließen lassen. Das sieht dann so aus. Mit den Klassen "bild_rechts" oder "bild_links" bestimmst du, auf welcher Seite das Bild stehen soll. Ein umflossenes Bild in dieser Vorlage sollte eher klein und nicht zu breit sein, da sonst der Text zu sehr zusammengequetscht wird.

Noch eine Unterüberschrift

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog.

Das Grundgerüst

Code:

<div id="gesuch_simplesmall">
<img src="ADRESSE ZU DEINEM BANNERBILD" class="banner" />
<h1>HAUPTÜBERSCHRIFT</h1>
<h2>UNTERÜBERSCHRIFT</h2>
DEIN TEXT

FÜGE WEITERE ELEMENTE HIER EIN
</div>

Ein Absatz mit umflossenem Bild

Code:

<h2>UNTERÜBERSCHRIFT</h2>
<img src="ADRESSE DEINES BILDES" class="bild_rechts" /> DEIN TEXT

Eine Trennlinie

Code:

<hr>

[Holden Santvoort]

Schlicht und Breiter

Deine Überschrift

Ein Zusatztext für deine Überschrift

Deine Unterüberschrift

Diese Vorlage sieht keine Hintergrundfarbe und kein Hintergrundbild vor, sondern benutzt Standard-Hintergrund- und Schriftfarbe des Boardstyles. Auf diese Weise ist sie unaufdringlich und passt sich gut ein, macht aber trotzdem ein bisschen mehr her als ein Gesuch ganz ohne Formatierung. Sie ist für Gesuche mit längeren Texten gedacht, da die Zwischenüberschriften bei zu wenig Text ein wenig massig wirken. Dem kannst du allerdings auch entgegenwirken, indem du ein paar Leerzeilen zwischen deine Absätze machst.

Deine Unterüberschrift

Auch Bilder im Text zu platzieren ist kein Problem, wenn du ihnen die Klasse "bild_rechts" oder "bild_links" mitgibst, bestimmst du damit auf welcher Seite sie stehen werden.

Deine Unterüberschrift

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum.

Das Grundgerüst

Code:

<div id="gesuch_simplewide">
<img src="ADRESSE ZU DEINEM BANNERBILD" class="banner" />
<h1>HAUPTÜBERSCHRIFT</h1>
<h3>KLEINER ZUSATZTEXT FÜR DEINE ÜBERSCHRIFT</h3>

<h2>UNTERÜBERSCHRIFT</h2>
DEIN TEXT

FÜGE WEITERE ELEMENTE HIER EIN
</div>

Ein Absatz mit umflossenem Bild

Code:

<h2>UNTERÜBERSCHRIFT</h2>
<img src="ADRESSE DEINES BILDES" class="bild_links" /> DEIN TEXT

[Holden Santvoort]

Klein und Kompakt

Platz für eine Überschrift

Eine Zwischenüberschrift

Diese kleine Vorlage eignet sich gut für Gesuche, die kurz und knapp gehalten und auf das Wesentliche beschränkt sind. Kürzere Texte lassen sich aufgrund der kleinen Breite dieser Vorlage angenehm lesen. Du kannst die Vorlage natürlich auch ohne Banner benutzen. Die Vorlage ist so geschrieben, dass du die Hintergrundfarbe der Überschrift und die des kleinen Abschlussstriches unten (hier grün) ändern kannst. Tausche einfach den Farbcode des Attributs "background-color" (hier #c9d562) gegen einen anderen Farbcode aus. Es bietet sich an, eine Farbe aus deinem Bannerbild zu benutzen oder eine knallige Farbe als Kontrast zu einem Schwarz-Weiß-Bild.

Noch eine Zwischenüberschrift

Auch in dieser Vorlage kannst du ein Bild vom Text umfließen lassen. Das sieht dann so aus. Mit den Klassen "bild_rechts" oder "bild_links" bestimmst du, auf welcher Seite das Bild stehen soll. Ein umflossenes Bild in dieser Vorlage sollte eher klein und nicht zu breit sein, da sonst der Text zu sehr zusammengequetscht wird.

Noch eine Zwischenüberschrift

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum.

Noch eine Zwischenüberschrift

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog.

Das Grundgerüst

Code:

<div id="gesuch_mini">
<img src="ADRESSE ZU DEINEM BANNERBILD" class="banner" />
<h1 style="background-color:#c9d562;">HAUPTÜBERSCHRIFT</h1>
<h2>UNTERÜBERSCHRIFT</h2>
DEIN TEXT

FÜGE WEITERE ELEMENTE HIER EIN

<div style="background-color:#c9d562;" class="abschluss"></div></div>

Ein Absatz mit umflossenem Bild

Code:

<h2>UNTERÜBERSCHRIFT</h2>
<img src="ADRESSE DEINES BILDES" class="bild_rechts" /> DEIN TEXT

[Holden Santvoort]

Dunkel und Hölzern

Deine Überschrift hier

Hier kann noch ein Zusatz zu deiner Überschrift stehen, ein Zitat, ein Songtext etc. Wenn du diesen Zusatz nicht brauchst, kannst du ihn natürlich entfernen.

Eine Unterüberschrift

Auch diese Vorlage bietet viel Platz und eine angenehme Leseweite für wortreiche Gesuche. Überschriften und Unterüberschriften sind so angelegt, dass du sie dekorativ kombinieren kannst. Durch den Holzmusterhintergrund kommt die Vorlage auch ohne Banner ganz gut aus, ist dann aber relativ neutral. Genau wie Schwarz-Weiß-Bilder verträgt diese Vorlage aber auch knallige Schriftfarben und bunte Bilder als Kontrast sehr gut. Wenn du dein Gesuch mit weiteren Linien noch ein wenig strukturieren möchtest, kannst du das mit hr-Tags tun.

---

Noch eine Unterüberschrift

Auch Bilder im Text zu platzieren ist kein Problem, wenn du ihnen die Klasse "bild_rechts" oder "bild_links" mitgibst, bestimmst du damit auf welcher Seite sie stehen werden. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog.

Noch eine Unterüberschrift

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog.

Das Grundgerüst

Code:

<div id="gesuch_wood"><div id="woodinner">
<img src="ADRESSE ZU DEINEM BANNERBILD" / class="banner">
<h1>HAUPTÜBERSCHRIFT</h1>
<h3>KLEINER ZUSATZTEXT FÜR DEINE ÜBERSCHRIFT</h3>

<h2>UNTERÜBERSCHRIFT</h2> DEIN TEXT

FÜGE WEITERE ELEMENTE HIER EIN

</div></div>

Ein Absatz mit umflossenem Bild

Code:

<h2>UNTERÜBERSCHRIFT</h2>  <img src="ADRESSE DEINES BILDES" class="bild_links" /> DEIN TEXT

Eine Trennlinie

Code:

<hr>

[Holden Santvoort]

Hell mit Mosaik

		Hier ist Platz für einen kleinen Text. Das kann zum Beispiel eine kurze Zusammenfassung deines Gesuchs sein, eine Überschrift, ein Zitat oder ein Songtext. Sei kreativ! Die Boxen rund um den Text kannst du nach Belieben mit Fotos, Mustern und Farbflächen füllen. Das Verhältnis zwischen Fotos und Nicht-Fotos sollte allerdings ausgewogen sein, damit das Gesamtbild nicht zu konfus wird. Diese große Box sollte möglichst gut mit Text gefüllt sein, ist der Text zu lang, werden Teile davon abgeschnitten.

Deine Überschrift hier

Eine Unterüberschrift

In dieser Vorlage sind auch wortreiche, ausführliche Gesuche gut aufgehoben. Das besondere an dieser Vorlage ist das Mosaik im oberen Bereich. Es wird durch eine Tabelle erzeugt und kann relativ einfach verändert werden. Die Hintergrundfarbe der Hauptüberschrift (pink) kannst du ändern, indem du den aktuellen Farbcode (#ce3066) gegen deinen eigenen austauschst. Da die Unterüberschriften in dieser Vorlage eher dezent gehalten sind, wird der Fließtext durch eine Einrückung davon abgehoben. Falls du diese Einrückungen nicht möchtest, entferne einfach die p-Tags.

Eine Unterüberschrift

Wenn dir die Bilderplatzhalter im oberen Bereich noch nicht genug sind, hast du auch die Möglichkeit Bilder von deinem Gesuchtext umfließen zu lassen. Es bietet sich an Bilder zu nutzen, die ebenfalls quadratisch sind oder genauso groß wie die Bilder im Mosaik (100x100px), dann passt das sehr schön zusammen. Mit den Klassen "bild_rechts" oder "bild_links" bestimmst du, auf welcher Seite das Bild stehen soll.

Eine Unterüberschrift

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum.

Das Grundgerüst

Code:

<div id="gesuch_squares">
<div id="squaresbanner"><table cellspacing=0 cellmargin=0 cellpadding=5><tr>
<td><img src="ADRESSE DEINES BILDES" /></td>
<td><img src="http://abload.de/img/muster2okjry.png" /></td>
<td><img src="ADRESSE DEINES BILDES" /></td>
<td><img src="ADRESSE DEINES BILDES" /></td>
<td><img src="http://abload.de/img/muster1j2jux.png" /></td>
</tr><tr>
<td><img src="http://abload.de/img/muster1j2jux.png" /></td>
<td><img src="ADRESSE DEINES BILDES" /></td>
<td valign=top colspan=2 rowspan=2><span>TEXT IM MOSAIK
</span></td>
<td><img src="ADRESSE DEINES BILDES" /></td>
</tr><tr>
<td><img src="ADRESSE DEINES BILDES" /></td>
<td><img src="http://abload.de/img/muster2okjry.png" /></td>
<td><img src="http://abload.de/img/muster2okjry.png" /></td>
</tr></table></div>
<h1  style="background-color:#ce3066;">HAUPTÜBERSCHRIFT</h1>
<h2>UNTERÜBERSCHRIFT</h2>
<p>DEIN TEXT
</p>

FÜGE WEITERE ELEMENTE HIER EIN

</div>

Ein Absatz ohne Bild

Code:

<h2>UNTERÜBERSCHRIFT</h2>
<p>DEIN TEXT
</p>

Ein Absatz mit umflossenem Bild

Code:

<h2>UNTERÜBERSCHRIFT</h2>
<p><img src="ADRESSE DEINES BILDES" class="bild_rechts" /> DEIN TEXT
</p>

[Holden Santvoort]

Hell mit Kreisen

Hier ist Platz für deine Überschrift

Deine Unterüberschrift
Diese Vorlage eignet sich bestens um wenig Text in Szene zu setzen, denn es gibt dem Inhalt viel Luft zum Atmen. Das Layout lebt von den runden Bilder und sollte deshalb auch möglichst nicht ohne Headerbild genutzt werden. Alle Bilder werden übrigens automatisch rund, du musst also keine runden Bilder einfügen. Du kannst die Hintergrundfarbe des Kopfbereichs und die Farben der Unterüberschriften ändern indem du den Farbcode des jetzigen Blaus (suche nach #329AA5) gegen deinen eigenen Farbcode austauschst. Damit ein Absatz eingerückt und entsprechend formatiert wird, muss er in einem p-Tag stehen. Absätze können mit oder ohne Bild eingerückt sein.

Deine Unterüberschrift
Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum.

Deine Unterüberschrift
Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum.

Das Grundgerüst

Code:

<div id="gesuch_rund">
<div class="head" style="background-color:#329AA5;"><h1>HAUPTÜBERSCHRIFT</h1>
<img src="ADRESSE ZU DEINEM BANNERBILD" /></div>
<p><img src="ADRESSE DEINES BILDES" /> <span style="color:#329AA5;">UNTERÜBERSCHRIFT</span>  
DEIN TEXT</p>

FÜGE WEITERE ELEMENTE HIER EIN

</div>

Ein Absatz ohne Bild

Code:

<p><span style="color:#329AA5;">UNTERÜBERSCHRIFT</span>
DEIN TEXT
</p>

Ein Absatz mit umflossenem Bild

Code:

<p><img src="ADRESSE DEINES BILDES" /> <span style="color:#329AA5;">UNTERÜBERSCHRIFT</span>
DEIN TEXT
</p>