Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

(X)HTML / CSS Tutorial: Eine semantische, horizontale Navigation in HTML 5 mit CSS gestalten



Ranking: +1   Kommentare: 9   |   Bewertung: Keine Berechtigung!  

Da ich grade im Forum eine Frage zu einem Problem mit einer Navigation beantworten wollte, mich aber nicht kurz genug fassen konnte, dachte ich mir ein Tutorial ist eventuell Sinnvoller.

Voraussetzungen: Grundlagen in CSS 2.1 / CSS 3 und HTML 4.01 / HTML 5.

Mein Beispielcode wird in HTML 5 sein, wer sich mit HTML 4.01 auskennt dürfte aber keine Probleme haben sich das ganze abzuleiten. (Oder eben auf HTML 5 umzusteigen ;)

Aufgabenstellung: Ich möchte eine horizontale Navigation mit einem dunkelblauen Hintergrund. Die Navigationspunkte sollen schwarz hinterlegt sein und bei der Berührung mit der Maus hellblau aufleuchten.




Fangen wir also mit dem HTML Code an:

Code:




<!DOCTYPE html>

    <html>

        <head>

            <meta http-equiv="content-type" content="text/html; charset=UTF-8">



            <title>Jetzt lerne ich CSS</title>

            <style type="text/css" media="screen">

                /* Hier folgt nun der spätere CSS-Code. */

            </style>

        </head>

        <body>

            <h1>Jetzt lerne ich CSS</h1>

            <nav>

                <ul class="clearfix">

                    <li id="active"><a href="index.html"><span>Startseite</span></a></li>

                    <li><a href="seite2.html"><span>Seite 2</span></a></li>

                    <li><a href="seite3.html"><span>Seite 3</span></a></li>

                    <li><a href="seite4.html"><span>Seite 4</span></a></li>

                </ul>

            </nav>

        </body>

    </html>



Bitte beachtet das ich, der Übersicht halber, nur den absolut nötigen HTML-Code benutzt habe. Um zu lernen wie man eine Seite Sinnvoll strukturiert lernen wir ein anderes Mal. ;)

Das ganze sollte nun so in Eurem Browser aussehen:
Bild 1
Bild 1


Der eigentlich spannende Teil befindet sich nun hier:

Code:




            <nav>

                <ul class="clearfix">

                    <li id="active"><a href="index.html"><span>Startseite</span></a></li>

                    <li><a href="seite2.html"><span>Seite 2</span></a></li>

                    <li><a href="seite3.html"><span>Seite 3</span></a></li>

                    <li><a href="seite4.html"><span>Seite 4</span></a></li>

                </ul>

            </nav>



Wer <nav> noch nicht kennt sollte sich mit HTML 5 auseinander setzen, hier gibt es einige Probleme mit dem IE …

Was also haben wir hier:
In einfachen Worten: Eine ungeordnete (<ul>) Navigationsliste (<nav>) mit 4 Links (<a>) von denen einer als Aktiv (<li id="active">) markiert ist.

Wie man sieht ist der HTML-Part eher unspannend, kommen wir also direkt zum CSS-Code:



Vorab muss ich kurz den Hinweis geben das wir auf eine nicht von mir entwikelte Technik zurückgreifen werden. Das sogenannte Easy Clearing. (http://www.positioniseverything.net/easyclearing.html) Warum / wozu das ganze dient erkläre ich im Laufe des Tutorials. Im HTML-Code ist der Part schon eingebaut (<ul class="clearfix">).



In meinem Beispiel wollen wir eine horizontale Navigation haben, wir müssen also die Listenpunkte in eine Reihe bringen. Da gibt es mehrere ansätze, ich nutze am liebsten die CSS-Eigenschaft „float“. Außerdem müssen wir dafür sorgen das die Abstände die das HTML-Attribut <ul> mit sich bringt ebenfalls verschwinden. Nicht zu vergessen ist der Listenpunkt, der in einer horizontalen Liste eher nerven würde.

Code:




nav ul {

    margin:     0;            /* Außenabstand auf 0. */

    padding:    0;            /* Innenabstand auf 0. */

    list-style: none;        /* Kein Listenzeichen. */

}

nav ul li {

    float: left;

}




Sollte jetzt in etwa so aussehen:
[screenshot step 2]Bild 2
Bild 2



Sieht jetzt ein bisschen gequetscht aus, oder? Sorgen wir dafür das die Links ein wenig Luft zum Atmen haben.

Code:




nav ul {

    margin:     0;            /* Außenabstand auf 0. */

    padding:    0;            /* Innenabstand auf 0. */

    list-style: none;        /* Kein Listenzeichen. */

}

nav ul li {

    float: left;

}

nav ul li a {

    display: block;

    padding: 5px;            /* Innenabstand auf 5px. */

}



Warum geben wir jetzt dem Link (<a>) und nicht dem <li> den Abstand? Das hat den Vorteil das im Browser die gesamte Fläche klickbar ist. Außerdem könnten wir nun dem <a> eine fixe Höhe und eine fixe Breite geben um z.B. mit einem Hintergrundbild zu arbeiten.

Bringen wir etwas Farbe in’s Spiel. Das macht das ganze deutlicher:

Code:




nav ul {

    margin:     0;            /* Außenabstand auf 0. */

    padding:    0;            /* Innenabstand auf 0. */

    list-style: none;        /* Kein Listenzeichen. */

    background: #393583;

}

nav ul li {

    float: left;

}

nav ul li a {

    display:    block;

    padding:    5px;        /* Innenabstand auf 5px. */

    background: #000;

    color:      #fff;

}

nav ul li a:hover {

    background: #3c39ff;

    color:      #fff;

}




Whoops, wo ist jetzt der dunkelblaue Hintergrund der Navigation? – Ach ja, da war ja etwas mit dem clearing und der fremden Technik … Warum / Wieso wird alles auf der Seite (Link oben oder unten bei den Quellen) erklärt. Wir nutzen das jetzt einfach mal.

Code:




nav ul {

    margin:     0;            /* Außenabstand auf 0. */

    padding:    0;            /* Innenabstand auf 0. */

    list-style: none;        /* Kein Listenzeichen. */

    background: #393583;

}

nav ul li {

    float: left;

}

nav ul li a {

    display:    block;

    padding:    5px;        /* Innenabstand auf 5px. */

    background: #000;

    color:      #fff;

}

nav ul li a:hover {

    background: #3c39ff;

    color:      #fff;

}

.clearfix:after {

    content: ".";

    display: block;

    height: 0;

    clear: both;

    visibility: hidden;

}

.clearfix {

    display: inline-block;  /* for IE/Mac */

}




Soo, jetzt haben wir auch unser Blau.

Bild 3
Bild 3

Zu Kontrolle


Jetzt könnte man noch statt der wechselnden Hintergrundfarbe natürlich auch grafiken nehmen. Alterantiv ist auch ein ausblenden der Schrift möglich:

Code:




nav ul li a span {

    display: none;

}



Bitte beachtet unbedingt dass das Attribut <a> auf die Pseudoklassen :hover, :visited, :active zurückgreifen kann. Diese sollte man auch unbedingt nutzen! (Hinweise dazu z.B. auf www.css4you.de)



Quellen:
http://www.positioniseverything.net/easyclearing.html
http://www.css4you.de

Bei Fragen oder Problemen diese bitte im Forum stellen.

Veröffentlicht von: chriss
Veröffentlicht am: 30 May. 2009
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter: HTML


Themenverwandte Tutorials


Kommentar(e) (9)


Neils sagt:

Also ich hab mir das jetzt nicht alles durchgelesen aber mir sind 2 sachen aufgefallen und zwar das du clearfix benutzt, was bei navigationen garnicht notwendig ist, du hast bestimmt den nav container einfach nicht mit der höhe, die auch später dein menü hat formatiert so das beim float die navi aus dem container rutscht. clearfix ist somit garnicht notwendig

16 Mar. 2010 09:52:13 • Antworten


chriss sagt:

Zitat DennisBlack:

Zitat chriss:

Edit: nvm. Du hattest natürlich recht, ein bisschen Recherche hat mir grade die Augen geöffnet. Ich bin bisher davon ausgegangen das Screenreader die Anweisung display: none; übergehen. Schade eigentlich



Ich hatte früher auch gedacht, das Screenreader und Suchmaschinen nur die Syntax durch gehen, sprich nur den HTML-Code ihne CSS.

Bis ein Kollege mich drauf aufmerksam gemacht hat.

Man lernt doch immer wieder was neues dazu :P



Na ja, das CSS zumindest von Screenreader beachtet wird war mir schon klar, (gibt ja spezielle Anweisungen, aureal und Co.) aber ich dachte halt das gestalterische Elemente übergangen werden. Schade!

Ich find’s gut neue Dinge zu lernen, darum mag’ ich meinen Beruf so! :)

2 Jun. 2009 15:25:03 • Antworten


deleted_1373545880 sagt:

Zitat chriss:

Edit: nvm. Du hattest natürlich recht, ein bisschen Recherche hat mir grade die Augen geöffnet. Ich bin bisher davon ausgegangen das Screenreader die Anweisung display: none; übergehen. Schade eigentlich



Ich hatte früher auch gedacht, das Screenreader und Suchmaschinen nur die Syntax durch gehen, sprich nur den HTML-Code ihne CSS.

Bis ein Kollege mich drauf aufmerksam gemacht hat.

Man lernt doch immer wieder was neues dazu :P

2 Jun. 2009 14:58:45 • Antworten


chriss sagt:

Edit: nvm. Du hattest natürlich recht, ein bisschen Recherche hat mir grade die Augen geöffnet. Ich bin bisher davon ausgegangen das Screenreader die Anweisung display: none; übergehen. Schade eigentlich

Zuletzt bearbeitet am: 2 Jun. 2009 10:51:00

2 Jun. 2009 10:38:50 • Antworten


deleted_1373545880 sagt:

Zitat chriss:

Zitat DennisBlack:

Was soll der Tag im ? Schwachsinn meiner Meinung.

gibbse dem Tag "display:block" und dann "text-indent:-9999px;"

bessere Lösung für Suchmaschienen optimierung!



Welcher Tag? Und warum sollte das besser für Google & Co. sein? o_O



"<span>"Startseite</span>" den Tag mein ich.

Du sagst in der CSS "display:none" also wird der Komplette Text ausgeblendet.

In meiner Version mit "display:block" und "text-indent:-9999px" wird der Text lediglich verschoben und nicht ausgeblendet. Wenn jetzt die Suchmaschienen die Seite durchgehen erkennen Sie den Text/Link. Bei deiner Version nicht.

Man schreibt ja auch kein "<h1></h1>" Tag und setzt dies dann auf "display:none". Er gibt ja keinen Sinn.

Desweiteren denk mal an Leute die Blind sind und mit einem Screenreader die Seite druchgehen. Wenn dann alle Links "display:none"; gesetzt sind erkennt das Programm diese nicht und der Benutzer weiss nichtmal das es eine Navigation gibt.

Zuletzt bearbeitet am: 2 Jun. 2009 10:35:19

2 Jun. 2009 10:32:47 • Antworten


chriss sagt:

Zitat DennisBlack:

Was soll der Tag im ? Schwachsinn meiner Meinung.

gibbse dem Tag "display:block" und dann "text-indent:-9999px;"

bessere Lösung für Suchmaschienen optimierung!



Welcher Tag? Und warum sollte das besser für Google & Co. sein? o_O

2 Jun. 2009 10:11:27 • Antworten


deleted_1373545880 sagt:

Was soll der Tag im ? Schwachsinn meiner Meinung.

gibbse dem <li> Tag "display:block" und dann "text-indent:-9999px;"

bessere Lösung für Suchmaschienen optimierung!

Zuletzt bearbeitet am: 2 Jun. 2009 09:36:51

2 Jun. 2009 09:35:33 • Antworten


chriss sagt:

Mir ist die mangelhafte Titelwahl des Tutorials ebenfalls schon aufgefallen. Leider kann ich das selbst nicht nachträglich editieren und um Eugen damit zu belästigen erschien mir das ehrlich gesagt nicht wichtig genug.

Scheinbar stört das Wort „Gestalten“ aber doch massiv. – Besser wäre es wohl wenn ich da „umsetzen“ o.Ä. geschrieben hätte. Verzeih’ mir bitte diesen fauxpas.

1 Jun. 2009 19:24:17 • Antworten



Anfang

<<

1

>>

Ende

Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder