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: 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 | |
Gratis anmelden