CSS Links in tabellen. Waarom werkt dit niet?

[Spunq]

Hoi,

Ik heb een pagina waarin in 2 verschillende type links in heb. Beide werken niet zoals ik wil, ik geef er één als voorbeeld:

CSS

.footer {
	font-family: Arial, Helvetica, sans-serif;
	color: #555555;
	font-size:11px;
	text-align:right;
	padding-top: 3px;
	padding-right:15px;
}
a.footer {
color: #555555;
text-decoration:underline;
}
a.footer:hover {
color: #880000;
text-decoration:underline;
}

De HTML

<tr>
<td class="footer"><a href="disclaimer.html">Disclaimer</a></td>
</tr>

Op deze manier werkt het niet, de layout van de link wordt niet aangepast.

<tr>
<td class="footer"><a href="disclaimer.html" class="footer">Disclaimer</a></td>
</tr>

Zo werkt ie wel maar dan moet ik bij elke link op de pagina apart nog een keer die class aangeven, dat kan niet de bedoeling zijn toch.

Alvast bedankt

 

[That Guy]

waarom maak je er dan niet gewoon dit van in je css?

//css
a.td {
color: #555555;
text-decoration:underline;
}
a.td:hover {
color: #880000;
text-decoration:underline;
}

hoef je niet eens in de <td> een class aan te geven. Het is maar een idee

 

[Spunq]

waarom maak je er dan niet gewoon dit van in je css?

//css
a.td {
color: #555555;
text-decoration:underline;
}
a.td:hover {
color: #880000;
text-decoration:underline;
}

hoef je niet eens in de <td> een class aan te geven. Het is maar een idee

Ok bedankt, gaat de goeie kant op zo maar, zo doet ie meteen alle tabellen terwijl ik in verschillende tabellen wat anders wil. hoe gaat dat dan?

 

[That Guy]

als je in de td de class laat staan, kan je geloof ik zoiets doen

//css
a.td.klassnaam{
//(...)
}
a.td.klassnaam:hover{
//(...)
}

maar ik weet dat niet zeker

 

[ErikBooy007]

Waarom doe je niet gewoon:

.footer a{
    color: #555555;
    text-decoration:underline;
}

<tr>
<td class="footer"><a href="disclaimer.html">Disclaimer</a></td>
</tr>

Dit zou moeten werken....

 

[Spunq]

Gelukt!!

Maar dan wel met deze

.footer {
	font-family: Arial, Helvetica, sans-serif;
	color: #555555;
	font-size:11px;
	text-align:right;
	padding-top: 3px;
	padding-right:15px;
}
.footer a{
    color: #555555;
    text-decoration:underline;
}
.footer a:hover{
    color: #880000;
    text-decoration:underline;
}

dan heb je ook het mouse over effect

Bedankt!

 

[keej]

Om Erik effe aan te vullen: dit zijn descendant selectors.

Ik veronderstel dat je 1 footer hebt, die een table of div is.
Dan gebruik je daar best een id-selector voor, geen class-selector (als er maar 1 is).

#footer

of als je toch een class wil

table.footer of div.footer

Met de descendant selector

#footer a

of

table.footer a

selecteer je alle a-elementen (links dus) binnen de footer, op gelijk welk niveau, zodat je niet steeds alles zo'n class moet meegeven. Dus gewoon een spatie ertussen

En verder kan je bvb met

#footer table tr td a

een specifiekere orde opgeven (dit selecteert enkel de a-elementen die binnen een td binnen een tr binnen een table in de footer zitten).

Verder kan je de descendant selector ook specifieker maken, bvb

#footer a.eenklasnaam:hover

En deze selectors werken in alle browsers.

EDIT: ok was dus al opgelost:thumb: