learnCSS
Learn CSS ..
.. with sandy-x.de.vu
Hallo :]
Hier möchte ich euch bisschen was zu CSS und Layout-Coding sagen, damit ihr bald auch euer eigenes Layout erstellen könnt :]
CSS: Allgemeines
1.) div-Felder..
CSS besteht aus verschiedenen Klassen, zum Beispiel dem Hintergrund. Dieser heißt "body". (weiteres unten..)
Es gibt auch div-Klassen. Wenn ihr zB eine eigene Navigation haben möchtet, oder einfach ein Feld wo etwas drinstehen soll, ist ein div-Feld genau das Richitge. Vor dem Namen steht dann ein "#".
Zum Beispiel eine Navigation:
#navigation
Nach dem Klassennamen (hier wurde er selbst erfunden) lässt man Platz [Leertaste]. Dannach folgt ein "{".
Dann kommen die ganzen 'Infos'. zB welche Schriftart man verweden soll, welche Schriftgröße, die Position des Feldes usw.
Zuerst kommt die Info, und dann wie's sein soll ;D
Beispiel:
display: none;
heißt dass es nicht angezeigt werden soll.
nach der Info folgt ein Doppelpunkt und am Ende ein Strich-Punkt [ ; ].
Ein kleines Beispiel für eine Navigation:
#navigation {
position: absolute;
display: block;
top: 500px;
margin-left: 50px;
color: #000000;
font-family: arial;
font-size: 12pt;
background-color: #FFFFFF;
border: #000000 solid 1px;
}
Dieses Coding sagt, dass ein DIV-Feld erstellt werden soll, das "navigation" heißt.
Es liegt 500px von oben und 50px von links. Die Schriftfarbe ist schwarz, Schriftart ist Arial, die Größe ist 12Punkte, die Hintergrundfarbe der Navigation ist weiß und umradet wird sie mit einem Rahmen der Dicke 1px mit der Farbe schwarz.
2.) Überschriften
Ihr wollt bei eurer HP tolle Überschriften verwenden?
solche z.B.?
nadann (:
im CSS-Code kommt dann sowas vor:
.titel
Ihr könnt die Klasse auch anders nennen (zB .Überschrift oder so.). Aber vergesse nicht, dass du jedesmal in deinem Textfeld im HTMLCode "<p class="titel"> Deine Überschrift </p>" eingeben musst. Wähle also keinen zu langen Namen, sonst brauchst du ewig !
Der Code für die Test-Überschrift würde dann so aussehen:
.titel {
display: block;
color: #343f5f; text-shadow: #fff 0px 0px 5px;
border-left: #343f5f solid 5px;
border-bottom: #343f5f solid 1px;
font-size: 16pt;
font-family: century gothic;
padding-left: 7px;
margin-bottom: 3px;
margin-top: 6px;
background-color: #ededed;
}
Du hast keine Lust, bei jeder Überschrift auf deiner Seite immer diesen HTMLCode einzugeben? Dann gäbe es auch noch eine andere Möglichkeit. Ich persönlich finde sie nicht so gut, da man bei ihr im Editor (im HPBK bei "Eigene Seiten editieren" und dann das rechts, da wo ihr eure Seite entwerft) nur "Überschrift 4" (oder 3 oder 2 oder 1 ..) anklicken braucht. (Ja ist ja gut! aber:) Wenn ihr aber eine Überschrift einfach so mal im Text haben wollt (zB wie hier die ganzen dicken [zB "2.) Überschriften"]), habt ihr dann immer diese Überschrift da.
(Der Code hierfür kommt später mal; Fortsetztung folgt! (: )
Begriffe
Klassen:body - Hintergrund
'Infos' der Klassen:
top - position oben/unten
margin-left - position links/rechts
color - Textfarbe
font-family - Schriftart
font-size - Schriftgröße (zB: font-size: 12pt; )
text-decoration - zB unterstrichen, kursiv oder fett
text-transform -
background-color - Hintergrundfarbe des Feldes
background-image:url(http://Bildadresse.de) - Hintergrundbild
Das Coding
Was ihr beim HPBK auf jedenfall schreiben müsst wäre das [ich kann nicht alles erklären
] : #pre_header {display:none;}
#counter {display: none;} (Verbirgt euren Counter)
.header {display: none;} (Verbirgt euren Header) (wenn du es nicht reinschreibst, hast du keinen Hintergrund. Der Header (dein Bild) wird dann immer wiederholt)
h2#title {display: none;} (Titel d. Seite verbergen)
ul#nav {display: none;} (Eure alte Navigation verbergen)
#post_content {display: none;}
#below_content {display: none;} (Verbirgt den Strich unterm Textfeld)
#pre_content {display: none;} (.. und vor dem Textfeld)
#sidebar_container {display: none;}
#sidebar_heading {display: none;}
#sidebar_content {display: none;}