Notifikationer

Markér alle som læst Log ud

cskott Nybegynder

11. oktober 2006 - 18:53 Der er 13 kommentarer og
1 løsning

Kan ikke få stylesheet til at virke

Hej,

Må en hjemmeside har jeg lavet en menu hvor nedenstående stylesheet skal fungere.
Det virker også med at linket skifter farve til maroon når jeg kører musen henover. Men jeg vil gerne have den til at fastholde den farve på linket indtil man klikker på et andent link.
Men det kan jeg ikke få den til?

Linket ser sådan ud:
<A HREF="Default.php?FileID=Praktiskeoplysninger.gif" CLASS="Menulink">Praktiske oplysninger</A>

Stylesheet sådan:
Body {
font-style:normal;
font-size:8px;
font-family:'Verdana','Arial','Microsoft Sans Serif';
color:white;
}
A:link.Menulink {
font-family:verdana, helvetica;
font-size:10px;
color:white;
font-weight:bold;
text-decoration:none;

}
A:visited.Menulink {
font-family:verdana, helvetica;
font-size:10px;
color:white;
font-weight:bold;
text-decoration:none;
}
A:hover.Menulink {
font-family:verdana, helvetica;
font-size:10px;
color:maroon;
font-weight:bold;
text-decoration: none;
}
A:active.Menulink {
font-family:verdana, helvetica;
font-size:10px;
color:maroon;
font-weight:bold;
text-decoration:none;

Synes godt om

roenving Novice

11. oktober 2006 - 19:01 #1

Nej, der skal du nok ud i et javascript, nemlig på mouseover sætte link-farven (og aflyse alle andre ændringer !-)

I øvrigt kan du forkorte din css betragteligt:

body {
font-style:normal;
font-size:8px;
font-family:verdana,arial,'Microsoft Sans Serif',sans-serif;
color:white;
}
.Menulink:link {
font-family:verdana, helvetica,sans-serif;
font-size:10px;
color:white;
font-weight:bold;
text-decoration:none;
}
.Menulink:visited {
color:white;
}
.Menulink:hover {
color:maroon;
text-decoration: none;
}
.Menulink:active {
color:maroon;
}

-- og det virker mærkeligt, at du nævner arial og M$ sans serif et sted og helvetica et andet sted !o]

Synes godt om

cskott Nybegynder

11. oktober 2006 - 19:39 #2

Det er ikke sådan at du vil lave et eksempel? :-)

Synes godt om

mclemens Nybegynder

11. oktober 2006 - 22:53 #3

Prøv at oprette test1.html og test2.html begge
med dette indhold ... klik så frem og tilbage - kig
evt. også i denne tråd: http://www.eksperten.dk/spm/736943

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

http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">

body {
font: 8px verdana,arial,'Microsoft Sans Serif',sans-serif;
color: #fff;
background: #000;
}

.Menulink {
font: bold 10px verdana,helvetica,sans-serif;
color: #fff;
text-decoration:none;
}

.Menulink:hover {
color:maroon;
}

#Menulinkact {
color:maroon;
}

</style>

<script type="text/javascript">
window.onload=function(){
var links=document.getElementsByTagName("a");
for(i=0,i2=links.length;i<i2;i++){
if(links[i].href==window.location.href&&links[i].className=="Menulink"){
links[i].id="Menulinkact";
i=i2;
}
}
}
</script>

</head><body>
<A HREF="test1.html" class="Menulink">test1.html</A><br>
<A HREF="test2.html" class="Menulink">test2.html</A>
</body></html>

Synes godt om

mclemens Nybegynder

11. oktober 2006 - 23:11 #4

Hvis det er muligt at placere alle menu punkter
i en div / element for sig er denne en tand bedre...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">

body {
font: 8px verdana,arial,'Microsoft Sans Serif',sans-serif;
color: #fff;
background: #000;
}

#menu a {
font: bold 10px verdana,helvetica,sans-serif;
color: #fff;
text-decoration:none;
}

#menu a:hover {
color:maroon;
}

#menu #menuact {
color:maroon;
}

</style>

<script type="text/javascript">
window.onload=function(){
var links=document.getElementById("menu").getElementsByTagName("a");
for(i=0,i2=links.length;i<i2;i++){
if(links[i].href==window.location.href){
links[i].id="menuact";
i=i2;
}
}
}
</script>

</head><body>

<div id="menu">
<a href="test1.html">test1.html</a><br>
<a href="test2.html">test2.html</a>
</div>

</body></html>

... script delen i ovenstående bør dog rettes til

<script type="text/javascript" src="menuhov.js"></script>

og så menuhov.js med indholdet:

window.onload=function(){
var links=document.getElementById("menu").getElementsByTagName("a");
for(i=0,i2=links.length;i<i2;i++){
if(links[i].href==window.location.href){
links[i].id="menuact";
i=i2;
}
}
}

... men hvis den skal tage hensyn til f.eks.
http:// ww w.ditdomæne.dk/index.php og http:// ww w.ditdomæne.dk/
bør den nok se ud som i http://www.eksperten.dk/spm/736943#rid6460447

window.onload=function(){
var links=document.getElementById("menu").getElementsByTagName("a");
for(i=0,i2=links.length;i<i2;i++){
if(links[i].href==window.location.href||links[i].href.replace("index.html","")==window.location.href){
links[i].id="menuact";
i=i2;
}
}
}

... index.html i ovenstående skal så lige udskiftes med index.php eller
index.asp eller hvad man plejer at bruge som standard fil efter / ... men
som sagt kun udvidelsen hvis man har behovet ...

... Rønving, husk dit svar ;)

Synes godt om

cskott Nybegynder

12. oktober 2006 - 17:55 #5

mclemens >> Hvis du vil må du gerne prøve at sætte det ind her..:-)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>

<TITLE></TITLE>
<LINK REL="stylesheet" HREF="stylesheet.css" TYPE="text/css">

<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
</HEAD>
<BODY>
<Table align="center" Width="700" Height="150">
<TR>
<TD WIDTH="700"><IMG SRC="Grafik/Topbilledcollage.jpg" BORDER="0" WIDTH="700" HEIGHT="150" ALT=""></TD>
</TABLE>
<TABLE align="center" Width="703" style="margin-top:-5px;">
<TD width="703" height="25" bgcolor="black" align="center">
<DIV style="letter-spacing:1px;">
<A HREF="Default.php?FileID=LINK 1" CLASS="Menulink">LINK 1</A>
<A HREF="Default.php?FileID=LINK 2" CLASS="Menulink">LINK 2</A>
<A HREF="Default.php?FileID=LINK 3" CLASS="Menulink">LINK 3</A>
<A HREF="Default.php?FileID=LINK 4" CLASS="Menulink">LINK 4</A>
</TD>
</TABLE>

Synes godt om

mclemens Nybegynder

12. oktober 2006 - 21:28 #6

Umiddelbart noget i denne stil:
selve filen:
------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<HEAD>

<TITLE></TITLE>
<LINK REL="stylesheet" HREF="stylesheet.css" TYPE="text/css">

<script src="menuhov.js" type="text/javascript"></script>

<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
</HEAD>
<BODY>
<Table align="center" Width="700" Height="150">
<TR>
<TD WIDTH="700"><IMG SRC="Grafik/Topbilledcollage.jpg" BORDER="0" WIDTH="700" HEIGHT="150" ALT=""></TD>
</TABLE>
<TABLE align="center" Width="703" style="margin-top:-5px;">
<TD width="703" height="25" bgcolor="black" align="center">

<DIV style="letter-spacing:1px;" id="menu">

<A HREF="Default.php?FileID=LINK 1" CLASS="Menulink">LINK 1</A>
<A HREF="Default.php?FileID=LINK 2" CLASS="Menulink">LINK 2</A>
<A HREF="Default.php?FileID=LINK 3" CLASS="Menulink">LINK 3</A>
<A HREF="Default.php?FileID=LINK 4" CLASS="Menulink">LINK 4</A>
</TD>
</TABLE>

...

css filen:
body {
font: 8px verdana,arial,'Microsoft Sans Serif',sans-serif;
color: #fff;
background: #000;
}

#menu a {
font: bold 10px verdana,helvetica,sans-serif;
color: #fff;
text-decoration:none;
}

#menu a:hover {
color:maroon;
}

#menu #menuact {
color:maroon;
}

...

javascript filen:
window.onload=function(){
var links=document.getElementById("menu").getElementsByTagName("a");
for(i=0,i2=links.length;i<i2;i++){
if(links[i].href==window.location.href){
links[i].id="menuact";
i=i2;
}
}
}

... dog bør mellemrum i links nok skrives som %20 ... du trænger til en validering og sikkert en fuld doctype ( <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ) ...

Synes godt om

cskott Nybegynder

14. oktober 2006 - 18:27 #7

Jeg kan ikke lige få det til at virke.. Den siger fejl på siden..

Synes godt om

mclemens Nybegynder

14. oktober 2006 - 22:03 #8

Umiddelbart anbefales det at du koder med Firefox, og så trykker funktioner og javascript konsol - så kan du se hvad fejlen er ... IE's "Der er fejl på siden" er ikke den bedste fejlmeddellelse den kunne give ...

Umiddelbart vil jeg skyde på at du ikke har sat id på den div hvor menupunkterne er i?

<DIV style="letter-spacing:1px;" id="menu">

...

...

Dette eksempel baseret på 12/10-2006 17:55:30 virker hos mig i IE og FF,
men du bør som sagt lige have rettet doctypen og valideret siden.

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

<TITLE></TITLE>
<style type="text/css">

body {
font: 8px verdana,arial,'Microsoft Sans Serif',sans-serif;
color: #fff;
background: #000;
}

#menu a {
font: bold 10px verdana,helvetica,sans-serif;
color: #fff;
text-decoration:none;
}

#menu a:hover {
color:maroon;
}

#menu #menuact {
color:maroon;
}

</style>

<script type="text/javascript">

window.onload=function(){
var links=document.getElementById("menu").getElementsByTagName("a");
for(i=0,i2=links.length;i<i2;i++){
if(links[i].href==window.location.href){
links[i].id="menuact";
i=i2;
}
}
}

</script>

<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
</HEAD>
<BODY>
<Table align="center" Width="700" Height="150">
<TR>
<TD WIDTH="700"><IMG SRC="Grafik/Topbilledcollage.jpg" BORDER="0" WIDTH="700" HEIGHT="150" ALT=""></TD>
</TABLE>
<TABLE align="center" Width="703" style="margin-top:-5px;">
<TD width="703" height="25" bgcolor="black" align="center">

<DIV style="letter-spacing:1px;" id="menu">

<A HREF="test.html" CLASS="Menulink">kald siden for test.html og tjek dette links farve/A>

<A HREF="Default.php?FileID=LINK 1" CLASS="Menulink">LINK 1</A>
<A HREF="Default.php?FileID=LINK 2" CLASS="Menulink">LINK 2</A>
<A HREF="Default.php?FileID=LINK 3" CLASS="Menulink">LINK 3</A>
<A HREF="Default.php?FileID=LINK 4" CLASS="Menulink">LINK 4</A>
</TD>
</TABLE>

Synes godt om

cskott Nybegynder

15. oktober 2006 - 08:51 #9

YES! det virker! Alle tiders...:-)
Smid et svar så du kan få lidt point

Synes godt om

mclemens Nybegynder

15. oktober 2006 - 18:19 #10

Ok, her er lige det ene... Havde håbet på at Rønving måske
havde lagt et svar for hans del, men hæng evt. ud en dags -tid
så han måske når at lægge et inden der lukkes ;)
Han kom jo med lidt css forkortelse :)

Synes godt om

cskott Nybegynder

15. oktober 2006 - 18:56 #11

Ok.. :-)

Synes godt om

roenving Novice

15. oktober 2006 - 23:06 #12

Nej tak, her springer jeg over !-)

Synes godt om

cskott Nybegynder

16. oktober 2006 - 22:00 #13

ok.. men tak for hjælpen begge to

Synes godt om

mclemens Nybegynder

17. oktober 2006 - 11:30 #14

Velbekom, og tak for point :)

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