Hallo chrislennep
Was Du da gemacht hast, kann nicht funktionieren! Grundsätzlich könntest Du nämlich meinen CSS-Code und die Anwendung nur aus meinem
Tutorial kopieren und noch mit den entsprechenden Eigenschaften "füllen" und alles würde funktionieren so wie es das bereits bei vielen anderen tu t
Erstens: Wenn Du Dir mein
Tutorial anschaust, siehst Du, dass ich nicht mit id's arbeite, sondern mit Klassen. Zweitens: Mittels der CSS-Klasse "menu" weise ich ich der Tabelle zu, dass jeder Link in einem Tabellenfeld ein Block-Level-Element ist und dann je nach Action (hover) resp. Zustand (visited) verschiedene Eigenschaften annimmt.
Dazu wird die Basis-Klasse
Code:
table.menu a
{
display: block ;
hier stehen die CSS-Eigenschaften
}
benötigt. Und hier steht natürlich - wie einige bereits richtig feststellten und im
Tutorial auch erwähnt ist - die Anweisung display:block . Damit werden die Tabellenfeldern zu sogenannten Block-Elementen, d.h. das ganze Feld ändert sich dann mit den weiteren Anweisungen unten und nicht nur der direkte Hintergrund hinter dem Text..
Nun musst Du wie bei jeder anderen Link-Formatierung auch die Eigenschaften für a:link, a:visitited und a:hover vorgeben, denn sonst ändert sich ja beim Überfahren des Links mit der Maus nichts und ein bereits angeklickter Link wird eben auch nicht als "visited" dargestellt. Daher also zusätzlich das, was ich im
Tutorial bereits gezeigt habe:
Code:
table.menu a:link
{
hier stehen die Eigenschaften
}
table.menu a:visited
{
hier stehen die Eigenschaften
}
table.menu a:hover
{
hier stehen die Eigenschaften
}
Die Klasse "menu" weise ich wie im
Tutorial dargestellt einfach im Tabellenkopf (<table class="menu">). Die Tabellenlinks verhalten sich nun so wie auf
meiner Seite zu sehen ist - mit einer Ausnahme: Ein gerade aktueller Link wird nicht anders dargestellt.
Ich habe nun zusätzlich eine "Unter-Klasse" für die Links definiert:
Code:
table.menu TD.down a:link
{
hier stehen die Eigenschaften
}
table.menu TD.down a:visited
{
hier stehen die Eigenschaften
}
table.menu TD.down a:hover
{
hier stehen die Eigenschaften
}
Diese Unterklasse weise ich nun nicht mehr der gesamten Menü-Tabelle zu, sondern nur dem Feld, das als "gedrückt" dargestellt werden muss, also mit <td class='down'>.
Die Menü-Tabelle sieht dann also so aus:
Code:
<table class="menu">
<tr>
<td class='down'> <!-- dieser "Button" wird als gedrückt dargestellt -->
(hier steht der Link)
</td>
</tr>
<tr>
<td> <!-- dieser "Button" wird als nicht gedrückt dargestellt -->
(hier steht der Link)
</td>
</tr>
</table>
Wenn Du nun wilst, dass alles ganz bestimmt nicht funktioniert, musst Du einfach alles wieder nach Deinem Gusto ändern
Soll es jedoch funktionieren, kannst Du das Ganze einfach kopieren, die Eigenschaften für die Links dort einfüllen, wo steht "hier stehen die Eigenschaften" und dann läuft's auch bei Dir. Die CSS-Klasse für die Tabelle kannst Du ja für einen ersten Test gleich belassen wie ich das im
Tutorial angegeben habe (ausser dass Du sie bei Verwendung mit einer Tabelle entsprechend umbenennen muss).
Wenn Du's nicht glaubst, dass es so funktioniert, schau Dir den HTML-Code
meiner Seite an, denn ich habe da wirklich nichts anderes gemacht als was ich im Tut und auch hier erklärt habe.
Gruss
René
