Anzeige

Tabelle Zeile Hover Link

Tabelle Zeile Hover Link | PSD-Tutorials.de

Erstellt von pettipongo, 03.09.2009.

  1. pettipongo

    pettipongo Guest

    Tabelle Zeile Hover Link
    Hallo,

    ich habe wirklich stundenlang nach einer Lösung gesucht. Ich finde auch viele Infos die ähnliches behandeln oder einige Teillösungen. Aber ein effektive funktionierende Lösung habe ich mit diesen ganzen Infos nicht hinbekommen.

    Darum frage ich mal hier im Forum. Es geht um eine Tabelle.
    6 Spalten.
    1 x Oberthema, 5 x icons für links

    Vielleicht hat ja jemand eine super Lösung :eek:)

    ich versuch mich kurz zu fassen, quelltext ist unten..

    1. ein hintergrundbild soll sich in der ganzen tabellenzeile ändern wenn ich hover
    2. die ganze tabellenzeile soll ein link sein
    3. rechts die icons sollen aber trotzdem mit andern links belegt werden können.
    4. die linie von der tabellenzelle in der oberthema drin steht sollte eigentlich über die gesamte zeile gehen
    5. es sollte alles möglichst kompakt sein, denn es ist nur ein klitzekleiner teil aus einem grossen projekt

    QUELLTEXT


    <head>
    <title>Tabelle</title>

    <style type="text/css">
    <!--

    .oberthema_0{

    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #4A4A4A;
    padding-left:10px;
    padding-right:10px;
    background-image: url(./images/leiste_oberthemen.png);
    background-repeat: repeat-x;
    height:30px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #CCCCCC;
    }
    -->
    </style>
    </head>

    <body>



    <table width="100%" border="0" cellspacing="0" cellpadding="0">

    <tr>
    <td class="oberthema_0"><a href="#">Oberthema </a></td>
    <td align="left">&nbsp;</td>
    <td align="left">&nbsp;</td>
    <td align="left">&nbsp;</td>
    <td align="left">&nbsp;</td>
    <td align="left">
    <img src="http://www.psd-tutorials.de/modules/Forum/images/icon_mehr.png" alt="1" width="24" height="24" title="Fragen vorhanden, klicken zum anzeigen"> </td>
    </tr>
    <tr>
    <td class="oberthema_0"><a href="#">Oberthema </a></td>
    <td align="left" valign="middle" class="oberthema_1_speichern_icons">&nbsp;</td>
    <td align="left" class="oberthema_1_icons">&nbsp;</td>
    <td align="left" class="oberthema_1_icons">&nbsp;</td>
    <td align="left" class="oberthema_1_icons">&nbsp;</td>
    <td align="left" class="oberthema_1_icons"><img src="http://www.psd-tutorials.de/modules/Forum/images/icon_mehr.png" alt="1" width="24" height="24"></td>
    </tr>
    </table>

    </body>
    </html>
     
    #1      
  2. thexe

    thexe ein Albtraum

    Dabei seit:
    11.11.2007
    Beiträge:
    551
    Geschlecht:
    männlich
    Ort:
    A:\autostart.exe
    Software:
    CS5 Design Premium
    Kameratyp:
    Pentax K200D
    Tabelle Zeile Hover Link
    AW: Tabelle Zeile Hover Link

    könnte man das ganze nicht besser mit listen umsetzten anstatt von tabellen?
    dadurch sollte der quelltext auch noch ein wenig kürzer sein :)
     
    #2      
  3. pettipongo

    pettipongo Guest

    Tabelle Zeile Hover Link
    AW: Tabelle Zeile Hover Link

    :O)

    eine liste in eine tabellenzelle und in der tabellenzelle ne tabelle mit den icons oder wie meinst du das?
     
    #3      
  4. sh0ck

    sh0ck PST-SURVIVOR

    Dabei seit:
    17.11.2005
    Beiträge:
    53
    Geschlecht:
    männlich
    Ort:
    Fürth / Bayreuth
    Software:
    Adobe Photoshop CS3 Extended, Art Rage Studio Pro, Alchemy, Notepad++
    Tabelle Zeile Hover Link
    AW: Tabelle Zeile Hover Link

    hallo.

    ein lösungsansatz wäre dies: Tabelle
    Code (Text):
    1.  
    2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    3. <html>
    4. <head>
    5. <title>Tabelle</title>
    6.  
    7. <style type="text/css">
    8. <!--
    9. body {
    10.  font-family: verdana, sans-serif;
    11.  font-size: 10pt; color: #4A4A4A;
    12.  }
    13.  
    14. table {
    15.  border-collapse: collapse;
    16.  width: 100%; margin-bottom: 0px;
    17.  }
    18.  
    19. .id0 { background-color: #E7E7E7; }
    20. .id0:hover { background-color: #D9EA73; }
    21.  
    22. .id1 { background-color: #E7E7E7; }
    23. .id1:hover { background-color: #D9EA73; }
    24.  
    25. td {
    26.  height: 30px; padding: 0px 10px;
    27.  border-bottom: 1px solid #CCCCCC;
    28.  text-align: left;
    29.  }
    30.  
    31. a { text-decoration: none; color: #4A4A4A; }
    32. a:hover { text-decoration: underline; color: #EC4D4A; }
    33. -->
    34. </style>
    35.  
    36. </head>
    37. <body>
    38.  
    39. <table class="id0">
    40.          <tr>
    41.                  <td><a href="#">Oberthema</a></td>
    42.                  <td>Icon 01</td>
    43.                  <td>Icon 02</td>
    44.                  <td>Icon 03</td>
    45.                  <td>Icon 04</td>
    46.                  <td><a href="#">Icon 05</a></td>
    47.          </tr>
    48. </table>
    49.  
    50. <table class="id1">
    51.          <tr>
    52.                  <td><a href="#">Oberthema</a></td>
    53.                  <td>Icon 01</td>
    54.                  <td>Icon 02</td>
    55.                  <td>Icon 03</td>
    56.                  <td>Icon 04</td>
    57.                  <td><a href="#">Icon 05</a></td>
    58.          </tr>
    59. </table>
    60.  
    61. </body>
    62. </html>
    63.  
    allerdings weiß ich mit deinem zweiten punkt nichts anzufangen:
    die ganze tabellenzeile soll verlinkt sein. das ist so nicht möglich, ich lasse mich aber gerne eines besseren belehren.

    gruss chris
     
    #4      
  5. pettipongo

    pettipongo Guest

    Tabelle Zeile Hover Link
    AW: Tabelle Zeile Hover Link

    :O)

    das ist schon ungefähr was ich möchte.

    jetzt müsste nur noch statt dem wort Oberthema die ganze zelle der link sein.

    also praktisch: die gesamte zeile ändert ihre farbe beim hover, egal über welche zelle ich hover. aber jede zelle (die gesamte zelle) hat ihren eigenen anderen link.
     
    #5      
  6. sh0ck

    sh0ck PST-SURVIVOR

    Dabei seit:
    17.11.2005
    Beiträge:
    53
    Geschlecht:
    männlich
    Ort:
    Fürth / Bayreuth
    Software:
    Adobe Photoshop CS3 Extended, Art Rage Studio Pro, Alchemy, Notepad++
    Tabelle Zeile Hover Link
    AW: Tabelle Zeile Hover Link

    hallo.

    ahhhhaaaa... jetzt hab' ich es verstanden. nun, dann packe doch einfach einen div-container mit einer höhe und breite von 100% in die tabellenzelle hinein und verlinke ihn. ein lösungsansatz dürfte dann folgendermaßen aussehen: Tabelle

    Code (Text):
    1.  
    2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    3. <html>
    4. <head>
    5. <title>Tabelle</title>
    6.  
    7. <style type="text/css">
    8. <!--
    9. div {
    10.  font-family: verdana, sans-serif;
    11.  font-size: 10pt; color: #4A4A4A;
    12.  width: 100%; height: height: 100%;
    13.  padding: 0px 10px; text-align: left;
    14.  }
    15.  
    16. div:hover { color: #EC4D4A;}
    17.  
    18. table {
    19.  border-collapse: collapse;
    20.  width: 100%; margin-bottom: 0px;
    21.  }
    22.  
    23. td {
    24.  height: 30px;
    25.  border-bottom: 1px solid #CCCCCC;
    26.  }
    27.  
    28. .id0, .id1 { background-color: #E7E7E7; }
    29. .id0:hover, .id1:hover { background-color: #D9EA73; }
    30. -->
    31. </style>
    32.  
    33. </head>
    34. <body>
    35.  
    36. <table class="id0">
    37.          <tr>
    38.                  <td><a href="#"><div>Oberthema</div></a></td>
    39.                  <td><a href="#"><div>Icon 01</div></a></td>
    40.                  <td><a href="#"><div>Icon 02</div></a></td>
    41.                  <td><a href="#"><div>Icon 03</div></a></td>
    42.                  <td><a href="#"><div>Icon 04</div></a></td>
    43.                  <td><a href="#"><div>Icon 05</div></a></td>
    44.          </tr>
    45. </table>
    46.  
    47. <table class="id1">
    48.          <tr>
    49.                  <td><a href="#"><div>Oberthema</div></a></td>
    50.                  <td><a href="#"><div>Icon 01</div></a></td>
    51.                  <td><a href="#"><div>Icon 02</div></a></td>
    52.                  <td><a href="#"><div>Icon 03</div></a></td>
    53.                  <td><a href="#"><div>Icon 04</div></a></td>
    54.                  <td><a href="#"><div>Icon 05</div></a></td>
    55.          </tr>
    56. </table>
    57.  
    58. </body>
    59. </html>
    60.  
    gruss chris
     
    #6      
  7. pettipongo

    pettipongo Guest

    Tabelle Zeile Hover Link
    AW: Tabelle Zeile Hover Link

    :O)

    okay cool vielen dank, ich denke damit sollte ich arbeiten können :)

    daaaaaaanke!!!!!
     
    #7      
x
×
×