Hauptmenü
Weitere Optionen
Tutorial suchen(X)HTML / CSS Tutorial: Simple Navigation mit HTML und CSS
+1
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 :
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 :
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
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:
Schlüsserwörter:  CSS HTML listen navi tutorial |
Themenverwandte Tutorials
- Transparente Schrift superleicht
- Felge - Modelling einer Felge in 84 Steps :P
- Schrift bearbeitung
- Mograph - Spline / cloner object tutorial
- Einfacher roter Text
- 80ger Jahre RETRO Effekt
- Tarnmuster mit Photoshop
- Ersten Artikel automatisch mit CSS hervorheben
- Sessions und Cookies
- Visualisierung von technischen Bauteilen mit Splines und Sweep-NURBS
Kommentar(e) (11)
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 ^^
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 ;)
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
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:
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ß
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.
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ß
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
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 ;)
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
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 •
Kommentar eintragen
!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!
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 •