Notifikationer

Markér alle som læst Log ud

mundt Nybegynder

01. april 2004 - 23:46 Der er 14 kommentarer og
2 løsninger

Ændre farve ved mouseover

Kan man i en tabel som nedenstående ændre farven på menupunkterne (det vil sige selve teksten) ved mouseover uden at bruge billedfiler?

<table width="800" height="30" border="0" cellpadding="0" cellspacing="0" rules="none" background="backgroundimagebuttom.jpg">
<tr valign="middle" >
<td width="133" ><div align="center"><strong><a href="nyheder.htm" tabindex="1" target="_self">Nyheder</a></strong></div></td>
<td width="133" ><div align="center"><strong><a href="aktiviteter.htm" tabindex="2" target="_self">Aktiviteter</a></strong></div></td>
<td width="133" ><div align="center"><strong><a href="flemming.htm" tabindex="3" target="_self">Flemming</a></strong></div></td>
<td width="133" ><div align="center"><strong><a href="eleverne.htm" tabindex="4" target="_self">Eleverne</a></strong></div></td>
<td width="133" ><div align="center"><strong><a href="gaestebog.htm" tabindex="5" target="_self">Gæstebog</a></strong></div></td>
<td width="133" ><div align="center"><strong><a href="links.htm" tabindex="6" target="_self">Links</a></strong></div></td>
</tr>
</table>

Synes godt om

roenving Novice

01. april 2004 - 23:51 #1

Simpel css:

<style type="text/css">
a{
color:black;
text-decoration:none;
}
a:link{
color:#333;
}
a:hover{
color:#777;
text-decoration:underline;
}
</style>

Placer dette imellem <head> og </head> !-)

Synes godt om

roenving Novice

01. april 2004 - 23:52 #2

-- og hvis det kun skal gælde links i tabellen, skal tabellen bare have et id eller en class, så er den klaret som en mis !-)

Synes godt om

stig69 Nybegynder

02. april 2004 - 00:03 #3

Ved hjælp af mouseover
<table width="800" height="30" border="0" cellpadding="0" cellspacing="0" rules="none" background="backgroundimagebuttom.jpg">
<tr valign="middle" >
<td width="133" ><div align="center" onMouseOver="document.linkColor='green'";

onMouseOut="document.linkColor='blue'";

><strong><a href="nyheder.htm" tabindex="1" target="_self">Nyheder</a></strong></div></td>
</tr>
</table>

Synes godt om

mundt Nybegynder

02. april 2004 - 00:03 #4

Hvis jeg nu giver min tabel et id som hedder 'menu' skal jeg så skrive menu:link, menu:hover osv. i min css-fil?

Synes godt om

stig69 Nybegynder

02. april 2004 - 00:06 #5

roenving--> Hvad siger du til min mouseover?

Synes godt om

stig69 Nybegynder

02. april 2004 - 00:12 #6

<html>

<head>
<style type="text/css">
a.menu{
color:black;
text-decoration:none;
}
a.menu:link{
color:#333;
}
a.menu:hover{
color:#777;
text-decoration:underline;
}
</style>
<head>

<body>

<table class="menu" width="800" height="30" border="0" cellpadding="0" cellspacing="0" rules="none" background="backgroundimagebuttom.jpg">
<tr valign="middle" >
<td width="133" ><div align="center"><strong><a href="nyheder.htm" tabindex="1" target="_self" class="menu">Nyheder</a></strong></div></td>
<td width="133" ><div align="center"><strong><a href="aktiviteter.htm" tabindex="2" target="_self" class="menu">Aktiviteter</a></strong></div></td>
<td width="133" ><div align="center"><strong><a href="flemming.htm" tabindex="3" target="_self" class="menu">Flemming</a></strong></div></td>
<td width="133" ><div align="center"><strong><a href="eleverne.htm" tabindex="4" target="_self" class="menu">Eleverne</a></strong></div></td>
<td width="133" ><div align="center"><strong><a href="gaestebog.htm" tabindex="5" target="_self" class="menu">Gæstebog</a></strong></div></td>
<td width="133" ><div align="center"><strong><a href="links.htm" tabindex="6" target="_self" class="menu">Links</a></strong></div></td>
</tr>
</table>

</body>
</html>

Synes godt om

stig69 Nybegynder

02. april 2004 - 00:15 #7

Åhh, der skal ikke være class="menu" i <table....

Synes godt om

roenving Novice

02. april 2004 - 00:21 #8

Næh, det bliver:

<style type="text/css">
#menu a{
color:black;
text-decoration:none;
}
#menu a:link{
color:#333;
}
#menu a:hover{
color:#777;
text-decoration:underline;
}
</style>

-- og så:

<table id="menu" ...

Synes godt om

mundt Nybegynder

02. april 2004 - 00:22 #9

Perfekt! Det virker fint nu. Tak for hjælpen begge - kan du roenving ikke lige give et svar så jeg kan dele point ud?

Synes godt om

roenving Novice

02. april 2004 - 00:22 #10

-- og at ændre linkColor på document vil jeg til enhver tid fraråde, da det er en reminiscens fra html øeh, 2 ?-)

Synes godt om

stig69 Nybegynder

02. april 2004 - 00:24 #11

roenving--> hvorfor hedder det ikke a.menu men menu a:link?

Synes godt om

roenving Novice

02. april 2004 - 00:25 #12

-- og min opdatering på spørgsmålet var så ikke så gennemført, så egentlig er mit svar mere på mundt @ 00:03:30 ...

-- med den løsning, jeg viser, skal der nemlig kun angives id een gang, vil man bruge class, skal # udskiftes med .

-- og der behøver ikke sættes class på a-tags !-)

-- men velbekomme '-)

-- du kan sikkert snart håndtere meget mere css-logik ...

Synes godt om

roenving Novice

02. april 2004 - 00:27 #13

a.menu betyder et a-tag med class menu ...

#menu a betyder alle a-tags indenfor et element med id="menu" ...

.menu a betyder alle a-tags indenfor elementer med class="menu" !-)

Synes godt om

roenving Novice

02. april 2004 - 00:39 #14

Og sådan ville jeg selv gøre det (her er styles i dokumentet, de bør lige før man afslutter udviklingen flyttes ud i et eksternt stylesheet !-)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<style type="text/css">
.menu{
height:30px;
width:800px;
border:0px;
background:url('backgroundimagebuttom.jpg');
text-align:center;
font-weight:bold;
border-collapse:collapse;
}
.menu td{
width:133px;
border:0px;
padding:0px;
vertical-align:middle;
}
a.menu{
color:black;
text-decoration:none;
}
a.menu:link{
color:#333;
}
a.menu:hover{
color:#777;
text-decoration:underline;
}
</style>
<head>

<body>

<table class="menu">
<tr>
<td><a href="nyheder.htm" tabindex="1">Nyheder</a></td>
<td><a href="aktiviteter.htm" tabindex="2">Aktiviteter</a></td>
<td><a href="flemming.htm" tabindex="3">Flemming</a></td>
<td><a href="eleverne.htm" tabindex="4">Eleverne</a></td>
<td><a href="gaestebog.htm" tabindex="5">Gæstebog</a></td>
<td><a href="links.htm" tabindex="6">Links</a></td>
</tr>
</table>

</body>
</html>

Synes godt om

roenving Novice

02. april 2004 - 00:40 #15

-- og tak for points ;~}

Synes godt om

roenving Novice

02. april 2004 - 00:41 #16

Øv, jeg fik jo ikke det hele med:

alle a.menu skal udskiftes med:

.menu a !-)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS