Ergebnis 1 bis 10 von 10

Thema: Navigation mit Tabelle!

  1. #1
    Großmeister(in)
    Registriert seit
    06.06.2005
    Beiträge
    545
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Navigation mit Tabelle!

    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
    Code:
    <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>
    navigation.css
    Code:
    td.nav
    &#123;
      color&#58; #FFFFFF;
      font-family&#58; "Verdana", sans-serif;
      font-size&#58; 11px;
      font-weight&#58; bold;
      background-color&#58; #006600;
      border-color&#58; #006600;
      border-style&#58; solid;
      border-width&#58; 1px;
    &#125;
    
    
    
    
    
    td.nav&#58;hover
    &#123;
      color&#58; #006600;
      font-family&#58; "Verdana", sans-serif;
      font-size&#58; 11px;
      font-weight&#58; bold;
      background-color&#58; #FFFFFF;
      border-color&#58; #006600;
      border-style&#58; solid;
      border-width&#58; 1px;
    &#125;
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiserliche Hoheit
    Registriert seit
    22.02.2005
    Beiträge
    1.558
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Re: Navigation mit Tabelle!

    Zitat 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 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-opacityxx und bei Safari ist es opacityxx;.
    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 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!
    "Carpe Diem" powered by positiv Feelings

  3. #3
    Großmeister(in)
    Themenstarter

    Registriert seit
    06.06.2005
    Beiträge
    545
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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!

  4. #4
    Großmeister(in)
    Themenstarter

    Registriert seit
    06.06.2005
    Beiträge
    545
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

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

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

  5. #5
    Kaiserliche Hoheit
    Registriert seit
    22.02.2005
    Beiträge
    1.558
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Zitat 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?
    "Carpe Diem" powered by positiv Feelings

  6. #6
    Großmeister(in)
    Themenstarter

    Registriert seit
    06.06.2005
    Beiträge
    545
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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
    Code:
    <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">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>


    navigation.css
    Code:
    td.nav
    &#123;
      color&#58; #006600;
      font-family&#58; "Verdana", sans-serif;
      font-size&#58; 11px;
      font-weight&#58; bold;
      background-color&#58; #FFFFFF style="filter&#58;alpha&#40;opacity=0&#41;; -moz-opacity&#58; 0.0;";
      border-color&#58; #006600;
      border-style&#58; solid;
      border-width&#58; 1px;
    &#125;
    
    
    
    
    
    td.nav&#58;hover
    &#123;
      color&#58; #FFFFFF;
      font-family&#58; "Verdana", sans-serif;
      font-size&#58; 11px;
      font-weight&#58; bold;
      background-color&#58; #006600;
      border-color&#58; #006600;
      border-style&#58; solid;
      border-width&#58; 1px;
    &#125;
    
    
    
    .links 
    
    td a 	     &#123;display&#58;block; width&#58;100%; font-size&#58; 11px; font-weight&#58;bold; color&#58;#006600; text-decoration&#58; none&#125;
    td a&#58;link    &#123;display&#58;block; width&#58;100%; font-size&#58; 11px; font-weight&#58;bold; color&#58;#006600; text-decoration&#58; none&#125;
    td a&#58;visited &#123;display&#58;block; width&#58;100%; font-size&#58; 11px; font-weight&#58;bold; color&#58;#006600; text-decoration&#58; none&#125;
    td a&#58;active  &#123;display&#58;block; width&#58;100%; font-size&#58; 11px; font-weight&#58;bold; color&#58;#FFFFFF; text-decoration&#58; none&#125;
    td a&#58;hover   &#123;display&#58;block; width&#58;100%; font-size&#58; 11px; font-weight&#58;bold; color&#58;#FFFFFF; text-decoration&#58; none&#125;

  7. #7
    Kaiserliche Hoheit
    Registriert seit
    22.02.2005
    Beiträge
    1.558
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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...
    "Carpe Diem" powered by positiv Feelings

  8. #8
    Kaiserliche Hoheit
    Registriert seit
    15.07.2005
    Ort
    Hagen (NRW)
    Beiträge
    1.515
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Zitat 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
    Zoggerforum.de Betreuer * Mod @ ibforen.de * Admin @ daoc-ds.de
    ICQ Nummer kann via PN erfragt werden

  9. #9
    Großmeister(in)
    Themenstarter

    Registriert seit
    06.06.2005
    Beiträge
    545
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

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

  10. #10
    Gast

    Standard

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

Ähnliche Themen

  1. Navigation
    Von jaelle50 im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 12.04.2008, 16:55
  2. Navigation
    Von gget-crunk im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 03.04.2008, 16:25
  3. Navigation
    Von w.white (als Gast) im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 6
    Letzter Beitrag: 25.02.2007, 18:04
  4. MySQL Werte von Tabelle a in Tabelle b eintragen.
    Von Barret im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 0
    Letzter Beitrag: 08.02.2007, 11:42
  5. Navigation
    Von Dhoem im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 09.06.2005, 19:44

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •