Vorlage ~ Beziehungen

possessed by a demon

Name/Spruch

Familie

MUTTER: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.

VATER: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.

Freunde

Bekannte

Schwärmereien & Geliebte

Gehasste

Vergangenheit

Code:: <center><link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:700' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Codystar' rel='stylesheet' type='text/css'><style text="text/css"> .box {font-family: 'Abel', sans-serif; font-size: 14px; text-align: justify; width:450px; padding: 15px 15px; background-color: #000000; border-right: 10px solid #597699; border-left: 10px solid #597699; } .nameabc {font-family: 'Cabin Sketch', cursive; font-size: 50px; text-align: center; margin-top: 10px; line-height: 95%;} .head {font-family: 'Codystar', cursive; font-size: 20px; text-align: left; border-bottom: 1px solid grey;} .head2 {font-family: 'Codystar', cursive; font-size: 20px; text-align: right; border-bottom: 1px solid grey;}</style>

<div class="box"><img src="http://imageshack.us/a/img845/7370/rtam.jpg" width="450px">
<div class="nameabc">Name/Spruch</div>

<div class="head">Familie</div>
<img style="float: left; margin-right: 10px;" src="http://imageshack.us/a/img837/4992/eq1t.jpg" width="90px" height="120px">[b]MUTTER:[/b] Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.<br clear="all">
<img style="float: right; margin-left: 10px;" src="http://imageshack.us/a/img837/4992/eq1t.jpg" width="90px" height="120px">[b]VATER:[/b] Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.<br clear="all">

<div class="head2">Freunde</div>

<div class="head">Bekannte</div>

<div class="head2">Schwärmereien & Geliebte</div>

<div class="head">Gehasste</div>

<div class="head2">Vergangenheit</div>

</div></center>

possessed by a demon

Sowohl die Farben als auch die Überschriften sind frei variierbar. Wer etwas ändern möchte, aber nicht weiß wie, der kann sich gerne an das Team wenden.

Eine neue Person mit dem Bild auf der linken Seite fügt ihr mit folgendem Code hinzu:

Code:: <img style="float: left; margin-right: 10px;" src="http://imageshack.us/a/img837/4992/eq1t.jpg" width="90px" height="120px">[b]NAME:[/b] Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.<br clear="all">

Für eine Person mit dem Bild auf der rechten Seite, nutzt ihr folgenden Code:

Code:: <img style="float: right; margin-left: 10px;" src="http://imageshack.us/a/img837/4992/eq1t.jpg" width="90px" height="120px">[b]NAME:[/b] Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.<br clear="all">

_____________________________________________________________________________________

Eine kurze Erklärung zu obigem Code:

Dieser Code ist für das kleine Bild verantwortlich, welches die Maße 90x120px haben sollte, da es sonst verzerrt und auf diese Maße gebracht wird. Das Attribut 'float' sorgt hierbei dafür, dass der Text neben dem Bild geschrieben werden kann. 'margin-right' bzw. 'margin-left' sorgt für den kleinen Abstand zwischen Bild und Text. 'width' und 'height' sorgen dafür, dass das Bild in jedem Fall die gewünschten Maße hat.

Code:: <img style="float: left; margin-right: 10px;" src="http://imageshack.us/a/img837/4992/eq1t.jpg" width="90px" height="120px">

Das pseudolateinische BlaBla hat keine weitere Bedeutung und ist einfach nur ein Platzhalter für den kleinen Text den ihr am besten zu jeder Person schreiben solltet.
Am Ende steht noch ein kurzer Code, dieser sorgt lediglich dafür, dass ihr danach unterhalb des Bildes weiter schreiben könnt und nicht weiterhin neben dem Bild schreibt.

Code:: <br clear="all">

» Vorlage ~ Gesuche
» Beziehungen und Verbindungen von Steve

Vorlage ~ Beziehungen

Vorlage ~ Beziehungen

Ähnliche Themen

Ähnliche Themen