a:hover-Befehl auf <tr> anwendbar?

[Rafael R.]

So, und gleich noch zu einer zweite Frage, aber keine Angst, danach ist meine Neugier vorerst mal gestillt ;-)

Ich habe folgendes versucht:

1. Im Header der HTML-Datei die Parameter für Links, über denen die Maus steht, auf zB grünen Text und roten Hintergrund geändert, also

<style type="text/css">
a:hover { color:green; background-color:red; }
</style>

2. Weiter unten in einer Tabelle wollte ich das dann auf eine gesamte Zeile anwenden, indem ich um den ganzen Bereich <tr>...</tr> einen Link mit <a href> gesetzt habe - jedoch ohne sichtbaren Effekt. Der Link funktioniert, Farbe und Hintergrund ändern sich aber nicht, auch der Mauszeiger bleibt Standard.

Achja, warum ich die ganze Zeile überhaupt verlinken will? Ganz einfach: Weil ich gerne in einer Zeile einer längeren Liste den Text teilweise links- und teilweise rechtsbündig formatieren möchte, und keine andere Lösung dafür gefunden habe, als die zwei Textteile jeweils in eine eigene <td> zu packen und diese Zellen dann links- bzw. rechtsbündig zu formatieren. Trotz dieser Teilung soll aber bei einem Mouseover über der Zeile dennoch die ganze Zeile "angesprochen" werden.

Das ganze sieht sieht bei mir etwa so aus:

<table>
...anderer Tabelleninhalt...
  <a href="TEST.HTML">
    <tr>
      <td style="text-align:left;">TESTEINTRAG</td>
      <td style="text-align:right;">TESTDATUM</td>
    </tr>
  </a>
</table>

Für eine Hilfe zur Problemlösung wäre ich sehr dankbar! Puh, ich hoffe ich hab mich halbwegs verständlich ausgedrückt... ^_^

LG, Rafael

PS: Die zwei Zeilenteile nicht mithilfe von zwei Zellen, sondern der absoluten Positionierung "position:absolute" zustande zu bringen, hab ich auch schon probiert, das hat dann aber zu großen Problemen bei der Darstellung der Tabellenrahmen geführt.

PPS: Verwendeter Browser war wiederum IE 6.

[Gunnar Bittersmann]

Hello out there!

<table>
...anderer Tabelleninhalt...
  <a href="TEST.HTML">
    <tr>
      <td style="text-align:left;">TESTEINTRAG</td>
      <td style="text-align:right;">TESTDATUM</td>
    </tr>
  </a>

Das geht nicht. Weder darf ein table-Element a-Elemente enthalten, noch darf ein a-Element tr-Elemente enthalten. Das hätte dir der Validator auch verraten.

Die :hover-Pseudoklasse lässt sich auch auf tr anwenden. Allerdings ist der IE dafür zu blöd.

Du musst so schachteln:

<table>  
  <tbody>  
    <tr>  
      <td><a href="TEST.HTML">TESTEINTRAG</a></td>  
      <td><a href="TEST.HTML">TESTDATUM</a></td>  
    </tr>  
  </tbody>  
</table>

Du kannst das a-Element die ganze td-Box ausfüllen lassen {display: block; width: 100%}

Du solltest dir auch Inline-Style-Angaben in style-Attributen sparen, das widerspricht dem Grundgedanken von CSS der Trennung von Dokumentstruktur und Präsentation. Mache alle Angaben im zentralen Stylesheet, das macht auch den Quelltext übersichtlicher.

See ya up the road,
Gunnar

[Ashura]

Hallo Gunnar.

Du musst so schachteln:

<table>

<tbody>
    <tr>
      <td><a href="TEST.HTML">TESTEINTRAG</a></td>
      <td><a href="TEST.HTML">TESTDATUM</a></td>
    </tr>
  </tbody>
</table>

  
Mein Vorschlag:  
  
~~~html
<table>  
  <tbody>  
    <tr>  
      <td><a href="TEST.HTML"><span class="eintrag">TESTEINTRAG</span> <span class="datum">TESTDATUM</span></a></td>  
    </tr>  
  </tbody>  
</table>

Dazu das CSS:

table {  
  width:50%;  
}  
a {  
  display:block;  
  overflow:auto;  
  width:100%;  
}  
a span.eintrag {  
  float:left;  
}  
a span.datum {  
  float:right;  
}  
a:hover {  
  background:#069;  
  color:#fff;  
}

Ein Trennzeichen zwischen Eintrag und Datum wäre vielleicht auch noch eine Überlegung wert.

Einen schönen Montag noch.

Gruß, Ashura

[Gunnar Bittersmann]

Hello out there!

Mein Vorschlag:

<table>

<tbody>
    <tr>
      <td><a href="TEST.HTML"><span class="eintrag">TESTEINTRAG</span> <span class="datum">TESTDATUM</span></a></td>
    </tr>
  </tbody>
</table>

  
Komische Tabelle, das.  
  
Mein Vorschlag:  
  
`<p><a href="TEST.HTML"><span class="eintrag">TESTEINTRAG</span> <span class="datum">TESTDATUM</span></a></p>`{:.language-html}  
  
See ya up the road,  
Gunnar

-- 
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)

[Detlef G.]

Hallo Ashura

<td><a href="TEST.HTML"><span class="eintrag">TESTEINTRAG</span> <span class="datum">TESTDATUM</span></a></td>

Warum so viele Spans und unnötige Klassen?

<table>  
  <tbody>  
    <tr>  
      <td><a href="TEST.HTML"><span>TESTEINTRAG</span> TESTDATUM</a></td>  
    </tr>  
  </tbody>  
</table>  

Dazu das CSS:

table {  
  width:50%;  
}  
a {  
  display:block;  
  overflow:auto;  
  width:100%;  
  text-align:right;  
}  
a span {  
  float:left;  
  text-align:left;  
}  
a:hover {  
  background:#069;  
  color:#fff;  
}  

Auf Wiederlesen
Detlef