PHPForum - Css Tutorial

Css Tutorial

Habt ihr euch schon immer mal gefragt wie mach ich ein Homepage-Design? Dann ließt dies durch dann kennt ihr
euch besser aus. Mit dieser Css Tutorial könnt ihr euer eigene Homepage Design erstellen.

Was Sie in so einem Fall machen können, zeigt Ihnen dieses Tutorial

1. Ein Design zentrieren

Fügen Sie einfach folgenden Code bei
"CSS-Code ohne Style Tags" ein:

-->
</style>
<table align="center" cellpadding=0 cellspacing=0 border=0><tr><td align="center">
<style type="text/css">
<!--

und bei "Text unter dem Design":

</td></tr></table>

1. Klassen/ID`s anpassen

Um die Designs im Homepage-Baukasten zu verändern, muss man die vorbestimmten Klassen/ID`s kennen. Hier sehen Sie die gebräuchlisten CSS-Klassen des HpBks:

body = der Hintergrund hinter dem Design
#container = Hintergrund-Feld
#header_container = Header oben
h1#header = Titelfeld im Header
#content = Textfeld
#title span = Seitentitel im Textfeld (platziert sich automatisch im #content )
#sidebar_container = Rechte Box
#sidebar_heading = Titelfeld Rechte Box (platziert sich automatisch in rechter Box)
#nav_container = Feld der Navigation
#nav_heading = Titel der Navigation (platziert sich automatisch im Feld der Navigation)
ul#nav = Auflistung der Navi-Links
li.nav_element = Hintergrund der Navi-Links
li.nav_element a = Textlinks der Navigation
li.nav_element a:hover = Hover-Effekt Navi-Links
#counter = Besucherzähler

Es gibt noch weitere, die aber nur selten gebraucht werden.

Um diese Klassen/ID`s und somit das Design zu verändern, sind noch Anweisungen nötig. Die Anweisungen bleiben unter allen Klassen gleich und können (fast ohne Ausnahmen) auch auf alle Klassn angewendet werden. Hier sehen Sie die gebräuchlichsten Anweisungen:

Schrift
color:     =Schriftfarbe
font-size:     =Schriftgröße
font-family:     =Schriftart
font-style:     =Schrifteigenschaften (normal, oblique, italic)
text-align:     =Schriftformatierung (zentriert, blocksatz,...)
text-decoration:     =weitere Texteigenschaften, bzw. Verzierungen (unterstrichen, überstrichen,...)

Rahmen
border:     =Rahmen

Hintergrund
background-color:     =Hintergrundfarbe
background-image:url(Hier die URL)     =Hintergrundbild
background-attachment:     Hintergrund fixiert (fixed)
background-repeat:     =wiederholender Hintergrund

Abstand
margin     =Außenabstand
padding     =Innenabstand (Text zum Rahmen)

Die Anweisungen

margin:
padding:
border:

lassen sich außerdem mit top, bottom, left und right spezifizieren.
Bsp:

margin-top:
padding-right:
border-bottom:

Möchten Sie jetzt eine Klasse verändern oder hinzufügen, dann müssen Sie die Anweisungen in eine Klammer hinter der Klasse, getrennt mit Symikolions (;), schreiben.
Bsp:

#content{
    width: 850px;
    height: 450px;
    float: left;
    padding-top: 10px; 
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    color: #000000;
    background-color: #ffffff;
    }

Dieses Muster gilt immer, ohne Ausnahme.