CSS - cellefarve m.m.

Eksempel:

Min tabel består af 10 rækker og 1 kolonne.
Baggrunden i cellerne er sorte, og links (tekst) er hvide.
Bunden af cellen er hvid og 1 pixel høj.
Når jeg holder musen henover en celle, skal farven ændres fra sort til f.eks. mørkerød, og farven på teksten skal ændres fra hvid til gul.

Kan det lade sig gøre?

Såvidt jeg ved kan man ikke med CSS lave hovereffekt på andet end links.

Du kan do lægge mouseover og mouseout handlere i cellen (i IE)

<td onmouseover=\"this.style.backgroundColor=\'red\';this.style.color=\'black\';\"
  onmouseout=\"this.style.backgroundColor=\'white\';this.style.color=\'blue\';\">

mvh JakobA

Ok, det virker fint. Men hvad hvis jeg vil have adskilt hver celle med en fin streg på 1 pixel?

http://www.activeserverpages.dk/artikler/default.asp?articleid=276

Og effekten kommer jo først, når du holder musen henover?

Det kan du bruge css til. men hvis det er ok med kant helevejen rundt om tabellen er det nemmest med:

<table border=0 cellspacing=1 style=\"backgroundColor:yellow\">

så er alle celler i den tabel omkranset af en tynd gul streg

Det er rigtigt, den første farvesætning må du sætte på anden vis. fx:

<style>

td { backgroundColor:white; color:blue };

</style>

Ok. Men jeg får først min menu, når jeg fører musen henover menuen. Prøv at se koden:

<html>

<head>
<style>
td { backgroundColor:white; color:blue };
</style>
<title>Test</title>
<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\">
</head>

<body bgcolor=\"#000000\">

<table border=0 cellspacing=1 style=\"backgroundColor:yellow\" class=\"sorttekst\" width=\"100\">
    <tr>
        <td onmouseover=\"this.style.backgroundColor=\'red\';this.style.color=\'black\';\" onmouseout=\"this.style.backgroundColor=\'white\';this.style.color=\'blue\';\" height=\"25\">Test</td>
    </tr>
    <tr>
        <td onmouseover=\"this.style.backgroundColor=\'red\';this.style.color=\'black\';\" onmouseout=\"this.style.backgroundColor=\'white\';this.style.color=\'blue\';\" height=\"25\">Steen</td>
    </tr>
    <tr>
        <td onmouseover=\"this.style.backgroundColor=\'red\';this.style.color=\'black\';\" onmouseout=\"this.style.backgroundColor=\'white\';this.style.color=\'blue\';\" height=\"25\">Hansen</td>
    </tr>
</table>

</body>

</html>

Menuen skulle jo gerne være synlig for den besøgende, når vedkommende kommer ind på siden.

Sorry, pepsi2. Du har faktisk givet mig svaret.

jacoba, du og pepsi får hver 10 point for ulejligheden.

Tak for hjælpen :o)

det er mig der bruger galt navn for baggrundsfarven. det skulle være:

    <table border=0 cellspacing=1 style=\"background-color:yellow\">

og
    <style>
    td { background-color:white; color:blue };
    </style>

tak for pts

Det var så lidt, det er mig der takker for hjælpen.

Mine nye bedste venner :o)

Til en orientering:

Sådan kan det gøres:

<html>

<head>
<style type=\"text/css\">
<!--

table.menu {border: 1px solid #393939;}

td.menu, .overskrift {font: bold 11px verdana, sans-serif;text-align: center;}

a.menupunkt {
    text-decoration: none;
    background-color: #EAEAEA;
    color: #717171;
    border-top : 1px solid #FFFFFF;
    border-left : 1px solid #FFFFFF;
    border-bottom : 1px solid #6D6D6D;
    display: block;
    line-height: 22px;
    width:99%;
}

a.menupunkt:hover {
    text-decoration: none;
    background-color: #D1D9F3;
    border-top : 1px solid #8F9CC6;
    border-left : 1px solid #8F9CC6;
    border-bottom : 1px solid #6D6D6D;
    display: block;
    color: #000000;
    width:99%;
}

.overskrift {
    background-color: #8F9CC6;
    color: #000000;
    border-top: 1px solid #D5DFFF;
    border-left: 1px solid #D5DFFF;
    border-bottom: 1px solid #393939;
    line-height: 20px;
}
-->
</style>
<title>Test</title>
<link rel=\"stylesheet\" type=\"text/css\" href=\"hassdesign.css\">
</head>

<body bgcolor=\"#000000\">

<table cellpadding=\"0\" cellspacing=\"0\" border=0 class=menu width=130>
<tr><td><div class=overskrift>Overskrift</div></td></tr>
<tr><td class=menu><a href=\"link1.html\" class=menupunkt>Menupunkt 1</a></td></tr>
<tr><td class=menu><a href=\"link1.html\" class=menupunkt>Menupunkt 2</a></td></tr>
<tr><td class=menu><a href=\"link1.html\" class=menupunkt>Menupunkt 3</a></td></tr>
<tr><td class=menu><a href=\"link1.html\" class=menupunkt>Menupunkt 4</a></td></tr>
</table>

</body>

</html>