Die Vorlage

<link href='http://fonts.googleapis.com/css?family=Poiret+One|Cutive+Mono' rel='stylesheet' type='text/css'><style>.tabs { position: relative; clear: both;} .tab { float: left; width: 100px; } .tab label { width: 100px; font-family: cutive mono; font-size: 15px; color: #2f3133; text-transform: uppercase; background: #eee; opacity: 0.8; padding: 0px 10px 0px 10px; position: relative;} .tab [type=radio] { display: none; } .content { height: 300px; position: absolute; background-color: #eee; top: 20px; left: 0; right: 0; bottom: 0; overflow: auto; font-family: tahoma; font-size: 10px; color: #555; text-align: justify; padding: 10px} [type=radio]:checked ~ label { background-color: #2f3133; z-index: 2; color:#fff; } [type=radio]:checked ~ label ~ .content { z-index: 1; } .t1 { font-family: poiret one; font-style: italic; font-size: 18px; color: #2f3133; text-align: right; text-transform: uppercase; padding-right: 20px; } i1 { font-style: italic; color: #8e9699; font-family: tahoma; font-size: 10px}</style>

<center><div style="height: 570px; width: 500px; background-color: #eee; border-bottom: 10px solid #989ea3"><div style="width: 500px; height: 250px; background-image: url('LINK ZUM BILD 250x500px'); margin-bottom: -20px"></div><div class="tabs"><div class="tab"><input type="radio" id="tab-1" name="tab-group-1" checked><label for="tab-1">PERSONAL</label><div class="content"><div class="t1">VOR- UND NACHNAME</div>
...

<div class="t1">ALTER</div>
Körperliches Alter:
Seelisches Alter: [i]Bei Menschen einfach löschen[/i]

<div class="t1">RUF/TITEL</div>
...

<div class="t1">GESCHLECHT</div>
männlich, weiblich | sexuelle Orientierung

<div class="t1">RASSE</div>
[i]Nicht nur den Sammelbegriff angeben sonder auch die Unterart[/i]

<div class="t1">HERKUNFT</div>
...

<div class="t1">BERUF</div>
[i]Der aktuelle Beruf[/i]

</div></div><div class="tab"><input type="radio" id="tab-2" name="tab-group-1"><label for="tab-2">CHARACTER</label><div class="content"><div class="t1">Charakter</div>
... (Fließtext mind 1000 Zeichen)

<div class="t1">STÄRKEN UND SCHWÄCHEN</div>
<table style="font-size:11px;"><tr><td width="170px">• ...
• ...
• ...</td>
<td >• ...
• ...
• ...</td></tr></table>

<div class="t1">VORLIEBEN UND ABNEIGUNGEN</div>
<table style="font-size:11px;"><tr><td width="170px">• ...
• ...
• ...</td>
<td >• ...
• ...
• ...</td></tr></table>

<div class="t1">BESONDERE FÄHIGKEITEN</div>
...

</div></div><div class="tab"><input type="radio" id="tab-3" name="tab-group-1"><label for="tab-3">BODY</label><div class="content"><div class="t1">AUSSEHEN</div>
... (Fließtext mind. 1000 Zeichen)

<div class="t1">HAARFARBE</div>
...

<div class="t1">AUGENFARBE</div>
...

<div class="t1">GRÖßE</div>
...

<div class="t1">GEWICHT</div>
...

<div class="t1">BESONDERE MERKMALE</div>
...

</div></div><div class="tab"><input type="radio" id="tab-4" name="tab-group-1"><label for="tab-4">HISTORY</label><div class="content"><div class="t1">ERLERNTE BERUFE</div>
[i]Alles was der Charakter schon gemacht hat[/i]

<div class="t1">FAMILIE UND FREUNDE</div>
[b]Partner[/b]
... Name | Rasse | Alter | Beruf | Tod/Lebendig

[b]Nachkommen[/b]
Sohn: Name | Rasse | Alter | Beruf | Tod/Lebendig
Tochter: Name | Rasse | Alter | Beruf | Tod/Lebendig

[b]Eltern[/b]
Vater: Name | Rasse | Alter | Beruf | Tod/Lebendig
Mutter: Name | Rasse | Alter | Beruf | Tod/Lebendig

[b]Geschwister[/b]
Bruder: Name | Rasse | Alter | Beruf | Tod/Lebendig
Schwester: Name | Rasse | Alter | Beruf | Tod/Lebendig

[b]Weitere Verwandte[/b]
... Name | Rasse | Alter | Beruf | Tod/Lebendig
... Name | Rasse | Alter | Beruf | Tod/Lebendig

[b]Freunde[/b]
... Name | Rasse | Alter | Beruf | Tod/Lebendig
... Name | Rasse | Alter | Beruf | Tod/Lebendig

[b]Bekannte[/b]
... Name | Rasse | Alter | Beruf | Tod/Lebendig
... Name | Rasse | Alter | Beruf | Tod/Lebendig

<div class="t1">VERGANGENHEIT</div>
[i]Hier genügen Stichpunkte mit den Jahres Angaben und dem was der Charakter in dieser Zeit getan oder erlebt hat. Fließtexte sind jedoch auch erlaubt.[/i]

• ...
..
• ...
...
• ...
...
• ...
...
• ...
...
• 2030
...

</div></div><div class="tab"><input type="radio" id="tab-5" name="tab-group-1"><label for="tab-5">OTHER</label><div class="content"><div class="t1">AVATAR</div>
[i]Name und Anime[/i]

<div class="t1">ERSTACCOUNT?</div>
[i]Ja / Nein[/i]

<div class="t1">ANDERE ACCOUNTS</div>
[i]Kurz die Namen hier rein[/i]

<div class="t1">REGELN GELESEN?</div>
[i]Regelword einfügen[/i]

<div class="t1">DEIN WEG ZU UNS</div>
[i]Wie hast du zu uns gefunden[/i]

<div class="t1">DEIN NAME</div>
[i]OPTIONAL[/i]

<div class="t1">WEITERGABE DES CHARAKTERS?</div>
...

<div class="t1">INAKTIVITÄT</div>
[i]Wie kann man dich erreichen?[/i]

</div></div></div></div></div><i1>code by <a href="http://peregrine.nobel-design.net/member.php?action=profile&uid=57">realis</a> @ TCP</i1></div></center>