Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

(X)HTML / CSS Tutorial: Simple Navigation mit HTML und CSS



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

In diesem Tutorial zeige ich euch ,wie man mit Hilfe von HTML und CSS eine ganz simple Navigation macht , ohne davor in Photoshop eine designen zu müssen.

Step 1 :

Als erstes erstellen wir 2 Dateien :

- index.html
- style.css

Step 2 :

Dann coden wir mit HTML innerhalb der index.html das Grundgerüst des Ganzen :

Code:


<html>

<head>

<title>CSS Navigation by vocke</title>

<link href="style.css" rel="stylesheet" type="text/css">

</head>



<body>

<h1>CSS Navigation by vocke</h1>



<ul id="navi">

    <li><a href="#">Link</a></li>

    <li><a href="#">Link</a></li>

    <li><a href="#">Link</a></li>

    <li><a href="#">Link</a></li>

    <li><a href="#">Link</a></li>

    <li><a href="#">Link</a></li>

</ul>



</body>



</html>




Step 3 :

Nun gehen wir in die style.css um unsere index.html zu "stylen" . Wir definieren in dieser :

- body
- h1
- #navi (---> Die ungeordnete Liste hat die id "navi")
- #navi li (---> Die Listenelemente der Ungeordneten Liste "navi")
- #navi li a (---> Alle Links innerhalb der "li's")
- #navi li a:hover (---> Hovereffekt für die Navigation)

Als erstes würde ich aber immer erst 5 Farben definieren mit denen ich dann arbeiten werde.
Ich habe mich in diesem Fall für #0076a3 , #0076a3 und #754c24 entschieden. Da ich kein ganzes Template code brauche ich in diesem Fall nur 3 Farben.

Step 4 :

Jetzt definieren wir die oben genannten Sachen :

Code:


body {

    background-color:#0076a3;

    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;

    font-size:11px;

}



h1 {

    font-size:20px;

    font-family:Arial, Helvetica, sans-serif;

}



#navi {

    list-style-type:none;

}



    #navi li {

    }

    

    #navi li a {

         display:block;

        background-color:#0076a3; //Hintergrundfarbe eines Navibuttons

        width:100px; //Breite eines Navibuttons

        height:27px; //Höhe eines Navibuttons

        float:left; //Anordnung der Buttons nach rechts

        margin-right:2px; //Abstand der Buttons

        text-align:center; //Text innerhalb des Buttons zentriert

        padding-top:8px; //Die Schrift vom Button wird 8 px von oben aus heruntergesetzt

        text-decoration:none; //Ohne diesen Befehl wäre die Schrift im Button unterstrichen

        color:#0076a3; //Schriftfarbe

        border-bottom:2px solid #111111; //Border-Dicke , Art und Farbe

    }

    

    #navi li a:hover {

        border-bottom:2px solid #754c24;

        color:#754c24;

    }




So das wars auch schon. Ich hoffe ich konnte euch irgendwie weiterhelfen und man konnte mir gut folgen.
Zu allerletzt habe ich hier noch eine kleine Demo für euch online gesetzt damit ihr wisst wie das dann aussieht :

http://vocke.kilu.de/csstutorial/

Mit vielen Grüßen vocke

Veröffentlicht von: vocke
Veröffentlicht am: 12 Jun. 2009
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter: CSS HTML listen navi tutorial


Themenverwandte Tutorials


Kommentar(e) (11)


deleted_1278200082 sagt:

das A und 0 in dem beruf ;)
halbfertige tuts bringen leider "keinem" was (ohne know-how).
deswegen der hinweis, bevor du weitere tuts schreibst :)

da der ie leider immer noch der weitverbreiteste browser ist, solltest du IHM mitunter die meiste aufmerksamkeit schenken (natürlich auch den restlichen brwosern).

grüße

Zuletzt bearbeitet am: 16 Jun. 2009 00:44:56

15 Jun. 2009 22:04:33 • Antworten


vocke sagt:

oha ... shit :D hab jetzt garnicht auf die kompatibilität mit anderen browsern geachtet ... wollte ja nur zeigen wie man das anwenden kann ...
tut mir leid ^^

15 Jun. 2009 18:09:38 • Antworten


vocke sagt:

stimmt wohl ... muss ich nochmal überarbeiten wenn ich zeit habe danke für die info ;)

15 Jun. 2009 18:08:01 • Antworten


chriss sagt:

http://zeug.christianruppelt.de/csssafarifail.png

Zuletzt bearbeitet am: 15 Jun. 2009 11:14:20

15 Jun. 2009 11:14:01 • Antworten


deleted_1278200082 sagt:

Zitat vocke:

ja das weiß ich aber in dem code auf der homepage ist das kommentag ja nicht ... sonst würde es ja auch nicht so angezeigt werden ...

ist nur hier im tut so , dass das andere die nicht so viel ahnung von css haben gut verstehen können ...

gruß



ist mir bewusst, nur die kommentare hättest du auch ohne weiteres für das css lassen können, nur eben richtig geschrieben. das hätte keinen einfluss auf die darstellung und eben weil´s ja leute gibt, die keine ahnung haben.

daher auch der hinweis aufs doctype und zeichenkodierung.

ändert aber alles nichts an der tatsache, dass die darstellung im internet explorer eine andere ist als im firefox und so bringts ja auch nix.

gruß

14 Jun. 2009 23:16:58 • Antworten


_chris sagt:

Höö? Waren doch kontrekte Vorschlage mit dem was du machen könntest, sonst wären es ja Wünsche.

14 Jun. 2009 19:19:02 • Antworten


vocke sagt:

ja das weiß ich aber in dem code auf der homepage ist das kommentag ja nicht ... sonst würde es ja auch nicht so angezeigt werden ...

ist nur hier im tut so , dass das andere die nicht so viel ahnung von css haben gut verstehen können ...

gruß

14 Jun. 2009 11:38:21 • Antworten


deleted_1278200082 sagt:

nur so als tipp:

selbst wenn´s ein bsp. ist, den doctype sollteste vllt schon noch anfügen, wo ist das meta-tag für die zeichenkodierung? so ist es nicht valide. kommentare werden in css so geschrieben (beispiel):

width:100px; /* breite eines navibuttons */

ps: die seite mal im IE angeschaut? ;)

grüße

Zuletzt bearbeitet am: 14 Jun. 2009 00:48:44

14 Jun. 2009 00:39:20 • Antworten


vocke sagt:

ja aber wenns keinen interessiert dann bringts ja nix wenn ichs hier reinstelle ...
also schon konkrete vorschläge und wünsche posten ;)

13 Jun. 2009 19:40:15 • Antworten


_chris sagt:

Kannst ja halt theoretisch die ganzen Standardsachen nochmal schreiben, würde aber vorher gucken was hier bereits vorhanden ist. Also von Div hor & ver zentrieren, Formulare ohne Java via Pseudo, logische CSS Gestaltung usw

13 Jun. 2009 18:43:48 • Antworten



Anfang

<<

1

2>>Ende

Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


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