am 07.07.2007 um 17:11 Uhr
Grafiken Flash HTML & CSS PHP & MySQL Javascript Fertige Skripte Anderes Statistik
|
|
Anzeigen
|
1x bewertet
Dieses Tutorial war gewünscht, also hier ist es :)
Es geht darum so einen ähnlichen over-effekt in der Navi zu machen wie auf Giatu.de
Wir versuchen zu diesem Beispiel zu kommen: BEISPIEL (Ziel speichern unter, wenn ihr es herunterladen wollt)
Die Kommentare erklären eigentlich alles. unsere Klasse heisst menu und dann schreiben wir dort wo es angezeigt werden soll einfach <div class="menu">
Wir könnten unseren CSS Code natürlich auch in eine externe CSS-Datei einfügen wie hier zu sehen.
Wenn es sonst noch Fragen gibt, seid ihr hier an der richtigen Stelle!
Es geht darum so einen ähnlichen over-effekt in der Navi zu machen wie auf Giatu.de
Wir versuchen zu diesem Beispiel zu kommen: BEISPIEL (Ziel speichern unter, wenn ihr es herunterladen wollt)
<html>
<head>
<title>Navigation #1</title>
<style>
.menu {
width:150px; /* Breite des Menüs! */
}
.menu a { /* Link ohne Over */
font-family:verdana; /* Schriftart: Verdana */
font-size:11px; /* Schriftgröße: 11px */
color:#00CC33; /* Schriftfarbe */
text-decoration:none; /* Bei Links muss man immer text-decoration:none schreiben sonst wird das unterstrichen */
width:150px; /* Breite des Links */
display:block; /* Wird falsch angezeigt sonst bei Firefox */
padding-left:10px; /* Abstand nach Links */
}
.menu a:hover { /* Link Over */
color:#ffffff; /* Schriftfarbe */
text-decoration:none; /* Bei Links muss man immer text-decoration:none schreiben sonst wird das unterstrichen */
background-color:#00CC33; /* Hintergrundfarbe */
width:150px; /* Breite des Links */
border-left:8px solid #FFCC99; /* Linker Rand, der erscheint dann links. hier 8px breit und die Farbe #FFCC99 */
padding-left:2px; /* Abstand Links */
}
</style>
</head>
<body>
<div class="menu"><!--Hier beginnt das Menü-->
<a href=#>Link Here</a><!--Ein Link -->
<a href=#>Link Here</a>
<a href=#>Link Here</a>
<a href=#>Link Here</a>
<a href=#>Link Here</a>
</div><!--Hier endet es-->
</body>
</html>
Die Kommentare erklären eigentlich alles. unsere Klasse heisst menu und dann schreiben wir dort wo es angezeigt werden soll einfach <div class="menu">
Wir könnten unseren CSS Code natürlich auch in eine externe CSS-Datei einfügen wie hier zu sehen.
Wenn es sonst noch Fragen gibt, seid ihr hier an der richtigen Stelle!
4 Kommentare
das check ich nicht..das ist ja ein ganzes html dings xD das ist ja wie ein layout, und das braucht man für eine navi? so ein riesen code? wo soll man denn das hinschreieben?
Reiko
echt gibt doch nen einfacherern weg dafür
am 17.07.2007 um 21:36 Uhr
sie hat doch geschrieben das man es auch in eine css einfügen kann.. der code für die navigation alleine ist ja nur das zwischen style & style ^^
am 23.09.2007 um 17:45 Uhr
Fullmoon
aww ich liebe dieses tut!
danke :3
am 28.10.2007 um 10:06 Uhr