CSS - Designen/2

Tutorial: Designen 2/3

von Black Jack

Da wir den Link schon abgeschlossen haben machen wir mit Header & co weiter.

Jetzte machen wir den header, das Textfeld, den Hintergrund und die navigation.
Wir fangen mit dem Header an:

#header {
width:1000px;
height:160px; 
left:50%;
background-color:#FFFFFF;
background-image: url (http://???.png);
color:#000000;
}

*Breite des Headers        *
*Höhe des Headers          *
*50% links im bildschirm   *
*Hintergrund Farbe         *
*Hintergrund Bild          *
*Schritfarbe auf dem header*

Erklärung:
Width zeigt uns wie Breit wir den Header machen.
Height sagt uns wie hoch der Header ist.
Left sagt das in diesem falle der Header 50& Links im Bildschirm ist.
background-color hatten wir schon und mit ihm kann man den Hintzergrund bestimmen.
background-image kann das Hintergrundbild bestimmen.
color benutzten wir wenn wir den header beschriften wollen.
Das war der code des Headers. Man kann auch noch im code erweiterungen einfügen:
#header a , #header a:link ,... schrieben, im falle das man auf dem Header einen Link haben will.
Jetzt ist das Textfeld dran:

#content {
width:50%;  
height:auto;
left:50%;
top:5%;
padding:10px;
font-size:13px;
color:#000000;
background-color:#FFFFFF;
background-image: none;
border:1px solid #000000;
}

*Breite des Textfeldes     *
*Höhe, auto passt sich an  *
*50% Links                 *
*5% oben                   *
*Schriftabsatnd vom Rand   *
*Schriftgröße              *
*Schriftfarbe              *
*Hintergrundfarbe          *
*Hintergrundbild           *
*Rahmen                    *

Erklärung:
width sagt uns die Breite,
height die Höhe ( in diesem falle passt sie sich immer an wegen auto;),
left den Standort (nämlich 50% Links),
und top auch den Standort(nämlich 5% oben),
padding zeigt den Aussenabstand,
font-size die Schriftgröße,
color die Schriftfarbe,
background-color den HIntergrund,
background-image das Hintergrundbild und
border den Rahmen.

Jetzt haben wir das Textfeld, als nächstes ist der Hintergrund dran:

body {
background-image: none;
background-color:#FFFFFF;
}

*Hintergrundbild           *
*Hintergrundfarbe          *

Erklärung:
background-image sagt das Hintergrundbild der Seite und
background-color die Hintergrundfarbe wenn kein Hintergrundbild exxistieret.

So das war auch schon der Hintergrund.
Jetzt kommt nur noch die Navigation und dann ist dieses Tutorial
schon vorbei :-( :

#nav_container{
left: 1%;                       
margin-top: 0px;
width: 23%;
height:auto;
border:0px hidden #FFFFFF;
background-color: transparent;
}

ul#nav
width:130px;
}

li.nav_element{
width:115px;}  

nav.button{
width: 115px;
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);}

*Navigation kasten         *
*Abstand nach oben         *
*1% Links                  *
*23% Breit                 *
*Höhe, auto passt sich an  *
*Rahmen                    *
*Hintergrundfarbe          *



*Breite                    *


*Navigations element       *
*Breite                    *

*Button                    *
*Breite                    *
*Schriftfarbe              *
*Hintergrundfarbe          *
*Hintergrundbild           *
*Rahmen                    *



*Schriftfarbe              *
*Hintergrundfarbe          *
*Hintergrundbild           *

Erklärung:
nav_container ist der navigations kasten
ul#nav = ul bentzt man für listen da die buttons der navigation in einer list sind legen wir fest wie diese liste aussieht.
li.nav_element brauchen wir da wir li für listenpunkte in Html brauchen, deshalb gehört auf das zur Liste. Außerdem legen wir so fest wie Breit die Liste ist.
nav.button ist der button in der navigation.
li.nav_element a:hover ist der button beim Drüberfahren.

left sagt in wieviel % links das objekt auf den Bildschirm steht.
margin-top ist der abstand nach oben.
width und height zeigen die Breite und Höhe.
color ist die Schriftfarbe,
Border ist der Rahmen und background-color ist der Hintergrund der liste.

Jetzt haben wir gelernt wie wir vieles im css code schreiben.

HTML & CSS Lernen

CSS - Designen/2

Tutorial: Designen 2/3

von Black Jack