Ganze Tabellenzeile zum Link machen

[Christian Peters]

Servus,

ich hatte gestern Nacht eine Idee und weiß nicht wie ich sie umsetzen soll.

Ich habe eine Tabelle mit mehrerern Zeilen die wie folgt aufgebaut sind:

<tr class="contentlight">
<td valign="top">
  <p><img class="link" src="Bild"></p>
</td>
<td valign="top">
  <p><b>Überschfrift</b></p>
  <p>Text</p>
</td>
<td valign="top">
  <p>Hinweis</p>
</td>
</tr>

Jetzt möchte ich das die komplette Zeile auf einen Mouseover reagiert indem Sie den Mauszeiger, die Schfritfarbe und die Hintergrundfarbe der Zeile ändert. Außerdem soll die ganze Zeile einen Link darstellen.

Meine Idee den <tr>-Tag in einen <a>-Tag einzuschließen und dann per CSS den <a>-tag zu modifizieren hat nicht geklappt.

Hat jemand eine Idee?

Danke,

Chris

[Maz]

Moinsen,

Ich habe eine Tabelle mit mehrerern Zeilen die wie folgt aufgebaut sind:

vergiss die Tabellen, nimm Listen dafür.

Jetzt möchte ich das die komplette Zeile auf einen Mouseover reagiert indem Sie den Mauszeiger, die Schfritfarbe und die Hintergrundfarbe der Zeile ändert.

das geht mit CSS.

Meine Idee den <tr>-Tag in einen <a>-Tag einzuschließen und dann per CSS den <a>-tag zu modifizieren hat nicht geklappt.

das ist ja auch megaüble Vergewaltigung von HTML und invalide obendrein.

Hat jemand eine Idee?

schau mal hier, da wird das prima und vielfältigst beschrieben: http://www.stunicholls.myby.co.uk/menus/index.html

[Christian Peters]

Servus,

danke für den Tip, dazu allerdings noch ne Frage.
Wie du siehts habe ich in meiner Zeile auch Spalten die ich, wenn ich Listen verwende, natürlich immer noch gebraucht werden. Oder besser, ich benötige nach wie vor "Spalten" die in allen Listeneinträgen genau untereinander stehen.

Ist das damit auch hinzubekommen?

[Maz]

Moinsen,

ich benötige nach wie vor "Spalten" die in allen Listeneinträgen genau untereinander stehen.

Ist das damit auch hinzubekommen?

wenn ich Dich richtig verstehe musst Du die Listen nur horizontal anordnen. Das geht mit float. Besiepiel findest Du auch unter dem angegebenen Link.

Nochmehr Listen hier: http://css.maxdesign.com.au/listamatic

[Christian Peters]

Tach,

ne ne, die Listen sollen schon untereinander sein.

Ein kleines Beispiel:

Spalte | Spalte | Spalte | Spalte | Spalte

Reihe1 | Reihe1 | Reihe1 | Reihe1 | Reihe1 |
Reihe2 | Reihe2 | Reihe2 | Reihe2 | Reihe2 |
Reihe3 | Reihe3 | Reihe3 | Reihe3 | Reihe3 |

So sieht es in einer Tabelle aus, und so soll es auch in der Liste aussehen.

Jede Spalte in der Tabelle hat ihre Notwendigekeit.
Wenn ich jetzt mit Listen arbeite soll das "Spaltenformat" dabei nicht verloren gehen.

Die Frage ist ob und wenn wie das möglich ist.

Chris

[Maz]

Moinsen,

Spalte | Spalte | Spalte | Spalte | Spalte

Reihe1 | Reihe1 | Reihe1 | Reihe1 | Reihe1 |
Reihe2 | Reihe2 | Reihe2 | Reihe2 | Reihe2 |
Reihe3 | Reihe3 | Reihe3 | Reihe3 | Reihe3 |

jede Spalte ist eine Liste mit <Anzahl der Reihen>-Listenpunkten. Davon mehrere nebeneinander. Sollte klappen. Abstände, Hintergründe, Rahmen und Farben kannst Du ja CSS-seitig formatieren wie es beliebt.

übrigens: Wenn Du die Tabellen zum layouten benutzt, bist Du noch nicht up-to-date ;-) (von diversen anderen viel besseren Gründen mal abgesehen). Siehe auch http://www.css4you.de/wslayout1/index.html

[Christian Peters]

Also,

diese angesprochene Tabelle ist eine "echte" Tabelle, heißt sie wird verwendet um Dateninhalte einer Datenbanktabelle anzuzeigen. In diesem Fall eine Liste von Downloads.

Tatsächlich versuche ich mit meiner neuen Page die Idee des Tabellenbaus loszuwerden.

Deine Idee mit den Listen verwirrt mich ein wenig da ich dann für jede "Spalte" eine Liste hätte. Also eine für die Icons der Downloads, eine für die Überschriften + Text und eine für die Hinweise. Wenn ich das so baue habe ich doch nihct mehr die Möglichkeit beim Mouseover die ganze "Zeile" die sich ja jetzt über 3 Listen erstreckt zu markieren oder?

Chris

[Joachim]

Hi,»» Also,

diese angesprochene Tabelle ist eine "echte" Tabelle, heißt sie wird verwendet um Dateninhalte einer Datenbanktabelle anzuzeigen.

was spricht gegen das Anzeigen von _tabellarischen_ Daten mittels Tabelle?
Tabellen sollten da vermieden werden, wo sie zu reinen Layoutzwecken zweckentfremdet werden.

Gruesse, Joachim

[Maz]

Moinsen,

diese angesprochene Tabelle ist eine "echte" Tabelle, heißt sie wird verwendet um Dateninhalte einer Datenbanktabelle anzuzeigen.

dann vergiss die Listen. Sorry. Ich vermute dennnoch, dass Du in CSS ne Menge ereichen kannst um Deine Ding umzusetzen.

[Christian Peters]

OK,

jetzt wo wir alle auf dem gleichen Stand sind (muss an dieser Stelle mich für eine u.U. unklare Anfrage entschuldigen)...

Wie kriegen wir das Kind geschaukelt?

Chris

[Maz]

Moinsen,

Wie kriegen wir das Kind geschaukelt?

ich hab mal stunichols beispiel (http://www.stunicholls.myby.co.uk/menus/menuthree.html) in Tabellenzellen übertragen:

<html>
<head>
<title>TESTs</title>
<style>
*{
margin: 0;
padding: 0;
/* Tabellen */
  border-collapse:collapse;
  border-spacing: 0;
}
body{
padding: 0;
text-align: center;
}

td{
border: 1px dotted #F00;
}

a.block, a.block:visited {display:block; width:5em; height:3em; background:#000; text-decoration:none; text-align:center; color:#aaa; float:left;}
a.block span, a.block:visited span {display:block; width:3em; height:0.5em; border-top:0.5em solid #000; border-left:1em solid #000;  border-right:1em solid #000; border-bottom:0.5em solid #000; background:#050; overflow:hidden;}
* html a.block span, * html a.block:visited span {width:5em; height:1.5em; w\idth:3em; he\ight:0.5em; overflow:hidden;}
a.block:hover {color:#ff0;}
a.block:hover span {background:#0f0;}
</style>
</head>
<body>
<table>
<tr>
  <td><a href="#" class="block">eins</a><span></span></td>
  <td><a href="#" class="block">zwei</a><span></span></td>
  <td><a href="#" class="block">drei</a><span></span></td>
  <td><a href="#" class="block">vier</a><span></span></td>
</tr>
</table>
</body>
</html>

das klappt. Kommst Du damit weiter wenn Du das auf die nächsten Zeilen ausbaust?

[Christian Peters]

Servus,

was ich bei deinem Beispiel (danke dafür) nicht hinbekomme ist das es die ganze Reihe "hovert" wenn ich eine der <a>s überfahre.

Habe das mal ein wenig modifiziert...

<style>
a.block, a.block:visited
{
display:block; width:5em;
height:3em;
background:#000;
text-decoration:none;
text-align:center;
color:#aaa;
float:left;
}

a.block:hover
{
color:#ff0;
background:#0f0;
}

a.block:hover span
{
background:#0f0;
}
</style>

<table>
<tr>
  <td>
   <a href="#" class="block">eins</a><span></span>
  </td>
  <td>
   <a href="#" class="block">zwei</a><span></span>
  </td>
  <td>
   <a href="#" class="block">drei</a><span></span>
  </td>
  <td>
   <a href="#" class="block">vier</a><span></span>
  </td>
</tr>
<tr>
  <td>
   <a href="#" class="block">eins,2</a><span></span>
  </td>
  <td>
   <a href="#" class="block">zwei,2</a><span></span>
  </td>
  <td>
   <a href="#" class="block">drei,2</a><span></span>
  </td>
  <td>
   <a href="#" class="block">vier,2</a><span></span>
  </td>
</tr>
</table>

[Maz]

Moinsen,

Servus,

was ich bei deinem Beispiel (danke dafür) nicht hinbekomme ist das es die ganze Reihe "hovert" wenn ich eine der <a>s überfahre.

das wird auch schwierig... Du kannst ja nicht a-Tags um Tabellenzellen packen, ebensowenig span-Tags.

Aber wozu möchtest Du eine Zeile hovern wenn sich der zugehörige Link nur auf eine Zelle bezieht? Das suggeriert ja, der Link würde auch über alle Zellen hinweg gelten. Aber da sind ja mehrere verschiedene vorhanden.
Bei einem Quer-Menu hovert man ja auch nicht alle Menupunkte wenn man sich nur über einem befindet.

[Christian Peters]

Moin,

in diesem Fall stellt eine Zeile den Link dar.
Die Zeile beinhaltetn ein Icon das sagt um welches Tool es sich handelt, einen Text und einen Hinweis.

Bisher habe ich am Ende der Zeile einen Button zum Download, ich hatte nur die Idee das es um einiges besser aussehen würde und noch leichter zu bedienen wäre wenn die Zeile als ganzes auf einen Mousover reagieren würde und auch den Link zur verfügung stellt, wir haben so spezialisten die den Downloadbutton nicht finden.

Chris

[Maz]

Moinsen,

nach dem meine letzte Antwort grad mit dem Serverabsturz (oder was das war) zusammenfiel und somit nicht mehr hier erschien, nochmal:

in diesem Fall stellt eine Zeile den Link dar.
Die Zeile beinhaltetn ein Icon das sagt um welches Tool es sich handelt, einen Text und einen Hinweis.

Aber damit benutzt Du ja eben doch eine Tabelle zum layouten...

Also entweder macht jede Zelle (und somit ihr link) auch semantischen Sinn oder die Tabelle ist überflüssig bzw. sogar hinderlich. Beispiele, wie man ohne Tabellen layouten kann hab ich ja schon verlinkt.

[Christian Peters]

Ok,

wenn ich dich richtig verstehe sind Tabellen nur und ausschließlich zur nackten Datenanzeige da?

In meinem Fall könnte ich sicher statt dem Icon die in der Datenbank hinterlegte Nummer anzeigen und den Link als Text aber optisch ist das ja nix...

Du sagst also dass ich für den Fall den ich habe eine andere Lösung nehmen sollte. In dem Fall müsste ich mich mal mit den grundlegenden "neuen" Regeln vertraut machen. Sehe da als Beispiel für ein Problem bei mir die Newsliste.

Spalten: Datum | Inhalt | (Opt.) Bearbeiten
Der Inhalt besteht aus einem Header (fett) und Text.

Auch hier wieder eine Zeilenbildung (pro News eine Zeile). Wie das (oder eben auch die Downloads) anderweitig erschlagen soll muss ich erst noch ergründen.

Bin für jeden Link dankbar.

[Maz]

Moinsen,

wenn ich dich richtig verstehe sind Tabellen nur und ausschließlich zur nackten Datenanzeige da?

Für tabellarische Daten. Also z.B. Namenslisten mit Adressen und Telefon. Aber da würde dann auch ein Link auf den Namen reichen (um z.B.das Foto anzusehen), da muss man nicht die anderen Werte mitverlinken. Wenn man das aber möchte, sollte man sich von tabellen trennen und mal die Alternativen ansehen. Plötzlich entsteht ne ganz neue Welt ;-)

Es ist nicht im Sinne des Erfinders, Tabellen zu nutzen, nur um Abstände und Anordnungen zusammengehöriger Einheiten zueinander zu definieren. Dafür gibt es das Boxmodell und für Menus Listen. Schau einfach mal in die von mir geposteten Links.

Natürlich geht es, mit Tabellen zu layouten. Aber dann erscheinen evtl. Probleme wie das von Dir gestellte.

[Christian Peters]

Also...

dann ran an die Box. Wird dann aber erst in Version 4.1 etwas. Baue gerade 4.0 und die Zeit rennt.

Trotzdem danke an alle für die Hinweise.

PS: In der Zwischenzeit hat ein Kollege eine Antwort gepostet in der das Ganze per java geht...

Chris

[Elya]

Hallo Maz,

Spalte | Spalte | Spalte | Spalte | Spalte

Reihe1 | Reihe1 | Reihe1 | Reihe1 | Reihe1 |
Reihe2 | Reihe2 | Reihe2 | Reihe2 | Reihe2 |
Reihe3 | Reihe3 | Reihe3 | Reihe3 | Reihe3 |

jede Spalte ist eine Liste mit <Anzahl der Reihen>-Listenpunkten.
übrigens: Wenn Du die Tabellen zum layouten benutzt, bist Du noch nicht up-to-date ;-)

*räusper* du hast aber schon erkannt, daß es sich hier um tabellarische Daten handelt, für die man am besten - ja, es gibt nichts besseres - Tabellen benutzt? Wieso sollte Christian für eine tabellarische Datenstruktur Listenkonstrukte benutzen?

Gruß aus Köln-Ehrenfeld,

Elya

[Maz]

Moinsen,

*räusper* du hast aber schon erkannt, daß es sich hier um tabellarische Daten handel

nein, hab ich nicht. Die Frage ging ja nach Zellen, die er komplett anklicken wollte.

Dann wäre es natürlich unklug, Listen für Tabellen zu nehmen. Aber so oft wie hier von Fragenden noch mit Tabellen-Layouts gearbeitet wird lag die vermutung nicht weit, dass diese Tabellen auch für eine Navigation genutzt würden.

[wahsaga]

hi,

Aber so oft wie hier von Fragenden noch mit Tabellen-Layouts gearbeitet wird

... erübrigt sich manchmal das nachdenken, und es rutscht eine reflexartige antwort raus, die dann auf den konkreten fall bezogen doch unpassend ist ;-)

gruß,
wahsaga

[Maz]

Moinsen,

... erübrigt sich manchmal das nachdenken, und es rutscht eine reflexartige antwort raus, die dann auf den konkreten fall bezogen doch unpassend ist ;-)

dann lies mal weiter unten nach, es ergab sich dass es doch eine Tabelle zum layouten war.

[wahsaga]

hi,

dann lies mal weiter unten nach, es ergab sich dass es doch eine Tabelle zum layouten war.

davon sehe ich auch "weiter unten" nichts.
ich sehe lediglich, dass du ihm die tabelle - obwohl ich sie wie Elya auch schon sagte eigentlich für angebracht hielte - jetzt "ausgeredet" hast.

warum seine daten aber keine tabellarischen sein sollen - zitat: "Die Zeile beinhaltetn ein Icon das sagt um welches Tool es sich handelt, einen Text und einen Hinweis" - erkenne ich immer noch nicht.

tabellen krampfhaft zu vermeiden weil sie "böse" sind - und dann letzten endes wo möglich auch noch da, wo sie angebracht wären - ist auch über's ziel hinausgeschie..., ähn -ossen und unsinnig.

gruß,
wahsaga

[Maz]

Moinsen,

warum seine daten aber keine tabellarischen sein sollen - zitat: "Die Zeile beinhaltetn ein Icon das sagt um welches Tool es sich handelt, einen Text und einen Hinweis" - erkenne ich immer noch nicht.

Wenn jemand einen Download-Link mit einem Text und einem Hinweis nebeneinander anordnen möchte, ist das keine tabellarische Darstellung im herkömmlichen Sinne. Da geht es dann nur um die Positionierung zueinander bzw. die Abstände und das "auf Linie bringen". Letztlich bilden diese drei Einzelelemente ein zusammenhängendes Ganzes.

Daher erklärt sich dann auch warum man beim hover über eines dieser drei Elemente (Icon, Text, Hinweis) alle drei gehighlighted werden sollen.

Ich würde dafür keine Tabelle benutzen. Und nicht, weil sie böse sind (das ist Deine Unterstellung), sondern weil ein hovern über die drei Elemente anders viel einfacher (überhaupt?) zu machen ist.

Und genau um letzteres ging es ja in der Frage, da ich nicht weiss wie man ein <tr> hovert hab ich versucht konstruktive Lösungen anzubieten.

[wahsaga]

hi,

Wenn jemand einen Download-Link mit einem Text und einem Hinweis nebeneinander anordnen möchte, ist das keine tabellarische Darstellung im herkömmlichen Sinne.

wenn es nur einen solchen "satz" gibt, dann natürlich nicht.

aber so, wie ich es verstanden habe, sollen es ja durchaus mehrere sein - und das wären für mich dann durchaus tabellarische daten.

eine einzelne adresse stellt man sicher nicht mit einer tabelle dar, nur um "abstände" richtig hinzubekommen.

wer für ein ganzes telefonbuch aber _keine_ tablelle verwendet - der macht m.E. auch was falsch.

gruß,
wahsaga

[at]

Hallo.

wer für ein ganzes telefonbuch aber _keine_ tablelle verwendet - der macht m.E. auch was falsch.

Tja, m. E. nicht.
MfG, at

[Joachim]

Hi,

Meine Idee den <tr>-Tag in einen <a>-Tag einzuschließen und dann per CSS den <a>-tag zu modifizieren hat nicht geklappt.

[no comment*]

sowas kannst Du nur mit Javascript loesen, indem Du die entsprechenden eventhandler in Verbindung mit location.href nutzt. Optimalerweise verzichtest Du aber dennoch nicht auf a (an der richtigen Stelle), um javascriptlose Navigation zu ermoeglichen.

Viele Dinge lassen sich uebrigens in der Tat mit Listen gut loesen, befrage dazu im Zweifel den Meister der Listennavigation**

*  sei froh, der waere niederschmetternd ;-)
** Ingo der Turski

Gruesse, Joachim

[Ingo Turski]

Hi,

Viele Dinge lassen sich uebrigens in der Tat mit Listen gut loesen, befrage dazu im Zweifel den Meister der Listennavigation**

*  sei froh, der waere niederschmetternd ;-)
** Ingo der Turski

hehe... nunja, in diesem Fall würde ich tatsächlich eine Tabelle i.V. mit Javascript nehmen.
Eine andere - semantisch zwar weniger gute, aber dafür ohne Javascript zu realisierende Möglichkeit wäre, alle Inhalte in ein A zu packen und über CSS-formatierte SPANs eine tabellenähnliche Darstellung zu erzeugen. Passendere Blockelemente scheiden ja innerhalb von A leider aus.

freundliche Grüße
Ingo

[Joachim]

Hi,

hehe... nunja, in diesem Fall würde ich tatsächlich eine Tabelle i.V. mit Javascript nehmen.

ja, ich habe im weiteren Verlauf dann auch gesehen, dass es sich wohl eher um tabellarische Daten handelt...

Gruesse, Joachim

[Elya]

Hallo Christian,

Jetzt möchte ich das die komplette Zeile auf einen Mouseover reagiert indem Sie den Mauszeiger, die Schfritfarbe und die Hintergrundfarbe der Zeile ändert. Außerdem soll die ganze Zeile einen Link darstellen.

http://www.onlinetools.org/tools/domtableenhance.php könnte dich interessieren, ohne Javascript wird es (zumindest auf dem IE) nicht gehen. Da ist zwar noch kein Link drin, aber vielleicht bringt Dich das auf die richtige Spur. Ein interessanter Suchbegriff für die Gestaltung von Tabellen ist übrigens auch "zebra tables".

Gruß aus Köln-Ehrenfeld,

Elya

[daniel84]

Hallo Christian Peters,

ohne dein Posting und die Antworten darauf gelesen zu haben - http://www.tiptom.ch/homepage/faqs.html#zellelink dürfte dir weiterhelfen.

Gruss aus Luzern,
Daniel

[Ashura]

Hallo daniel84.

ohne dein Posting und die Antworten darauf gelesen zu haben - http://www.tiptom.ch/homepage/faqs.html#zellelink dürfte dir weiterhelfen.

td:hover { color:#660000; background-color:#ffff66; }

*g* Das dachte ich mir die ganze Zeit schon, ich frage mich nur, warum niemand auf diese simple Idee gekommen ist.

Und ich habe es eben getestet: mit <tr> funktioniert es ebenso.

Gruß, Ashura

[Alexander Brock]

Hallo Ashura,

td:hover { color:#660000; background-color:#ffff66; }

Und ich habe es eben getestet: mit <tr> funktioniert es ebenso.

Es funktioniert mit _jedem_ Element, aber nicht im IE.

Gruß
Alexander Brock

[Ashura]

Hallo Alexander.

Es funktioniert mit _jedem_ Element, aber nicht im IE.

Ersteres prüfe ich hin und wieder lieber nach, obwohl der Sinn hinter CSS nichts anderes zulässt.

Letzteres ist in meinen Augen ein akzeptables Opfer.

Gruß, Ashura

[Christian Peters]

Servus,

also für meine kommende Version werde ich wohl auf den Tip mit JS+CSS zurückgreifen. Danke für den Tip

Inwieweit ich später auf Listen umsteige muss ich testetn.

Chris