• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Inhalt einer Tabellenzeile soll ein Link sein

Status
Für weitere Antworten geschlossen.
W

Wittekind

Neues Mitglied
Ein frohes neues Jahr allen Lesern!

2009 hat kaum begonnen, da brüte ich schon über einem Tabellen-Problem:
Ich möchte Seiten verlinken, mit einer Datums-, Titel-, und Quellenangabe, die ich in eine Tabellenzeile schreibe.
Beim onmouseover auf dem Inhalt EINER Zelle, möchte ich aber, dass der Inhalt ALLER Zellen einer Zeile schwarz wird.
Das zweite Problem ist die Schreibweise im Quelltext. Wenn ich für jede der 3 Zellen den gleichen Link eingebe ist das nicht nur aufwendig, sondern auch nicht besonders schlank geschrieben.

Hier gehts zur Beispielseite

Quelltext HTML
Code: 
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="datum filled"><a href="1">01. 01. 2009</a></td>
<td class="titel filled"><a href="1">abcde fgh ij</a></td>
<td class="quelle filled"><a href="1">google.de</a></td>
</tr>
<tr>
<td class="datum transparent"><a href="2">02. 01. 2009</a></td>
<td class="titel transparent"><a href="2">klmno pqrs</a></td>
<td class="quelle transparent"><a href="2">google.de</a></td>
</tr>
<tr>
<td class="datum filled"><a href="3">03. 01. 2009</a></td>
<td class="titel filled"><a href="3">tuv wx yz</a></td>
<td class="quelle filled"><a href="3">google.de</a></td>
</tr>
</table>
</div>
</body>
</html>
Quelltext CSS
Code: 
body {
    margin:0px;
    }

div {
    position:relative;
    top:600px; 
    left:50%;
    margin-left:-440px;
    width:880px;
    background:transparent;
    padding:0px
    }

table {
    font-family:Georgia, Arial;
    font-size: 15px;
    width:880px;
    border-width:0px;
    }

td {
    vertical-align:middle;
    height:35px;
    }

td.datum{
    text-align:right;
    width:130px;
    }

td.titel{
    text-align:center;
    width:600px;
    }

td.quelle{
    text-align:right;
    width:150px;
    }

td.filled {
    background-color:#E2E2E2;
    }

td.transparent {
    background-color:transparent;
    }

a:link,
a:visited,
a:active {
    color:#696969;
    text-decoration:none;
    font-weight:bold;
    }

a:hover    {
    color:#000000;
    }
Bin dankbar für jede Antwort!
Schöne Grüße
Wittekind
 
Hallo,

und ebenfalls alles Gute fürs neue Jahr.

Die ganze Tabellenzeile in schwarz:

Code: 
tr:hover    {
    color:#000000;
    }

Für das 2. Problem wird es wohl keine Lösung geben.

Gruß thuemmy
 
Danke für die schnelle Antwort!

ich habs gleich in die CSS-Datei eingefügt und hochgeladen.

Leider funktionierts bei mir nicht (Browser-Problem?)!?

Oder muss ich die Links an eine andere Stelle schreiben?
 
Schade, dass es nicht funktioniert. Ich habe es nicht ausprobiert, hätte mir aber gedacht, dass das klappt.

Aber was mir noch aufgefallen ist, in Deinem HTML-Dokument fehlt der Doctpye. Das hat zur Folge, dass jeder Browser in den Quirksmode schaltet, und versucht, das HTML und CSS zu interpretieren. Jeder Browser macht das dann aber anders.

Gruß thuemmy
 
Danke, mein Fehler! Hab jetzt den Doctpye eingefügt und hochgeladen.

Funktioniert bei mir leider immer noch nicht.
Sollte es jetzt bei jemand Anderem funktionieren -> bitte melden!
Dann weiß ich, dass es ein Browser-Fehler ist. Ansonsten ist das wohl noch nicht die Lösung.

Gruß Wittekind
 
Die Angabe der Schriftfarbe der Links überschreibt die Angabe der Schriftfarbe in den Tabellenzeilen.
Code: 
tr:hover a {
    color: #000000;
}
sollte funktionieren (außer z.B. im IE6, der :hover nur bei Links kennt).

Gruß
Junny

edit: Mit den Links würde ich es vom HTML-Quelltext her genauso machen. Die Struktur dahinter (PHP/SQL?) sollte aber stimmen.
 
Zuletzt bearbeitet:
Hab
Code: 
a:hover    {
    color:#000000;
    }
rausgenommen.

Bei mir gibts jetzt keinen hover-Effekt mehr.

Hab noch ausprobiert
Code: 
a:link,
a:visited,
a:active {
    color:#696969;
    text-decoration:none;
    font-weight:bold;
    }
durch
Code: 
tr:link,
tr:visited,
tr:active {
    color:#696969;
    text-decoration:none;
    font-weight:bold;
    }
zu ersetzen, aber dann haben die Links gar keine Formatierung mehr.

Zur einfacheren Ansicht:
HTML-Seite
CSS-Seite

HTML-Seite alle a: durch tr: ersetzt
CSS-Seite alle a: durch tr: ersetzt

@Junny:
Das kommt nachher alles in PHP

Gruß Wittekind
 
Junny schrieb:
Code: 
tr:hover a {
    color: #000000;
}
sollte funktionieren
Zum Vergrößern anklicken....
Das bedeutet, dass alle Links in einer Tabellenzeile, über der die Maus gerade ist, so formatiert werden.
Wittekind schrieb:
Hab noch ausprobiert
Code: 
a:link,
a:visited,
a:active {
    color:#696969;
    text-decoration:none;
    font-weight:bold;
    }
durch
Code: 
tr:link,
tr:visited,
tr:active {
    color:#696969;
    text-decoration:none;
    font-weight:bold;
    }
zu ersetzen, aber dann haben die Links gar keine Formatierung mehr.
Zum Vergrößern anklicken....
Die Pseudoklassen :link und :visited machen bei tr keinen Sinn, :active auch eher weniger. Das einzig wirklich Sinnvolle bei tr ist :hover. Da nicht die Schriftfarbe von normalem Text gemeint ist, sondern die Schriftfarbe von Links in diesen Tabellenzeilen, benutzen wir den Nachfahrenselektor
Code: 
tr:hover a

Unterschied erkannt?

Gruß
Junny
 
tr:hover funktioniert außerdem nicht im IE (zumindest bis 6). Da gehen diese Pseudoklassen nur mit Links.
 
Die Pseudoklassen :link und :visited machen bei tr keinen Sinn, :active auch eher weniger. Das einzig wirklich Sinnvolle bei tr ist :hover. Da nicht die Schriftfarbe von normalem Text gemeint ist, sondern die Schriftfarbe von Links in diesen Tabellenzeilen, benutzen wir den Nachfahrenselektor Code:
tr:hover a
Unterschied erkannt?
Zum Vergrößern anklicken....
Ja, ich hab den Unterschied erkannt.

Funktioniert denn die Version mit
Code: 
tr:hover{
    color:#000000;
    }
bei euch?

Bei mir sind die Links regungslos; kein hover-Effekt!
 
Nein,
Code: 
tr:hover {
    color: #000000;
}
funktioniert nicht. So sollte es aber bei den meisten funktionieren:
Code: 
tr:hover a {
    color: #000000;
}

Gruß
Junny
 
Oh, den Unterschied hab ich wirklich nicht erkannt.
Jetzt funktionierts!

Vielen Dank Junny und allen anderen!

Gruß Wittekind
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben