Gerifor got their homepage at Neopets.com

/> a:link, a:visited, a:visited{color:c36939;text-decoration:none} a:hover{color:#794123} />

Schön, dass du meine PP besuchst.
Hier versuche ich verschiedene PP-lays zu erklären, damit auch Leute ohne besondere HTML/Css Kenntnisse die Möglichkeit haben, sich was aufzubauen.

Vorweg möchte ich noch ein paar Sachen sagen:

Die Navigation führt euch zu den verschiedenen Abschnitten der Page. Auf den Seiten findet ihr dann weitere Links. Unter dem Punkt "Navigation" ist alles aufgelistet, was ihr auf dieser Page finden könnt.
Ihr müsst euch durch die Navigation klicken, um zu den verschiedenen Sachen zu gelangen
- Ich habe alle PP-Layouts, die hier zu finden sind selber gecodet, oder um Erlaubniss gefragt, die Codes hier erklären zu dürfen.
Ich verlange keine Verlinkung zu dieser PP, freue mich dennoch, wenn ihr es trotzdem tut.
Wenn ihr eine PP (Layout PP etc) mit den Lays machen wollt, die hier zu finden sind, dann dürft ihr es (verlinkt mich dann aber auf der PP). Wenn neben dem Code steht, dass er nicht für sowas genutzt werden soll, versteht das bitte. Wie gesagt, ich frage auch Andere, ob ich ihre Codes erklären darf.
(Dazu zählt auch das Anbieten, mehrere PP-Layouts zu machen und dazu Codes bzw. Grafiken dieser Seite zu nutzen. Gebt diese Seite dann im Thread an, danke.)
Es kann sein, dass meine Codes andern bekannten PPs ähnlich sehen/sind, das heißt aber nicht, dass ich sie geklaut habe. Wenn ich einen Header habe und darunter ne Tabelle oder sonst was.. Das ist keine Kunst, eher Zufall wenn das passiert.
Wenn ihr trotzdem ein Problem damit habt, schreibt mir eine Mail und ich gucke es mir an.
Viel Spass beim durcharbeiten!

Unter Grundwissen habe ich die wichtigsten HTML-Befehle aufgelistet.
Und beim Schlusswort sind u.a. Banner für meine Page sowie Awards (wenn ich welche bekommen sollte) und eine Aufzählung von Leuten, die mir bei der Page geholfen haben.

NEOPETS, Charaktere, Logos, Namen und alle zugehörigen Zeichen sind geschützte Marken von Neopets, Inc., © 1999-2009. ® beschreibt Reg. US Pat. & TM Office. Alle Rechte vorbehalten. Datenschutz | Sicherheitstipps | Kontakt | Über uns | Presse-Dokumentation Mit der Nutzung dieser Webseite akzeptiert der Nutzer die Allgemeinen Geschäftsbedingungen

Anfang	Anderes	Layouts	Ende
Willkommen	Grundwissen	PP-Layouts	Schlusswort
		PP Layout 1	Andere Hilfeseiten
		PP Layout 2	Kontakt
		PP Layout 3

Auf dieser Seite sollen möglichst viele Layouts erklärt
werden. Ich werde immer mal wieder ein paar neue dazu stellen. Wünsche werden momentan angenommen, also schreibt mir einfach eine Mail wenn ihr ein bestimmtes Layout erklärt haben möchtet.

PP Layout 1	Schwierigkeit:
PP Layout 2	Schwierigkeit:
PP Layout 3	Schwierigkeit:

Du willst also wissen, wie man das erste PP Layout codet? Okay, dann mal los =3
Was brauchst du?

Dieses Layout besteht eigentlich nur aus einem großen Bild, worauf man DIVS (scrollbare Textboxen) positioniert hat und einer Hintergrundfarbe. Also schnappst du dir ein Grafikprogramm und bastelst dir ein Bild, was ca so aussieht.
(Verkleinert dargestellt, zieh es in die Adressleiste und du kannst es in voller Größe sehen)

Du kannst natürlich auch irgendein Bild nehmen, aber es sieht meist nicht gut aus, wenn nicht extra Plätze für die Textboxen eingebaut sind.

Kommen wir jetzt zu dem Code.

<img src="-blocked-" style="position: absolute; top: 15px; left: 0px;"><style></style>td,p,body{color:#2a51c6;font:10pt arial}/> <div style="width: 500px; height: 572px; overflow: auto; position: absolute; top: 34px; left: 255px; padding-right: 5px;"> <br><b> </b><center> Text Text Text Text Text Text Text Text Text Text Text Text <br><br> </center> </div> <div style="width: 465px; height: 363px; overflow: auto; position: absolute; top: 654px; left: 120px; padding-right: 5px;"> <center> <b> <br> Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 <p><br><b><i>Der erste Teil des Codes: <p></p></i></b> <textarea cols="90" rows="6" style="background-color: #ffb359;"><img src="-blocked-" style="position: absolute; top: 15px; left: 0px;">

Erklärung:
Das ist das Bild, was du für die PP gemacht hast. Mit "position" kannst du die Position des Bildes angeben. Ist praktisch, damit sich Nichts verschiebt, wenn jemand einen größeren oder kleineren Bildschirm hat als du. Das top:15 ist für die Höhe (die 15 wegen dem Neozeugs, was immer auftaucht) und das left steht für den seitlichen Abstand (von Links)

Erklärung:
Hiermit änderst du die Schriftfarbe/Art/Größe der ganzen PP (code von der PP von flauschkopf )
color steht für die Schriftfarbe. Ich hab dort einen Hexcode von einer Farbe eingegeben. Du kannst aber auch red oder andere Farben auf Englisch anstelle des #2a51c6 nehmen.
font ist die Schriftgröße.
Danach hab ich einfach die Schriftart dahintergeschrieben.

Erklärung:
Das ist einfach die Hintergrundfarbe der ganzen PP. Passe sie deinem Bild an.

Erster Div:
<div style="width: 500px; height: 572px; overflow: auto; position: absolute; top: 34px; left: 255px; padding-right: 5px;"> <br><b> </b><center> Text Text Text Text Text Text Text Text Text Text Text </center> </div>

Erklärung:
Mit dem Teil fügt ihr eure Textbox in der Page ein.
div steht für die Box & mit den Styleangaben könnt ihr das Aussehen der Box ändern.
width für die Breite, height für die Höhe
das overflow:auto bestimmt, was mit den Sachen, die größer sind als der Div, passiert. In diesem Fall wird das scrollen ermöglicht.
Mit der Position ist es dasselbe wie bei dem Bild & padding-right ist ein Abstandhalter. Hier wird z.B. der Platz zwischen Text und der Scrollbar an der Seite definiert.

Zweiter Div:
<div style="width: 465px; height: 363px; overflow: auto; position: absolute; top: 654px; left: 120px; padding-right: 5px;"> <center> <b> <br> Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 <p> <i>Erklärung:</i><br> Dasselbe wie beim ersten Div, nur mit einer anderer Größe und Position.<br> Der Div wurde nicht geschlossen, da man die Seite sonst nicht speichern kann. </p> <p><br></p> <p><br><font size="2"> NEOPETS, Charaktere, Logos, Namen und alle zugehörigen Zeichen sind geschützte Marken von <a href="http://www.neopets.com/aboutus.phtml">Neopets, Inc.,</a> © 1999-2009. ® beschreibt Reg. US Pat. & TM Office. Alle Rechte vorbehalten. <a href="http://www.neopets.com/privacy.phtml">Datenschutz</a> | <a href="http://www.neopets.com/safetytips.phtml">Sicherheitstipps</a> | <a href="http://www.neopets.com/contact.phtml">Kontakt</a> | <a href="http://www.neopets.com/aboutus.phtml">Über uns</a> | <a href="http://www.neopets.com/presskit_form.phtml">Presse-Dokumentation</a> Mit der Nutzung dieser Webseite akzeptiert der Nutzer die <a href="http://www.neopets.com/terms.phtml">Allgemeinen Geschäftsbedingungen</a> </font> <br></p> <p><br><br></p></b> </center> </div> <div style="overflow: auto; width: 98%; height: 510px;"> <a name="PP Layout 2"> </a> <p><br><font color="#99552d"> <p> Dich interessiert das 2te Layout? Das ist eins meiner liebsten Lays. <br> Was brauchst du? </p> <p> Dieses Layout besteht aus zwei Tabellen und ein paar Grafiken. <br> Der Hintergrundgrafik (verkleinert dargestellt)<br><img src="http://i301.photobucket.com/albums/nn74/Blume132/blauhintergrund.gif?t=1239999776" height="50"><br> Diese Grafik sollte sich am besten nahtlos wiederholen können, damit sie gut aussieht. Bei meinen Grafiken von diesem Layout sieht das bei verschiedenen Bildschirmgrößen nicht immer perfekt aus.<br><a href="http://www.neopets.com/backgrounds_tiled.phtml">Hier</a> könnt ihr ein paar finden. </p> <p> Dann habe ich noch eine Hintergrundgrafik für die Tabelle genommen. In meinem fall glitzert sie.<br><img src="http://i301.photobucket.com/albums/nn74/Blume132/glitterblau.gif?t=1239998901"></p> <p> Und zu guter letzt habe ich noch ein Headerbild gemacht (verkleinert dargestellt) <br><img src="http://i301.photobucket.com/albums/nn74/Blume132/sternencybunny.png?t=1239998295" height="200"><br> Zusammen sieht das Ganze dann so aus:<br><img src="http://i963.photobucket.com/albums/ae120/blume1993/PP/lay2.png?t=1247854406"></p> <p><br> Der Code dazu würde lauten <br><textarea cols="90" rows="6" style="background-color: #ff9d6d;"><center> <table border="0" width="100%" background="-blocked-"><tr><td> <center> <img src="-blocked-"> </center> </td></tr></table> <table border="0" width="810"><tr><td> <center> <style></style>td,p,body{color:#004afa;font:10pt comic san}/> <br><br><p> Hier kommt dein Text hin </p> </center> </td></tr></table> </center>

In kleinen Schritten

Erklärung:
Das center stellt alles auf der PP mittig.
Und body background ist dein Hintergrundbild. Fügt einfach eure BildURL zwischen den " ein.

Erklärung:
Hier ist die erste Tabelle. Besser gesagt der Header. Die Tabelle ich 100% breit und hat keinen Rahmen.
Als Hintergrund habe ich meine blaue Glitzerplatte eingesetzt.
Dann habe ich mit center bestommen, dass alles, was in der Tabelle steht mittig ist und einfach mein Headerbild eingesetzt.

<table border="0" width="810"><tr><td> <center> <style></style>td,p,body{color:#004afa;font:10pt comic san}/> <br><br><p> Hier kommt dein Text hin </p> </center> </td></tr></table>

Erklärung:
Die Tabelle taucht unter der andern auf und ist 810px breit.
Sie hat auch einen Hintergrund verpasst bekommen, nämlich wieder meine Glitzerplatte.
Alles soll mittig stehen und und das style gibt die Schriftart/Farbe/Größe der ganzen PP an.

Und das wars auch schon mit dem Lay

Du interessiert dich für das 3te lay? Gut, aber der Code ist nicht der übersichtlichste! Also pass auf, wenn du damit rumspielst. Es ist nicht unbedingt ein Lay für einen Einsteiger..

Der Code im ganzen:

<font color="#ffffc0">
• <a href="#Platz%201">Platz 1</a> •
 <a href="#Platz%202">Platz 2</a>
• <a href="#Platz%203">Platz 3</a> •
 <a href="#Platz%204">Platz 4</a>
• <a href="#Platz%205">Platz 5</a> •
 <a href="#Platz%206">Platz 6</a> •
</font>
</div>

</font><center> 
 
<div style="overflow: auto; width: 560; height: 400;">
<a name="Platz 1"> </a> 
<font color="#f9e5ad">

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
<p><br><font size="2">
NEOPETS, Charaktere, Logos, Namen und alle zugehörigen Zeichen
sind geschützte Marken von <a href="http://www.neopets.com/aboutus.phtml">Neopets, Inc.,</a> © 1999-2009.
® beschreibt Reg. US Pat. & TM Office. Alle Rechte vorbehalten.
<a href="http://www.neopets.com/privacy.phtml">Datenschutz</a> | <a href="http://www.neopets.com/safetytips.phtml">Sicherheitstipps</a> | <a href="http://www.neopets.com/contact.phtml">Kontakt</a> | <a href="http://www.neopets.com/aboutus.phtml">Über uns</a> | <a href="http://www.neopets.com/presskit_form.phtml">Presse-Dokumentation</a>
Mit der Nutzung dieser Webseite akzeptiert der Nutzer die <a href="http://www.neopets.com/terms.phtml">Allgemeinen Geschäftsbedingungen</a>
</font>
<br></p>
<p><br><br></p></font>
</div>

<p><br></p>
<div style="overflow: auto; width: 560; height: 400;">
<a name="Platz 2"> </a> 
<font color="#f9e5ad">
<br>
Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2

<p><br><font size="2">
NEOPETS, Charaktere, Logos, Namen und alle zugehörigen Zeichen
sind geschützte Marken von <a href="http://www.neopets.com/aboutus.phtml">Neopets, Inc.,</a> © 1999-2009.
® beschreibt Reg. US Pat. & TM Office. Alle Rechte vorbehalten.
<a href="http://www.neopets.com/privacy.phtml">Datenschutz</a> | <a href="http://www.neopets.com/safetytips.phtml">Sicherheitstipps</a> | <a href="http://www.neopets.com/contact.phtml">Kontakt</a> | <a href="http://www.neopets.com/aboutus.phtml">Über uns</a> | <a href="http://www.neopets.com/presskit_form.phtml">Presse-Dokumentation</a>
Mit der Nutzung dieser Webseite akzeptiert der Nutzer die <a href="http://www.neopets.com/terms.phtml">Allgemeinen Geschäftsbedingungen</a>
</font>
<br></p>
<p><br><br></p></font>
</div>

<div style="overflow: auto; width: 560; height: 400;">
<a name="Platz 3"> </a> 
<font color="#ffb88d">
Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 
<p><br><font size="2">
NEOPETS, Charaktere, Logos, Namen und alle zugehörigen Zeichen
sind geschützte Marken von <a href="http://www.neopets.com/aboutus.phtml">Neopets, Inc.,</a> © 1999-2009.
® beschreibt Reg. US Pat. & TM Office. Alle Rechte vorbehalten.
<a href="http://www.neopets.com/privacy.phtml">Datenschutz</a> | <a href="http://www.neopets.com/safetytips.phtml">Sicherheitstipps</a> | <a href="http://www.neopets.com/contact.phtml">Kontakt</a> | <a href="http://www.neopets.com/aboutus.phtml">Über uns</a> | <a href="http://www.neopets.com/presskit_form.phtml">Presse-Dokumentation</a>
Mit der Nutzung dieser Webseite akzeptiert der Nutzer die <a href="http://www.neopets.com/terms.phtml">Allgemeinen Geschäftsbedingungen</a>
</font>
<br></p>
<p><br><br></p></font>
</div>

<div style="overflow: auto; width: 560; height: 400;">
<a name="Platz 4"> </a> 
<font color="#e4c5aa">
<p>
Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4

</p>
<p><br><font size="2">
NEOPETS, Charaktere, Logos, Namen und alle zugehörigen Zeichen
sind geschützte Marken von <a href="http://www.neopets.com/aboutus.phtml">Neopets, Inc.,</a> © 1999-2009.
® beschreibt Reg. US Pat. & TM Office. Alle Rechte vorbehalten.
<a href="http://www.neopets.com/privacy.phtml">Datenschutz</a> | <a href="http://www.neopets.com/safetytips.phtml">Sicherheitstipps</a> | <a href="http://www.neopets.com/contact.phtml">Kontakt</a> | <a href="http://www.neopets.com/aboutus.phtml">Über uns</a> | <a href="http://www.neopets.com/presskit_form.phtml">Presse-Dokumentation</a>
Mit der Nutzung dieser Webseite akzeptiert der Nutzer die <a href="http://www.neopets.com/terms.phtml">Allgemeinen Geschäftsbedingungen</a>
</font>
<br></p>
<p><br><br></p></font>
</div>

<div style="overflow: auto; width: 560; height: 400;">
<a name="Platz 5"> </a> 
<font color="#ccf4f4"> 
<p>
Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5 Text5

<font size="2">
NEOPETS, Charaktere, Logos, Namen und alle zugehörigen Zeichen
sind geschützte Marken von <a href="http://www.neopets.com/aboutus.phtml">Neopets, Inc.,</a> © 1999-2009.
® beschreibt Reg. US Pat. & TM Office. Alle Rechte vorbehalten.
<a href="http://www.neopets.com/privacy.phtml">Datenschutz</a> | <a href="http://www.neopets.com/safetytips.phtml">Sicherheitstipps</a> | <a href="http://www.neopets.com/contact.phtml">Kontakt</a> | <a href="http://www.neopets.com/aboutus.phtml">Über uns</a> | <a href="http://www.neopets.com/presskit_form.phtml">Presse-Dokumentation</a>
Mit der Nutzung dieser Webseite akzeptiert der Nutzer die <a href="http://www.neopets.com/terms.phtml">Allgemeinen Geschäftsbedingungen</a>
</font>
<br></p>
<p><br><br></p></font>
</div>

<div style="overflow: auto; width: 560; height: 400;">
<a name="Platz 6"> </a> 
<font color="#f7f6dd"> 
<p>
Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6

</p>
<p>
<font size="2">
NEOPETS, Charaktere, Logos, Namen und alle zugehörigen Zeichen
sind geschützte Marken von <a href="http://www.neopets.com/aboutus.phtml">Neopets, Inc.,</a> © 1999-2009.
® beschreibt Reg. US Pat. & TM Office. Alle Rechte vorbehalten.
<a href="http://www.neopets.com/privacy.phtml">Datenschutz</a> | <a href="http://www.neopets.com/safetytips.phtml">Sicherheitstipps</a> | <a href="http://www.neopets.com/contact.phtml">Kontakt</a> | <a href="http://www.neopets.com/aboutus.phtml">Über uns</a> | <a href="http://www.neopets.com/presskit_form.phtml">Presse-Dokumentation</a>
Mit der Nutzung dieser Webseite akzeptiert der Nutzer die <a href="http://www.neopets.com/terms.phtml">Allgemeinen Geschäftsbedingungen</a>
</font>
<br></p>
<p><br><br></p>
<p>

</p></font>
</div>

</center>
</div>

<p><br>

Ich gebe zu, auf den ersten Blick ist der Code einschüchternd, aber ich weiß <i><b>ihr könnt das</b></i>
<br>
Vorweg möchte ich euch noch ein paar Infos zu dem Lay geben, damit ihr den Code später besser verstehen könnt.
<br>
Im Grunde besteht das Layout aus einem großen Div (Textbox) und ganz vielen kleinen Divs, die in dem großen Div versteckt sind. Sie sind genauso hoch, wie das große Div, doch man kann in dem großen Div nicht scrollen, so kommt man nur mit Ankern zu den einzelnen Elementen der PP.
<br>
Ich habe mir wieder ein (sehr schlichtes) Hintergrundbild gemacht und es an die Textboxen angepasst.
<br> Und so siehts aus (verkleinert dargestellt)</p>
<p>

Okay, dann können wir uns eigentlich schon ans zerrupfen des Codes machen.
</p>
<p>
<br></p>
<p>

<b><i>Der erste Teil des Codes: <p></p></i></b>

Der erste Teil ist nur zur Gestaltung da, darum müsst ihr euch nicht wirklich kümmern.
</p>
<p>
<font color="#FF0000">
Der "Erste-Teil-Code" im ganzen, ohne meine Erklärungen dazwischen<br>
Die kommen dadrunter nochmal.<p></p></font>
<textarea cols="90" rows="4" style="background-color: #ffb359;"><style type="text/css">
.sf {
	display: none;
}
table {
	background: transparent;
}
table tr td a img {
	display: none;
}
</style>/>

Erster Stylebefehl:

Erklärung:
Entfehrnt einfach nur das Zeug von Neo, was auf jeder Page auftauscht. Dieses habe ich aber in passenden Farben wieder dazu gefügt ;) Ich denke nicht, dass es erlaubt ist, diese einfach ohne Ersatz zu entfehrnen.

Zweiter Stylebefehl:

Erklärung:
Dieser Teil ist für die Links zuständig. Welche Farbe der Text haben soll und wie er gefärbt werden soll, wenn ihr mit der Maus drüber fahrt. (in der Reihenfolge)

Dritter Stylebefehl:

Erklärung:
body bgcolor" Ist eure Hintergrundfarbe der Page. Darunter ist der Code, um euer Hintergrundbild auf die Page zu packen.
no-repeat" Sorgt dafür, das es sich nicht wiederholt.

Vierter Stylebefehl:

Erklärung:
Hier habe ich dieses Neopetsbanner, was immer ganz oben auf der Page ist (und was ich entfehrnt hatte) ersetzt. Dafür habe ich mir einfach ein Banner gemacht, auf dem genau das selbe wie bei Neo steht, nur das ich es passend zum Lay gefärbt habe & es überall hinpacken kann wo ich will.

Der Zweite Teil ist eure Navigation

Erklärung:
Eure Links bzw. Anker sind einfach in einem Div untergebracht, den ihr positionieren könnt, wo ihr wollt.

Euer 3ter Teil ;) Die große Divwundertüt

<p>
<i>Erklärung:</i><br>
Einfach die Position und größe festlegen. <br>
Die "font color" Ist eure Schriftfarbe ^^<br>
WICHTIG: Merkt euch die höhe und am besten auch die Breite dieses Divs. (es wird als letztes div später wieder geschlosse, also nicht wundern, das es noch offen ist)
</p>
<p>
<br><b><i>Euer erstes Textdiv<p></p></i></b>

Erklärung:
Oben MÜSST ihr jetz die Höhe eures umschließenden Divs eingeben. Die Breite darf variieren, sie darf aber auch nicht breiter als das umschließende Div sein. (aber kleiner)
Und ihr könnt die Textfarbe eures Divs wählen.
Damit die Höhe des Divs stimmt, solltet ihr ihn entweder voll beschrieben haben, oder Absätze bzw Zeilenumbrüche an Stelle des Texts einfügen. Sonst ist der Anfang des nächsten Divs zu sehen.

Der letzte Teil (also der zwischen den und ) Ist meine Version des ersetzen Neozeugs xD Und macht diesen Code kompliziert -.- Aber ich lass es lieber drauf. (Am Ende jedes Divs, damit es immer zu sehen ist)
Und Die Absätze/Zeilenumbrüche sind nur da, weil es dann besser aussieht.

Die andern Textdivs

Das ist dann eben bei jedem der Divs so ;) Also hier die andern (ohne Erklärung)

<div style="overflow: auto; width: 560; height: 400;">
<a name="Platz 6"> </a> 
<font color="#eff4cc"> 
<p>
Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6 Text6

</p></font>
</div>

Beendet das "Umschließende Div"

dick schreiben	<b> Dein Text </b>
kursiv schreiben	<i> Dein Text </i>
Text unterstreichen	Dein zu unterstreichender Text
~~durchstrichener Text~~	<strike> Dein zu durchstreichender Text </strike>
*Schrift fett, unterstrichen und kursiv.*	<b><i>Text</i></b>
Text ^oben	Text <sup>oben</sup>
_untenText	<sub>unten </sub>Text
roter Text	<font color="#FF0000">Text</font>
Schrift in der gewünschten Textart	<font face="comic sans ms">Text</font>

Link	<a href="/">Text</a>
Link öffnet sich in einem neuen Fenster	<a href="/">Text</a>
Link als Bild	<a href="/"><img src="-blocked-" border="0"></a>
Linkfarbe	<style></style>a{color:red}/>

Einfaches Bild	<img src="-blocked-">
Bild mit Rahmen	<img src="-blocked-" border="1">
Bildgröße ändern	<img src="-blocked-" width="150">
PP-Hintergrundfarbe ändern
PP-Hintergrundbild (wiederholt sich immer)
PP-Hintergrundbild nur einmal
Bild mit genauer Position	<img src="-blocked-" style="position: absolute; top: 20px; left: 50px;">

Laufschrift	Laufschrift
Laufschrift	Laufschrift
Laufschrift	Laufschrift
Laufschrift	Laufschrift