[Tutorial] Navigation mit CSS

Servus,
hier ein kleines Tutorial von mir, wie Ihr eine Navigation mit CSS erstellen k�nnt.

Inhalt:

1. Vorwort
2. Grundaufbau
3. CSS
4. Abschluss

1. Vorwort

Dieses Tutorial richtet sich an Leute die eher wenig Ahnung von dieser Materie haben bzw. gerade neu einsteigen. Dieses Tutorial richtet sich ausschlie�lich an soeben genannte Leute und wird f�r "Profis" wohl eher recht langweilig sein. Bedenke: Kritik ist erw�nscht, wer allerdings unfair wird sollte sich darauf gefasst machen, dass ich auch ganz gut austeilen kann.

2. Grundaufbau

So, wir legen los. Der Grundaufbau unserer Navigation besteht aus 2 DIV's, einer unsortieren Liste und mehreren Listenpunkten die Links enthalten.

HTML Code:

<div id="container"> <!-- Container -->

	<!-- Platz f�r mehr -->

	<div id="navigation"> <!-- Die Navigation wird in einem DIV verpackt. -->
    
    	<ul>
        
            <li><a href="#">Navigationspunkt 1</a></li>
            <li><a href="#">Navigationspunkt 2</a></li>
            <li><a href="#">Navigationspunkt 3</a></li>
            <li><a href="#">Navigationspunkt 4</a></li>
            <li><a href="#">Navigationspunkt 5</a></li>
            <li><a href="#">Navigationspunkt 6</a></li>
            <li><a href="#">Navigationspunkt 7</a></li>
        
        </ul>
    
    </div>

    <div style="clear:both"></div>
    
    <!-- Platz f�r mehr -->

</div>

Zun�chst verpacken wir die Navigation in einem DIV. Muss nicht sein, ist aber sch�ner ;) Kann also getrost weggelassen werden. Ihr solltet allerdings beachten, dass wenn ihr das DIV weglasst, ihr die CSS dementsprechend anpassen m�sst. Das gleiche gilt f�r die Umbenennung des DIV's.

Dann erstellen wir eine Liste (<ul>) und f�llen diese mit Listenpunkten (<li>). In den Listenpunkten (<li>) finden wir die Links (<a>), die uns letztendlich zu unserer Wunscheseite "linken". Um diese Links (<a>) funktionst�chtig zu machen, m�sst ihr das Raute Zeich (#) durch euer Ziel z.B. impressum.php ersetzen. (Auf die Verzeichnisstruktur achten!!).

3. CSS

HTML ist nicht schwer, f�r Neulinge wird sicher CSS das Problem �berhaupt sein. Deswegen ab hier etwas ausf�hrlicher.

Unser CSS-Code:

Code:

* {
	margin:0px;
	padding:0px;	
}

body, html {
	font-family:Arial;	
	font-size:12px;
}

#container {
	width:1000px;
	height:auto;	
	margin:auto;
}

#navigation {
	width:1000px;
	height:35px;
	background-color:#333;
}

#navigation ul {
	list-style:none;	
}

#navigation ul li {
	float:left;	
}

#navigation ul li a {
	width:auto;
	height:35px;
	display:block;
	line-height:35px;
	padding:0px 15px 0px 15px;	
	text-decoration:none;
	background-color:#333;
	color:#FFF;
	font-weight:bold;
}

#navigation ul li a:hover {
	background-color:#666;	
}

#navigation ul li a:active {
	background-color:#06F;	
}

Sieht verwirrend aus, ist es aber nicht. Ruhig weiterlesen, ihr braucht keine Angst haben ;)

Fangen wir ganz oben an:

Code:

* {
	margin:0px;
	padding:0px;	
}

Das Sternchen (*) steht in CSS f�r einen Universalselektor. Das bedeutet, dass alles auf der Webseite, jedes Element, jeder Tag angesprochen wird. Wir frisieren also von Anfang an alles so, dass es keinen Au�enabstand (margin) und keinen Innenabstand (padding) besitzt. Es gibt n�mlich Elemente, die besitzen von vornherein einen Au�en -und Innenabstand und k�nnten uns Probleme machen. Deswegen entsch�rfen wir diese "Bombe" sofort.

Code:

body, html {
	font-family:Arial;	
	font-size:12px;
}

Hier sprechen wir den body und generell das HTML an. Wir sagen ich m�chte die Schriftart "Arial" verwenden und alles soll vorerst mit der Schriftgr��e 12px dargestellt werden. (Die Schriftgr��e �nder ich gerne von vornherein auf 12px. Dies ist kein muss.)

Code:

#container {
	width:1000px;
	height:auto;	
	margin:auto;
}

Der Container. Hier geh�rt alles rein, was auf der Seite angezeigt werden soll. Okay, eigentlich wird alles was sich im Body befindet auf der Seite angezeigt. Dr�cke ich mich anders aus: Alles was in der Mitte des Browsers ausgegeben werden soll wird in den Container geschrieben.

Warum?
Der Container besitzt eine feste Breite (width) von 1000px, eine automatisch festgelegte H�he (height), je nachdem, wie gro� der Inhalt des Containers ist) und zudem die Eigenschaft "margin:auto;". Diese Eigenschaft sorgt daf�r, dass der Container, und dessen Inhalt, zentriert dargestellt werden.

Code:

#navigation {
	width:1000px;
	height:35px;
	background-color:#333;
}

Poah, sehr spektakul�r. Wir vergeben f�r das DIV das die Navigation h�lt, eine feste Breite, eine feste H�he und eine Hintergrundfarbe (background-color:#333; Nicht sonderlich schwer :P

Code:

#navigation ul {
	list-style:none;	
}

#navigation ul li {
	float:left;	
}

Direkt 2 Sachen auf einmal? Nein, ich will euch nicht �berfordern. Es ist Kinderleicht.

Unserer unsortieren Liste (<ul>) stehen normalerweise Runde Punkte voran. Eine Aufz�hlung nunmal. So wie die Spiegelstriche in der Schule. Durch "list-style:none" entfernen wird diese "Spiegelstrich".

Diese sehen so aus:

So siehts aus

Im zweiten Teil sagen wir zu unserem Listenpunkt (<li>), dass er sich doch bitte mit den anderen Listenpunkten in eine Reihe stellen soll. Undzwar von Links nach Rechts und nicht von Oben nach Unten. "float:left;" ist das "Zauberwort".

Code:

#navigation ul li a {
	width:auto;
	height:35px;
	display:block;
	line-height:35px;
	padding:0px 15px 0px 15px;	
	text-decoration:none;
	background-color:#333;
	color:#FFF;
	font-weight:bold;
}

So. Jetzt wird es etwas schwieriger. Alles sch�n der Reihe nach.

An dieser Stelle werden die Links (<a>) innerhalb der Listenpunkte (<li>) angesprochen. Diesen geben wir zuerst eine automatische Breite und eine feste H�he von 35 Pixeln.

Dannach erkennen wir die Eigenschaft "display:block". Damit blasen wir unseren Link quasi auf die volle Breite und H�he auf. D.h. wir k�nnen den Link �berall anklicken und nicht nur da wo auch die Schrift "Navigationspunkt 1" steht.

Mit "line-height:35px;" stellen wir die Schrift Vertikal zentriert dar.

Mit "padding:0px 15px 0px 15px;" verbreitern wir unseren Navigationspunkt. Padding steht wie oben bereits erw�hnt f�r den Innenabstand. D.h. vom �u�eren Rand wird ein Abstand von 15 Pixeln nach Innen generiert. D.h. der Link wird um 30 Pixel verbreitert. 15 Pixel an der jeweiligen Seite.

Diese Schreibweise "padding:0px 15px 0px 15px;" ist vielleicht einigen unbekannt. Das ganze l�uft im Uhrzeigersinn.

1. Wert: Innenabstand oben
2. Wert: Innenabstand rechts
3. Wert: Innenabstand unten
4. Wert: Innenabstand links

Code:

text-decoration:none;
background-color:#333;
color:#FFF;
font-weight:bold;

Kein Problem f�r uns. Wie wird ein Link normalerweise dargestellt? So: [Only registered and activated users can see links. Click Here To Register...]. Also Blau und unterstrichen. Das wollen wir nicht. Mit "text-decoration:none;" entfernen wir das unterstreichen, mit "color:#FFF", f�rben wir den Link wei� und mit "font-weight:bold;" wird der Text "Fett" dargestellt.

Dem Link an sich geben wir auch nochmal eine Hintergrundfarbe mit "background-color:#333;".

Code:

#navigation ul li a:hover {
	background-color:#666;	
}

#navigation ul li a:active {
	background-color:#06F;	
}

Mit dem :hover erzeugen wir einen "Mouseover" Effekt. Wenn wir mit der Maus �ber unseren Link (<a>) fahren, wird der Hintergrund etwas heller.

Mit :active erzeugen wir einen "Klick" Effekt. Wenn wir mit der Maus auf unseren Link (<a>) klicken, wird der Hintergrund blau.

4. Abschluss

So, das war es auch schon. Ich hoffe ich habe euch etwas beigebracht ;) F�r Kritik stehe ich immer offen, f�r Verbesserungsvorschl�ge ebenso und wenn ihr Fragen haben solltet, d�rft ihr euch gerne hier melden.

Falls etwas unverst�ndlich ist, sagt mir bescheid und ich werde versuchen es erneut, besser zu erkl�ren oder ich �nder die Stelle im Tutorial gleich. Rechtschreibfehler d�rft ihr mir auch melden.

Damit w�ren wir am Ende.

Bis dann,
gez. galaxyo

Edit:

Auf wunsch erweiter ich das ganze auch noch. Undzwar wie man eine Dropdown Navigation nur mit CSS und ohne JS erstellt.

Quote:

Originally Posted by _BuRn3R_

sehr sch�nes tutorial, gerade f�r mich, da ich gerade dabei bin html & css zu lernen. w�hre sch�n wenn du noch mehr tutorials machst, wird bestimmt vielen helfen.

hier noch ein paar fragen bez�glich css:

was bewirkt "clear:both"?
was macht bzw. wie benutzt man "position:relative/absolute"

das wars auch schon. w�hre sch�n, wenn du zeit findest und mir meine fragen beanworten k�nntest..
mfg BuRn3R

Ich werde demn�chst wahrscheinlich eine kleine Video-Tutorial Reihe anfangen.

Bez�glich deiner Fragen hat dir NotEnoughForYou bereits geholfen.

Falls du es genauer wissen m�chtest, empfehle ich dir folgende CSS-Referenz:
[Only registered and activated users can see links. Click Here To Register...]

Zitat:

Absolute:

Quote:

Absolute Positionierung durch die Angaben left, top, right, bottom. Absolut positionierte Elemente sind au�erhalb des normalen Textflu�, sie liegen �ber den anderen Elementen und beeinflussen somit nicht ihr Layout. Die absolute Position wird relativ zu den R�ndern des Eltern-Elements berechnet, wenn dieses ebenfalls positioniert ist, oder wenn es der Seiteninhalt (<body>) ist. Da sich der Seiteninhalt scrollen l�sst, werden absolut positionierte Elemente mitgescrollt.

Relative:

Quote:

Relative Positionierung vom normalem Flu�. Die normale Position ist wie bei static im normalem Textflu�. Die Positionierungsangaben left, top, right, bottom verschieben das Element aus dieser Position. Die nachfolgenden Elemente verhalten sich so, als w�re das Element nicht verschoben