[Tutorial] Navigation mit CSS

[galaxyo]

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.

<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:

* {
	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:

* {
	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.

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.)

#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.

#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

#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".

#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

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

Kein Problem für uns. Wie wird ein Link normalerweise dargestellt? So: . 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;".

#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.

[NotEnoughForYou]

Hey, ganz gut, nur gehört das ja eig in die Tutorial Section .

Und width bzw. height:auto kann man auch weglassen.

[galaxyo]

Ou, dann würde ich einen Mod darum bitten, dass ganze zu verschieben.

Ja, man kann es weglassen. Ich habe es nur gerne vollständig

[__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

[NotEnoughForYou]

clear:both; hebt den float in beide Richtungen auf ( alternativ gibt es clear:left & right ).
Position relative positioniert das element immer relativ zu seinem übergeordneten & absolute nimmt das Element aus dem Dokumentenfluss ( es beeinfluss die andern Elemente nicht mehr ).

[galaxyo]

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:


Zitat:

Absolute:

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:

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

[__BuRn3R]

vielen dank, an euch, hat mir viel geholfen.

[galaxyo]

Als Video.

Zwar nicht so gut erklärt aber ihr habt ja noch den Text

[.Scare™]

hey, das ist eig. ein supper tut für anfänger. was mich noch interesieren würde.. ein kleines Tut von den Kurzbefehlen von Zen Coding.. =) ich arbeite gerade selber mit dem seit ich es hier in dem Vid von dir gehört habe. dachte aber das nicht ich ein solches tut mache sondern bessereiner der es schon längers kennt.

mfg =)

[galaxyo]

Sorry aber diesbezüglich werde ich denke ich kein Tutorial machen. So schwer ist das ganze gar nicht.

1.
2.

Da steht soweit recht viel.

[[I]Inquisitor]

Dreamweaver mmm, beste programm für web design.

[galaxyo]

Originally Posted by [I]Inquisitor

Dreamweaver mmm, beste programm für web design.

Schon, aber was hat das mit diesem Tutorial zu tun?

Direkt mal der Push, damit das ganze hier mal wieder nach oben kommt

[GodHacker]

Dropdown ohne js bitte.

[adistoe]

Kurze Frage:

Warum <div id="Navigation"> anstatt <nav> ?

wäre HTML5

[galaxyo]

Originally Posted by adistoe

Kurze Frage:

Warum <div id="Navigation"> anstatt <nav> ?

wäre HTML5

Schau mal aufs Datum du HTML5