Div-Boxen im Seiteninhalt erstellen

Div-Boxen erstellen und gestalten :

Eine einfache Art, die es erlaubt Boxen für News oder Infos zu gestalten.
Vorschau:


Schritt 1: Der HTML Code
Im Seiteninhalt fügen wir den HTML-Code für das DIV ein.
Dem DIV geben wir einen Klassen-Namen.

- Einloggen in Homepage
- im Hauptmenü auf "Seiten" klicken
- wähle die Seite aus, wo das Feld hinein soll
- nun oben links im Editor auf "Quellcode" klicken

Ihr könnt es beliebig oft im Seiteninhalt einfügen, wenn mehrere DIV Felder benötigt werden.

Schritt 2: Der CSS Code
CSS-Design: Einfügen im Feld "CSS ohne Style Tags"
alle anderen Designs: Einfügen im Feld "Text über dem Design", vor dem --></style>

Mit dem CSS Code hat das DIV im Seiteninhalt nun ein Ausssehen bekommen.
Das Aussehen kannst du anpassen oder auch erweitern :

background-color: = Hintergrundfarbe im DIV
border: = Rahmen um das DIV
color: = Schriftfarbe im Feld
width: = Breite des Feldes
padding: = Innenabstand zu allen 4 Seiten
margin: = Außenabstand um das DIV herum
overflow: hidden; = Feld ohne Scrollbalken, passt sich in der Höhe dem Inhalt an

Tipp:
Das Feld können wir scrollbar machen. Es muss im CSS Code noch eine Höhe bekommen.
Und aus overflow: hidden; machen wir ein overflow: auto;

edit by Matsk: 14.04.2014 - 21:13 Uhr
______________
Gruß Pexxi