alexkiener schrieb:
HTML:
<body id="home" (...) >
<table id="navi" (...) >
(...)
<td>
<a class="home_td" href="#">Home</a>
</td>
so... hab jeweils ne id für den body und für die table vergeben UND für die Tabellenzelle.
Nein. Du hast eine ID für den <body>, eine für den <table> und eine Klasse für den <a>. Die Zelle hat gar nichts.
Code:
#navi a { ... }
#navi a:link { ... }
#navi a:hover { ... }
#navi a:active { ... (background-image + styles) }
#home #navi #home_td a,
home_td ist eine Klasse, die richtige Notation wäre folglich '.home_td'. Und <a> kann auch von der nichts erben. Also wenn überhaupt, dann 'a.home_td'.
WIE muss ich weitere Klassen anlegen damit ich für jede kategorie z.b. "links" (klasse links_td) eigene background images benutzen kann ?
Ich hab mal mein Beispiel von
gestern etwas aufgebohrt, hier gibt es das ganze
am Stück als Demo.
Die Styles sind im HTML integriert. Für die einfachere Pflege sollte man die natürlich auslagern.
HTML:
<style type="text/css">
a.nav {
width: 100px;
height: 18px;
display: block;
text-align: center;
color: #fff;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
a.home {
background: url(red.gif) repeat-x 0px 0px;
}
a.home:hover {
background: url(red.gif) repeat-x 0px -100px;
}
a.news {
background: url(green.gif) repeat-x 0px 0px;
}
a.news:hover {
background: url(green.gif) repeat-x 0px -100px;
}
a.projects {
background: url(oliv.gif) repeat-x 0px 0px;
}
a.projects:hover {
background: url(oliv.gif) repeat-x 0px -100px;
}
a.downloads {
background: url(yellow.gif) repeat-x 0px 0px;
}
a.downloads:hover {
background: url(yellow.gif) repeat-x 0px -100px;
}
a.contact {
background: url(blue.gif) repeat-x 0px 0px;
}
a.contact:hover {
background: url(blue.gif) repeat-x 0px -100px;
}
</style>
a.nav nimmt die allgemeinen Einstellungen für die Navigationspunkte auf, wie Schriftart, Farbe, Größe und sonstiges zum Verhalten des Elements.
Wenn die Hintergrundbilder so unterschiedlich sind, das du für verschiedene Punkte verschiedene Farben verwenden musst, um die Lesbarkeit sicherzustellen, muss z.B. die Farbanweisung in die speziellen Klassen, die es für jeden Link gibt.
a.home definiert den normalen Zustand für den Home-Link, a.home:hover den Zustand beim Überfahren mit der Maus. Das selbe dann für alle anderen Navigationspunkte.
Kleiner Unterschied zu gestern: Es wird nur noch ein Hintergrundbild für jeden Navigationspunkt benutzt und beim überfahren wird festgelegt, das er nur eine andere Stelle anzeigen soll. So werden Blitzer, wie im gestrigen Beispiel, wo das hover-Bild erst nachgeladen werden muss, vermieden.
HTML:
<table>
<tr>
<td><a href="" class="nav home">Home</a></td>
</tr>
<tr>
<td><a href="" class="nav news">News</a></td>
</tr>
<tr>
<td><a href="" class="nav projects">Projects</a></td>
</tr>
<tr>
<td><a href="" class="nav downloads">Downloads</a></td>
</tr>
<tr>
<td><a href="" class="nav contact">Contact</a></td>
</tr>
</table>
Ich hab die Tabelle mal beibehalten, kann es aber nach wie vor nicht gutheißen.
Jeder <a> hat zwei Klassen zugewiesen, zum einen .nav, mit den allgemeinen Anweisungen und zum anderen die für diesen Navigationspunkt spezielle Klasse mit dem Hintergrundbild.
Ich habe für den body eine id vergeben und für die table, damit ich nacher die styles der navi ganz easy aus der css ändern kann...
Das geht auch mit Klassen. Der Vorteil von ID's ist, dass du die auch als Sprunganker innerhalb der Seite verwenden kannst (<a href="#top">Zurück zum Anfang</a>), daraus ergibt sich eine wichtige Eigenschaft von ID's, nämlich das sie innerhalb einer Seite eindeutig sein müssen.
Da body aber im HTML-Dokument nur einmal vorkommt, brauchst du ihm weder Klasse noch ID zuweisen, sondern kannst ihn direkt über 'body {}' ansprechen. Sinnvoll ist die Zuweisung von Klassen dann, wenn der body für verschiedene Seiten unterschiedlich aussehen soll.
Bei Fragen bitte auf den Teil beziehen, den du nicht verstanden hast und nicht wieder neuen HTML-Code, der mit dem vorigen Posting nicht wirklich was zu tun hat, hier reinfeuern.
Matt
