DULLYY-OLDENBURG | Mehr als der Webmaster braucht

Design ''CSS''

Baukasten-Design "CSS" :

Hier möchte ich Euch in wenigen Schritten erklären,
wie Ihr das Baukasten-Design "CSS" frei gestalten könnt.

Diese Beschreibung ist nur eine von vielen Möglichkeiten !

- einloggen in die Homepage
- auf "Design einstellen"
- wählt dort das Design "CSS" aus
- Eure Seiten-Inhalte werden übernommen
- Inhalt Eurer "rechten Boxen" werden nicht übernommen
- diesen müsstet Ihr Euch kopieren und im neuen Design einfügen

Schritt 1 : entfernen unnötiger Klassen

Wir entfernen zunächst all die Klassen, die wir nicht benötigen:

- auf "Design einstellen"
- auf "Erweiterte Einstellungen"
- ganz unten das Feld "css ohne style-tags"

- ohne "style-tags" heisst:
- kein <style type="text/css"> vor dem CSS-Code
- kein </style> am Ende des CSS-Codes

- füge das Feld "css ohne style-tags" ein :

Schritt 2 : Linkformatierung

Du kannst mit dieser CSS-Anweisung für alle verlinkten Texte auf Deiner Homepage die Größe und Farbe bestimmen.

- füge ein im Feld "css ohne style-tags"
- zwischen vorigem Code und diesem Code füge eine Leerzeile ein
- das erleichtert Dir zwischen allen Codes die Übersicht

Erklärung:
a = Link
a:hover = wenn die Maus auf den Link fährt
a:link = noch nicht besuchter Link
a:active = gerade angeklickter Link
a:visited = bereits besuchte Seiten

Du kannst gewünschte Farben und Größen im Code ändern / anpassen.

Schritt 3: Der Hintergrund

- zwischen diesem und vorigem Code eine Leerzeile einfügen
- es erleichtert Dir die Übersicht
- füge ein im Feld "css ohne style-tags"

Erklärung:

background-color:#000000; = Hintergrundfarbe (hier schwarz)

#Mein_Bild = hier fügst Du Dein Hintergrundbild ein
Bei background-image:url(HIER Bild-URL); die Bild-Adresse einfügen.

Das Hintergrundbild sollte ca. 980 x 500 Pixel gross sein
Für dieses Beispiel muss das Design selbst nicht gescrollt werden.
Scrollbar sind alle Felder auf dem Design-Bild.

WICHTIG :

Die Klasse #Mein_Bild haben wir erfunden
Wenn wir Klassen erstellen, die nicht im Baukasten vorkommen, können wir sie erst sehen, wenn wir im Feld "Text über Design" einfügen:
<div id="Hier Klassen-Name"> </div>

In das Feld Text über Design" füge noch ein:

<div id="Mein_Bild"></div>

Dieses muss im Feld ganz oben eingefügt werden.
Das Feld "Text über Design" muss mit dem Code beginnen !
Nun kannst Du das Bild für Dein Design sehen.

Schritt 4 : Header (oben) platzieren

Im Design "CSS" hat der Header die Klasse #header_container.

Wer keinen Header benötigt:
fügt nur ein : #header_container{display:none;}

- Du möchtest das Header-Feld oben ?
- einfügen im Feld "css ohne style-tags"

Erklärung:

- margin-left: = Abstand des Headers vom linken Rand
- width: = Breite des Headers
- height: = Höhe des Headers
- background-color = Hintergrundfarbe Header
- background-image: none; = Hintergrundbild (URL) in Klammer einfügen
- wenn Du ein Bild einfügen möchtest, gleiche Breite wie der Header hat !
- color:#000000; = Textfarbe im Header, wenn Text hinein soll
- font-size:13px; = Textgrösse
- border: 1px solid #FFFFFF = Rahmen / Rahmenstärke / Rahmenfarbe