Navigation mit Tabelle!

Ivanman

Hab meine Navigation in eine Tabelle verfrachtet und hab jetzt ein paar Fragen!

1.) Wie stelle ich es an dass die ganze Zelle als Link verwendet wird?

2.) Was muss ich ändern damit das Hintergrundbild in den Zellen
durchscheint wenn man die Maus über die einzelnen Zellen bewegt?

3.) Warum funktiort der Mousover-Effekt derzeit nicht im IExplorer? Wo ist
mein Fehler oder kann der Explorer das einfach nicht?

Meine Codes:

navigation.html

HTML

<html>
<head>
<title>Offizielle Homepage des UHC Eggenburg</title>
<link href="CSS/navigation.css" rel="stylesheet" type="text/css">
</head>
<body background="images/navigation/hintergrund.gif">


<table width="100%" align="left" cellspacing="10">
<tr>
<td class="nav">UHE Handball News</td>
</tr>
<td class="nav">Vereinsdaten</td>
</tr>
<td class="nav">Events</td>
</tr>
<td class="nav">Mannschaften, Spielberichte, Statistiken</td>
</tr>
<td class="nav">Schulhandball</td>
</tr>
<td class="nav">Links</td>
</tr>
<td class="nav">Beach Fun</td>
</tr>
<td class="nav">Fotoarchiv online</td>
</tr>
<td class="nav">UHE Fan Shop</td>
</tr>
<td class="nav">Impressum</td>
</tr>
<td class="nav">Sponsoring</td>
</tr>
<td class="nav">Kontakt</td>
</tr>
<td class="nav">Gästebuch</td>
</tr>
</table>


</body>
</html>

Alles anzeigen

navigation.css

Code

td.nav
{
  color: #FFFFFF;
  font-family: "Verdana", sans-serif;
  font-size: 11px;
  font-weight: bold;
  background-color: #006600;
  border-color: #006600;
  border-style: solid;
  border-width: 1px;
}










td.nav:hover
{
  color: #006600;
  font-family: "Verdana", sans-serif;
  font-size: 11px;
  font-weight: bold;
  background-color: #FFFFFF;
  border-color: #006600;
  border-style: solid;
  border-width: 1px;
}

Alles anzeigen

Torty

Zitat von Ivanman

1.) Wie stelle ich es an dass die ganze Zelle als Link verwendet wird?

Ich habe soetwas bisher mit JS gemacht. Dem <td> wird dabei ein onClick-Event zugewiesen. Diesem Event wird der JS-Code für die HTML-Weiterleitung bzw. den -Aufruf verpasst.

Zitat von Ivanman

2.) Was muss ich ändern damit das Hintergrundbild in den Zellen
durchscheint wenn man die Maus über die einzelnen Zellen bewegt?

Das kannst du mit CSS und den Attributen für die Transparenz erreichen. Bei IE ist es filter:alpha(xxx) bei FF/Moz ist es -moz-opacity:xxx und bei Safari ist es opacity:xxx;.
Nicht alle Browser unterstützen diese Attribute und sie verhindern ebenfalls eine erfolgreiche Prüfung durch CSS-Validatoren.
Erst ab CSS3 wird es das generische Attribut opacity geben. Bis dahin ist es ungültiges CSS.

Zitat von Ivanman

3.) Warum funktiort der Mousover-Effekt derzeit nicht im IExplorer? Wo ist
mein Fehler oder kann der Explorer das einfach nicht?

IE und Moz verwenden nicht die selben Attributnamen für den Mouseover-Finger. Hier macht IE 5.x/Win mal wieder ne Eigentour. Für die meisten Browser ist die Angabe pointer richtig. Für den IE bitte hand verwenden.

try it!

Ivanman

Danke!

Das mit der Transparenz hat einwandfrei funktioniert!

Aber ich weiß noch nicht ganz was ich genau beim Mousover-Effekt ändern muss! Kannst du mir das nochmal genauer erklären?

Und vielleicht hat jemand ne Idee wie ich JS umgehen kann!

Ivanman

Habs mittlerweile auch geschafft die komplette Tabellenzelle ohne JS zu verlinken!

Bräucht jetzt nur noch ein bisschen Hilfe beim besagten Mouseover-Effekt!

Torty

Zitat von Ivanman

Habs mittlerweile auch geschafft die komplette Tabellenzelle ohne JS zu verlinken!

Bräucht jetzt nur noch ein bisschen Hilfe beim besagten Mouseover-Effekt!

1.) Wie sieht diese Lösung aus?
2.) Was genau ist das Problem mit dem Mouseover?

Ivanman

Dazu post ich einfach noch mal meine etwas neueren Codes! Der Hintergrund ändert sich nur im Firefox! Was muss ich ändern! Der Tip oben hat mir nicht weitergeholfen weil ich noch nicht so ein Experte bin!

navigation.html

HTML

<html>
<head>
<title>Offizielle Homepage des UHC Eggenburg</title>
<link href="CSS/navigation.css" rel="stylesheet" type="text/css">
</head>
<body background="images/navigation/hintergrund.gif">


<table width="100%" align="left" cellspacing="10" class="links">
<tr>
<td class="nav">[url='test.html']UHE Handball News[/url]</td>
</tr>
<td class="nav">[url='test.html']Vereinsdaten[/url]</td>
</tr>
<td class="nav">[url='test.html']Events[/url]</td>
</tr>
<td class="nav">[url='test.html']Mannschaften, Spielberichte, Statistiken[/url]</td>
</tr>
<td class="nav">[url='test.html']Schulhandball[/url]</td>
</tr>
<td class="nav">[url='test.html']Links[/url]</td>
</tr>
<td class="nav">[url='test.html']Beach Fun[/url]</td>
</tr>
<td class="nav">[url='test.html']Fotoarchiv online[/url]</td>
</tr>
<td class="nav">[url='test.html']UHE Fan Shop[/url]</td>
</tr>
<td class="nav">[url='test.html']Impressum[/url]</td>
</tr>
<td class="nav">[url='test.html']Sponsoring[/url]</td>
</tr>
<td class="nav">[url='test.html']Kontakt[/url]</td>
</tr>
<td class="nav">[url='test.html']Gästebuch[/url]</td>
</tr>
</table>


</body>
</html>

Alles anzeigen

navigation.css

Code

td.nav
{
  color: #006600;
  font-family: "Verdana", sans-serif;
  font-size: 11px;
  font-weight: bold;
  background-color: #FFFFFF style="filter:alpha(opacity=0); -moz-opacity: 0.0;";
  border-color: #006600;
  border-style: solid;
  border-width: 1px;
}










td.nav:hover
{
  color: #FFFFFF;
  font-family: "Verdana", sans-serif;
  font-size: 11px;
  font-weight: bold;
  background-color: #006600;
  border-color: #006600;
  border-style: solid;
  border-width: 1px;
}






.links 


td a 	     {display:block; width:100%; font-size: 11px; font-weight:bold; color:#006600; text-decoration: none}
td a:link    {display:block; width:100%; font-size: 11px; font-weight:bold; color:#006600; text-decoration: none}
td a:visited {display:block; width:100%; font-size: 11px; font-weight:bold; color:#006600; text-decoration: none}
td a:active  {display:block; width:100%; font-size: 11px; font-weight:bold; color:#FFFFFF; text-decoration: none}
td a:hover   {display:block; width:100%; font-size: 11px; font-weight:bold; color:#FFFFFF; text-decoration: none}

Alles anzeigen

Torty

Sieht eigentlich richtig aus. Hmmm...hab iM nur keine Zeit es zu prüfen. Evtl. will der IE die Pseudoklassen :hover ja etwas anders definiert haben. Das ist aber nur ne Schnellschuss-Vermutung...

Modula

Zitat von Torty

Sieht eigentlich richtig aus. Hmmm...hab iM nur keine Zeit es zu prüfen. Evtl. will der IE die Pseudoklassen :hover ja etwas anders definiert haben. Das ist aber nur ne Schnellschuss-Vermutung...

Ohne jetzt den ganzen Thread zu lesen...

der IE kann die pseudoklasse :hover leider _nur_ bei Hyperlinks, d.h. bei <a> Tags

Evtl. hilft dir aber ein Menü weiter an dem ich mal mitgearbeitet habe:

http://tests.daoc-ds.de/Marek/menu/menudiv2.htm

nicht wundern, die css anweisungen sind dort teilweise inline, ich hab jetzt aber nicht großartig lust etwas altes zu überarbeiten

Ivanman

Danke! Habs ein bissl umgeschrieben und is jetzt genau das was ich haben wollte!

Modula

Modula: das menu, das du da gemacht hast, ist super. danke, dass dus hier reingestellt hast!!

Tags

Benutzer online in diesem Thema