✔ tranparenten hintergrund mit hover

[fileshareking]

Guten Tach,

ich habe folgendes Problem.

Meine Navigationsleiste besteht aus einem TD-Tag der ein PHP-include enthält

<td height="16" colspan="2" valign="middle" id="main_navi">
        
           <?php include('navi_tab.php'); ?>
           
     </td>

#main_navi {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #00CCFF;
	text-transform: none;
	font-weight: normal;
	height: 50px;
	background-image: url(pix/layout/bg_header.jpg);
	background-position: left;
	padding-top: 36px;
	clear: both;
	text-align: center;
	}

navi_tab.php sieht folgendermaßen aus:

<table width="795" border="0">

  <tr>
    <td><a href="?content=home">&nbsp;-&nbsp;Start&nbsp;-</a></td>
    <td><a href="?content=anmeldung">-&nbsp;Anmeldung&nbsp;-</a></td>
    <td><a href="?content=unterricht">-&nbsp;Unterricht&nbsp;-</a></td>
    <td><a href="?content=theo">-&nbsp;Theo&nbsp;-</a></td>
    <td><a href="?content=fuehrerschein_ab_17">-&nbsp;FS ab 17&nbsp;-</a></td>
    <td><a href="?content=preise">-&nbsp;Preise&nbsp;-</a></td>
    <td><a href="?content=fahrzeug">-&nbsp;Fahrzeug&nbsp;-</a></td>
    <td><a href="?content=anfahrt">-&nbsp;Anfahrt&nbsp;-</a></td>
    <td><a href="?content=links">- Links -</a></td>
    <td><a href="?content=kontakt">-&nbsp;Kontakt&nbsp;-</a></td>
  </tr>

</table>

So.... nun möchte ich bei den TD-Tags,der Navi-Leiste einen "Hover"-Effekt hinzufügen, sodass die Hintergrundfarbe transparent auf dem Backgroundimage,welches in der #main_navi definiert wird, erscheint...

Bin entweder zu müde oder zu ungebildet, aber wie stell ich das nu an?!

der effekt soll der navi-leiste folgender seite entsprechen:
http://www.thestyleworks.de/tut-art/listnav2.shtml

ist mein Anfang von grund auf falsch? was mach ich nu?

Hoffe auf Hilfe ...vielen Dank im Voraus!

 

[Maik]

Hi,

in dem verlinkten Artikel geht es um die Formatierung von "Listen-Navigationen" - siehe Teil 1 des Tutorials, in dem der Grundaufbau vorgestellt wird - und dein "Tabellen-Konstrukt" zum Auszeichnen der Navigation ist grundsätzlich verkehrt gewählt, da Tabellen semantisch hierfür überhaupt nicht vorgesehen sind.

Ansonsten benötigst du entweder ein halbtransparentes PNG-Bild, das als Hintergrund beim Überfahren der Links dient, oder du setzt den Hover-Effekt mit einer entsprechenden Grafik um, so wie auf thestyleworks.de in der horizontalen Top-Navigation.

Ein Blick auf die Header-Grafik http://www.thestyleworks.de/graphics/css-back-header-7.jpg und die CSS-Regeln (mit der ID #top-navigation) im Stylesheet http://www.thestyleworks.de/css/css-header.css dürfte da für dich aufschlussreich sein.

Wie mit einem Hintergrundbild Hover-Effekte für Links in CSS umgesetzt werden, wird im zweiten Teil des Tutorials aber auch gleich zu Beginn im Absatz "Grafiken als Hintergrund" anhand mehrerer Beispiele demonstriert.

 

[fileshareking]

Vielen dank für die aufschlussreiche Antwort!