Avatar billede dotcom1 Nybegynder
03. juni 2004 - 21:58 Der er 4 kommentarer og
1 løsning

Forskellige farver i menu

http://www.studenterforum.dk/test/links.htm

Bruger en menu med følgende css:

<style type="text/css">
table.menu {border-collapse:collapse;}
.menu td {font: 11px arial, verdana, sans-serif; text-align: center; font-weight:bold; padding:0px;border: 1px solid #000000;}

a.menupunkt:visited {
    text-decoration: none;
    display: block;
    color: #000000;
}
a.menupunkt:hover {
    text-decoration: none;
    background-color: #FF9900;
    display: block;
    color: #000000;
}
</style>

Hvordan ændrer man i css'en, hvis man gerne vil have en forskellig farve ved hover over hvert menupunkt? Det er kun baggrundsfarven, der skal være forskellig. Lige nu får de alle sammen den samme orange.

:-)
Avatar billede taskmgr Nybegynder
03. juni 2004 - 22:04 #1
Lav flere forskellige klasser:

class="menupunkt1"
class="menupunkt2"
osv...

a.menupunkt1:visited {
...
}
a.menupunkt1:hover {
...
}
a.menupunkt2:visited {
...
}
a.menupunkt2:hover {
...
}

Osv... :)
Avatar billede dotcom1 Nybegynder
03. juni 2004 - 22:11 #2
Ok, men hvad skriver jeg så i den tabel, hvor effekten skal være? Den skal jo beholde den style, der er defineret i 'menupunkt', undtagen ved hover, hvor den så skal have en anden baggrundsfarve. Man kan vel ikke skrive flere 'class' efter hinanden...?

Tabellen:

<table width="67%" height="13" cellspacing="0" class="menu">
          <tr>
            <td width="18%"><a class="menupunkt" href="#">&nbsp;Forside</a></td>
            <td width="23%"><a class="menupunkt" href="#">&nbsp;Projekter</a></td>
            <td width="16%"><a class="menupunkt" href="#">&nbsp;CV</a></td>
            <td width="20%"><a class="menupunkt" href="#">&nbsp;Galleri</a></td>
            <td width="21%"><a class="menupunkt" href="#">&nbsp;Links</a></td>
            <td width="2%" style="border: 0px;">&nbsp;</td>
          </tr>
        </table>
Avatar billede dotcom1 Nybegynder
03. juni 2004 - 22:14 #3
Ah, nu funker det. :-) Tak! Svar lige.
Avatar billede taskmgr Nybegynder
03. juni 2004 - 22:15 #4
Jo det kan du sagtens :) Her har jeg lavet de første to...

<style type="text/css">
table.menu {border-collapse:collapse;}
.menu td {font: 11px arial, verdana, sans-serif; text-align: center; font-weight:bold; padding:0px;border: 1px solid #000000;}

a.menupunkt1:visited {
    text-decoration: none;
    display: block;
    color: #000000;
}
a.menupunkt1:hover {
    text-decoration: none;
    background-color: #FF9900;
    display: block;
    color: #000000;
}
a.menupunkt2:visited {
    text-decoration: none;
    display: block;
    color: #000000;
}
a.menupunkt2:hover {
    text-decoration: none;
    background-color: #CCC;
    display: block;
    color: #000000;
}
</style>

<table width="67%" height="13" cellspacing="0" class="menu">
          <tr>
            <td width="18%"><a class="menupunkt1" href="#">&nbsp;Forside</a></td>
            <td width="23%"><a class="menupunkt2" href="#">&nbsp;Projekter</a></td>
            <td width="16%"><a class="menupunkt" href="#">&nbsp;CV</a></td>
            <td width="20%"><a class="menupunkt" href="#">&nbsp;Galleri</a></td>
            <td width="21%"><a class="menupunkt" href="#">&nbsp;Links</a></td>
            <td width="2%" style="border: 0px;">&nbsp;</td>
          </tr>
</table>
Avatar billede taskmgr Nybegynder
03. juni 2004 - 22:15 #5
Ok :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester