Anzeige

Tabellenzeile als Link

Tabellenzeile als Link | PSD-Tutorials.de

Erstellt von 1A_Photoshop, 04.03.2013.

  1. 1A_Photoshop

    1A_Photoshop Nicht mehr ganz neu hier

    Dabei seit:
    06.06.2012
    Beiträge:
    191
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Photoshop
    Kameratyp:
    Fuji S5 Pro und Canon 600d
    Tabellenzeile als Link
    Gibt es mittlerweile die Möglichkeit mit xhtml oder css eine Tabellenzeile (die mehre Spalten enthält) anklickbar zu machen?
    Sprich: man fährt über die Tabellenzeile die wird gehovert und man kann dann per Mausklick irgendwo anders hingeleitet werden?
     
    #1      
  2. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.075
    Geschlecht:
    männlich
    Ort:
    Ö
    Tabellenzeile als Link
    AW: Tabellenzeile als Link

    Mittels JS kannst du so etwas gut lösen. Du musst der Zeile einen onclick Eventhandler zuweisen und dann deine gewünschte Aktion ausführen. Einen :hover Effekt kannst du natürlich mittels CSS realisieren (tr:hover)
     
    #2      
  3. 1A_Photoshop

    1A_Photoshop Nicht mehr ganz neu hier

    Dabei seit:
    06.06.2012
    Beiträge:
    191
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Photoshop
    Kameratyp:
    Fuji S5 Pro und Canon 600d
    Tabellenzeile als Link
    AW: Tabellenzeile als Link

    Dank dir Myhar. Das mit dem (tr:hover) ist klar. Aber ich wollte nicht unbedingt JS einsetzen, da es nur 67% meiner Besucher benutzen. Deshalb such ich nach eine html+css Lösung.
    Gibt es dafür in html5, ein Lösungsansatz?
     
    #3      
  4. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.075
    Geschlecht:
    männlich
    Ort:
    Ö
    Tabellenzeile als Link
    AW: Tabellenzeile als Link

    Du kannst in jede Zelle einen Link platzieren, dann brauchst du kein JS. Auch in HTML5 ist es meines Wissens nach nicht erlaubt, den Link einfach um die tr zu legen. Sind die einzelnen Links exakt so groß wie die Zellen, dann wirkt es so, als ob es ein großer Link wäre.
     
    #4      
  5. 1A_Photoshop

    1A_Photoshop Nicht mehr ganz neu hier

    Dabei seit:
    06.06.2012
    Beiträge:
    191
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Photoshop
    Kameratyp:
    Fuji S5 Pro und Canon 600d
    Tabellenzeile als Link
    AW: Tabellenzeile als Link

    Wie meinst du das? Wie bekomme ich einen Link exakt so groß wie eine Zelle?
    Sorry, steh gerade ein wenig auf dem Schlauch.
     
    #5      
  6. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.075
    Geschlecht:
    männlich
    Ort:
    Ö
    Tabellenzeile als Link
    AW: Tabellenzeile als Link

    Indem du den Zellen keinerlei margin/padding zuweist. Dann sind die Zellen direkt nebeneinander und der Link fängt genau beim Rand von der Zelle an. Dem Link an sich kannst du natürlich ein padding etc. verpassen.
    HTML:
    1.  
    2. <td>
    3. <a>
    4. <p>Hier ist der Inhalt auch mit <img src="" alt=""/> Bilder</p>
    5. </a>
    6. </td>
    7.  
    8. CSS:
    9. td{padding:0;margin:0}
    10.  
     
    #6      
  7. 1A_Photoshop

    1A_Photoshop Nicht mehr ganz neu hier

    Dabei seit:
    06.06.2012
    Beiträge:
    191
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Photoshop
    Kameratyp:
    Fuji S5 Pro und Canon 600d
    Tabellenzeile als Link
    AW: Tabellenzeile als Link

    Dank dir Myhar.
    Werde das ausprobieren.
    Ich denke ich muss noch
    CSS: td {display: block;}
    zufügen
     
    #7      
  8. 1A_Photoshop

    1A_Photoshop Nicht mehr ganz neu hier

    Dabei seit:
    06.06.2012
    Beiträge:
    191
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Photoshop
    Kameratyp:
    Fuji S5 Pro und Canon 600d
    Tabellenzeile als Link
    AW: Tabellenzeile als Link

    Hat geklappt, aber ist ganz schon aufwendig für jedes einzelne Tabellenzelle.
    Da könnten die bei W3C oder wo auch immer, mal was drehen.
    Dank dir Myhar.
     
    #8      
  9. owieortho

    owieortho Aktives Mitglied

    Dabei seit:
    25.06.2010
    Beiträge:
    624
    Geschlecht:
    männlich
    Ort:
    9.8241,51.3515
    Software:
    PS CS5, HomeSite
    Kameratyp:
    Casio EX-FH20
    Tabellenzeile als Link
    AW: Tabellenzeile als Link

    Ich dachte auch mal das JS keine gute Idee (mehr) wäre. Aber heute in Zeiten von AJAX, jquery, node.js, etc. glaube ich, dass ohne JS unterwegs zu sein, eine ziemliche Beschränkung der "user experience" mit sich bringt. Ist die Zahl auch stichhaltig?

    2ct.

    O.
     
    Zuletzt bearbeitet: 04.03.2013
    #9      
  10. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.075
    Geschlecht:
    männlich
    Ort:
    Ö
    Tabellenzeile als Link
    AW: Tabellenzeile als Link

    Eine Website sollte auch ohne JS die nötigen Informationen bereitstellen können. Vorausgesetzt, sie ist ordentlich programmiert. Lediglich bei Webanwendungen kann JS vorausgesetzt werden, aber bei >90% der Websites ist JS nur eine Spielerei und wer seine Seite so aufbaut, dass sie ohne JS nicht funktioniert arbeitet meiner Meinung nach nicht ordentlich.
    Das sage ich als jemand, der auch lieber JS abgedreht hat.
     
    #10      
  11. 1A_Photoshop

    1A_Photoshop Nicht mehr ganz neu hier

    Dabei seit:
    06.06.2012
    Beiträge:
    191
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Photoshop
    Kameratyp:
    Fuji S5 Pro und Canon 600d
    Tabellenzeile als Link
    AW: Tabellenzeile als Link

    Nun sie gilt für meine Webseite, laut meinem Counter der auch die Robots die auch ohne JS unterwegs sind, bereits abgezogen hat.
     
    #11      
  12. 1A_Photoshop

    1A_Photoshop Nicht mehr ganz neu hier

    Dabei seit:
    06.06.2012
    Beiträge:
    191
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Photoshop
    Kameratyp:
    Fuji S5 Pro und Canon 600d
    Tabellenzeile als Link
    AW: Tabellenzeile als Link

    Das sehe ich sehr ähnlich. Kommt jemand auf meine Webseite und hat z.B. Noscript an (benutze ich selbst) würde er den Link per Javascript gar nicht angeboten bekommen. So etwas möchte ich nicht. Deshalb muss möglichst alles erst einmal ohne Javascript funktionieren.
     
    #12      
x
×
×