Css machen

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 : #extraDiv1 {display: none;} #extraDiv2 {display: none;} #extraDiv3 {display: none;} #extraDiv4 {display: none;} #extraDiv5 {display: none;} #extraDiv6 {display: none;} #pre_header {display: none;} #post_header {display: none;} #pre_content {display: none;} #nav_heading{display: none;} div.header{display: none;} h1#title{display: none;} h2#title span {display: none;} Mit #Hier die Klasse {display: none;} entfernen wir Klassen.

 

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 a{ color:#4A9AF6; text-decoration: none; font-size:13px;} a:hover { color: #4A9AF6; font-size: 13px; text-decoration: none;} a:link { color: #4A9AF6; font-size: 13px; text-decoration: none;} a:active { color: #4A9AF6; font-size: 13px; text-decoration: none;} a:visited { color: #4A9AF6; font-size: 13px; text-decoration: none;} 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" body { background-color:#000000;} *{ padding: 0; margin: 0; } #Mein_Bild { margin: 0 auto; width: 980px; height:500px; background-image:url(HIER DEINE BILD-URL);} 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.

 

1

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" #header_container { position: absolute; left: 50%; margin-left:-490px; width: 980px; height:70px; background-color:#343434; background-image: none; color:#FFFFFF; font-size:13px; border: 1px solid #FFFFFF;} 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

 

Schritt 5 : Textfeld platzieren

Im Design "CSS" hat das Textfeld die Klasse #content. - füge ein im Feld "css ohne style-tags" #content { position: absolute; left: 50%; top: 140px; margin-left:-320px; width: 590px; height: 380px; padding:10px; color: #F2F2F2; font-size:13px; background-color:#343434; background-image: none; border: 1px solid #FFFFFF; overflow:auto;} Erklärung: - top: = Abstand Textfeld von oben - margin-left: = Abstand Textfeld vom linken Bildschirmrand - padding:10px; = Inhalt 10 Pixel Abstand zu Seitenrändern - width: = Breite des Textfelds - height: = Höhe des Textfelds - background-color = Hintergrundfarbe Textfeld - background-image: none; = Hintergrundbild (URL) in Klammer einfügen - wenn Du ein Bild einfügen möchtest, gleiche Breite wie das Textfeld hat ! - color:#000000; = Textfarbe im Textfeld - font-size:13px; = Textgrösse - border: 1px solid #C9C9C9 = Rahmen / Rahmenstärke / Rahmenfarbe - overflow:auto;} = erzeugt ein scrollbares Textfeld Bei background-color: kannst Du statt Farbe auch transparent einfügen, damit das Hintergrundbild zu sehen ist !

 

Schritt 6 : Einfügen der "rechten Box"

Im Design "CSS" hat die "Box" die Klasse #sidebar_container. Wer keine rechte Box benötigt: fügt nur ein : #sidebar_container{display:none;} - Du möchtest die rechte Box einfügen ? - füge ein im Feld "css ohne style-tags" #sidebar_container{ position: absolute; left: 50%; top:140px; margin-left: 300px; width: 190px; height: 400px; background-color:#343434; background-image:url; border:1px solid #FFFFFF; color:#000000; overflow:auto;} Erklärung: - top: = Abstand der Box von oben - margin-left: = Abstand Box vom linken Rand - width: = Breite der Box - height: = Höhe der Box - background-color = Hintergrundfarbe Box - background-image: none; = Hintergrundbild (URL) in Klammer einfügen - wenn Du ein Bild einfügst, gleiche Breite wie Deine Box bekommt - color:#000000; = Textfarbe in der Box - font-size:13px; = Textgrösse in rechter Box - border: 1px solid #C9C9C9 = Rahmen / Rahmenstärke / Rahmenfarbe - overflow:auto;} = erzeugt ein scrollbares Feld Bei background-color: kannst Du statt Farbe auch transparent einfügen, damit das Hintergrundbild zu sehen ist !

 

Schritt 7 : Die Navigation

Im Design "CSS" hat die "Navi" die Klasse #nav_container die Navi-Buttons die Klasse li.nav_element a der "Hover-Effekt" die Klasse li.nav_element a:hover - füge ein im Feld "css ohne style-tags" #nav_container{ position: absolute; left: 50%; top:140px; margin-left: -490px; width: 160px; height:400px; border:1px solid #FFFFFF; overflow:auto;} ul#nav{ width: 130px; padding: 0px; margin: 0px;} li.nav_element{ list-style-type: none; position: relative; padding:5px; width: 115px;} li.nav_element a{ display: block; width: 115px; padding:4px; font-weight: bold; text-decoration: none; text-align: left; color:#F2F2F2; background-color:#343434; background-image:url(HIER BUTTON-URL_1); border: 2px solid #000000;} li.nav_element a:hover{ color: #000000; background-color:#C9C9C9; background-image:url(HIER BUTTON-URL_2);} Das Navi-Feld #nav_container platzierst Du mit den Werten top und margin-left Das overflow:auto; erzeugt eine scrollbare Navi ab 400 Pixel höhe. Wenn NICHT gewünscht, bei #nav_container löschen: - height:400px; - overflow:auto; Die "Navi-Buttons" kannst Du anpassen bei: - #li.nav_element a - und bei #li.nav_element a:hover - hover = Wenn die Maus über einen Button fährt - Eigene Button einfügen bei "background-image:url(HIER Button-URL);" Wenn Deine "Navi-Buttons" breiter sollen, dann bitte das width (Breite) auch ändern bei : - #nav_container - ul#nav - li.nav_element - li.nav_element a

 

Schritt 8 : Der Besucherzähler

Im Design "CSS" hat der Besucherzähler die Klasse #counter. Um den Counter sehen zu können, bei "Extras editieren" den Counter aktivieren. Wähle dort bitte aus : "Hits NICHT anzeigen" Beachte bitte: Wenn Du im Extra "Counter" längeren Text vor und nach dem Zähler einfügst, musst du hier im Code das width (Breite) eventuell erhöhen, damit der ganze Text in 1 Zeile passt. - zwischen diesem und vorigem Code eine Leerzeile einfügen - es erleichtert Dir die Übersicht - füge ein im Feld "css ohne style-tags" #counter { position: absolute; left: 50%; top:30px; margin-left: 300px; width: 150px; height:20px; color:#FFFFFF; font-size:13px; border: 1px solid #FFFFFF;} Erklärung: - top: = Abstand Counter von oben - margin-left: = Abstand des Counters vom linken Rand - width: = Breite des Counters - height: = Höhe des Counters - background-color = Hintergrundfarbe Counter - color:#FFFFFF; = Textfarbe des Counters (weiss) - font-size:13px; = Textgrösse - border: 1px solid #FFFFFF = Rahmen / Rahmenstärke / Rahmenfarbe