TUT1

Tutorial1
DIV-Boxen erstellen

Hier zeige ich euch wie mit etwas CSS und HTML eine einfache, elegante, aber dennoch schöne mit Inhalt erstellen kann. Die Boxen sind einfach auf jeder Seite im Quellcode einzubauen. Anschließend kann beliebig Text etc. integriert werden.

Der einfachste Weg und auch der mit dem besten Ergebnis ist der, indem man einen kleinen Anweisungs-Code zum CSS hinzufügt und dann den eigentlichen Code ganz normal in die Seite in den Quellcode einfügt.

Schritt 1:

Als erstes fügt man folgenden Code in den CSS-Code ein und speichert ab:

<center>

<div style="text-align: center;" id="DIV-ID">Hier kommt der Text hinein.</div>

</center>

Um alles übersichtlich zu halten, kann man die "DIV-ID" durch einen beliebigen Text abändern, sodass die Erkennung eindeutiger wird.

Schritt 2:

Nun wird noch der DIV-Boxen-Code in den Quellcode eingefügt:

#DIV-ID {

background: none repeat scroll 0 0 #FFF1BB;

border: 1px solid #FFCC00;

color: #7E6500;

margin: 5px;

padding: 5px;

width: 650px;

}

Was bedeutet darin was?
-Bei "background" könnt ihr hinter # noch die Farbe anpassen und
-Bei "border" kann man den Rahmen anpassen, wie z.B. die Rahmenbreite/-Farbe
-Bei "color" kann man die Textfarbe unabhängig vom Editor innerhalb der Box einstellen
-Bei "margig und padding" kann man die Abstände bestimmen - wieviel Platz zwischen Text und Rahmen ist
-Mit "width" stellt man die Breite ein, also wie breit die Box wird

So, nun muss nur noch Inhalt in die Box und schon seid ihr fertig.
Ich hoffe, ich konnte euch helfen.