** C H R I S K I Z Z M Y S U N » .. Kopf aus

Boxen

Vorraussetzungen

HTML Grundkenntnisse und ein eigenes Layout

Zuerst einmal, Boxen sind kleine Kästchen, in denen ihr Text (z.B. Rules, Updates, oder etwas, was vom restlichen Text abstechen soll), Bilder oder Navigationen etc. hineinschreiben könnt.
Es gibt unendliche Variationen, wie später so eine Box aussehen kann, also kann ich euch nur raten, probiert rum ^.^
Der Code für eine Box ist dieser:

Diesen Code musst du nun im Head Bereich deines Layouts einfügen, zwischen < style> und < /style>.
Jetzt musst du nurnoch wissen, was die einzelnden Sachen bedeuten:

margin-bottom: Abstand von Unten
padding-left: Linker Abstand des Inhalts von der Box
padding-right: Rechter Abstand des Inhalts von der Box
padding-top: Oberer Abstand des Inhalts von der Box
padding-bottom: Unterer Abstand des Inhalts von der Box
width: Breite der Box
background-color: Hintergrund Farbe
border-left: Legt den linken Rand fest
border-right: Legt den rechten Rand fest
border-top: Legt den oberen Rand fest
border-bottom: Legt den unteren Rand fest

Für den Rand gibt es natürlich mehrere Möglichkeiten, ihr könnt ihn normal machen (solid), gestrichelt (dashed) oder gepunktet (dotted).
Der Beispiel Code wäre z.B. eine 350 px große Box, mit schwarzem Hintergrund und weißen Rand. Ihr könnt so gut wie alles verändern, wie ihr das möchtet. Möchtet ihr z.B. die Hintergrund Farbe transparent, ändert ihr einfach background-color: #000000; durch background-color: transparent;.
Möchtet ihr ein Hintergrund Bild? Dann ändert background-color: #000000; in background: url('URL DES HG BILDES');

Ihr seht, es ist gar nicht so schwer, wie es vielleicht aussieht ^.~
Am Ende braucht ihr nurnoch einen kleinen Code, um diese Box einzufügen:

Ihr könnt auch mehrere Boxen erstellen, benennt das .box {.........} dann einfach um in z.B. .box2 {.........} oder in einen anderen Namen.
Natürlich verändert sich dann auch wieder euer Code, den ihr einfügen musst, um so eine Box zu machen. Statt class=box müsst ihr nun class=box2 oder ähnliches eintragen ^.~
Merke; nach class= steht immer der Name der Box.
Ich wünsche euch viel Spaß beim ausprobieren ^.^ Wenns noch Fragen gibt, ins Askme damit. :}

(Copyright by Chriskizzmysun, kopieren ist strikt untersagt!)

Welcome here

× View with IE • Firefox ×
Willkommen auf meinem Blog, auf dem ich über meinen Alltag & alles was mich bewegt blogge. Viele verschiedene Themen, wie es mir grad in den Sinn kommt. Über Feedback freue ich mich & bei Gefallen, verfolgt meinen Blog mithilfe verschiedener Funktionen. Have Fun!