BRAUNÄUGIG.de.tl

Tutorial 4

Layout coden

Viele von euch möchten gerne ein Layout coden und haben aber leider keine Ahnung, wie das gehen soll.
Daher zeigeich euch jetzt ein paar Grundcodes, mit denen ihr arbeiten könnt.
Aber vergesst nicht mich zu verlinken, wenn ihr mit Hilfe dieses Tutorials ein Layout gecodet habt ;]
Wenn ihr nach dem Lesen noch Fragen habt, dann stellt sie bitte im AskMe.

Textstyle

font-family: Verdana;
font-size: 10px;
color: #ffffff;
font-weight: none;
text-shadow: 0px 0px 0px #000000;

Mit font-family:; könnt ihr die Schriftart bestimmen, mit font-size:; die Schriftgröße und mit color:; die Schriftfarbe.
Wenn ihr wollt, dass eure Schrift fett ist, dann tragt ihr bei font-weight:; bold ein.
Mit text-shadow:; könnt ihr den Textschatten bestimmen. Die ersten beiden Pixel-Einstellungen sind für einfachen Schatten, die letzte lässt deinen Text 'leuchten'.
Wenn du einfachen Schatten möchtest, sieht dein Code ungefähr so aus:

text-shadow: 1px 1px 0px #000000;

Wenn du möchtest, dass dein Text leuchtet, sieht er aber ungefähr so aus:

text-shadow: 0px 0px 2px #000000;

Natürlich kannst du die Farbe und die Pixelzahl verändern, um deinen Schatten/Leuchteffekt zu verringern oder zu verstärken.

Der Content

Jetzt wirst du dir wahrscheinlich denken: "Toll, aber wie mache ich das jetzt, dass mein Textseiten-Text so aussieht?
Geht auch ganz einfach.

#content {
font-family: Verdana;
font-size: 10px;
color: #000000;
font-weight: none;
text-shadow: 0px 0px 0px #000000;
}

Um deinen Content zu platzieren, fügst du folgendes zwischen den Klammern { } hinzu:

top: 118px;
left: 300px;

Mit top:; bestimmst du den Abstand von oben und mit left:; den Abstand von links.#

Um deinem Content einen Rahmen zu verpassen und die Hintergrundfarbe zu bestimmen fügst du folgendes hinzu: