Søg
Avatar billede caf Nybegynder
15. september 2006 - 15:55 Der er 24 kommentarer og
1 løsning

a:hover virker hvorfor gør a:active ikke?

css:

#links a  {
    width: 146px;
    display: block;
    text-align: left;
    padding: 6px;
    margin: 2px;
    text-decoration: none;
    color:#FFCC33  ;
    background: #838383;
    border-right: 5px solid #505050;
    border-bottom: 2px solid #505050;
    border-top: 1px solid #505050;
    border-left: 1px solid #505050;
}

#links a:hover {
    color:#444 ;
    background: #AAA;
    border-right: 5px  #838383;
    border-bottom: 2px solid #838383;
}

#links a:active {
    color:#444 ;
    background: #AAA;
    border-right: 5px  #838383;
    border-bottom: 2px solid #838383;
}


html:

<div id="links">
    <a href="index.html">Forside</a>
    <a href="Italien.2006.html">2006 Italien</a>
    <a href="Kroatien.2005.html">2005 Kroatien</a>
    <a href="Danmark.2004.html">2004 Danmark</a>
    <a href="Ungarn.2003.html">2003 Ungarn</a>
    <a href="Ungarn.2002.html">2002 Ungarn</a>
    <a href="Kontakt.html">Kontakt & Links</a>
    </div>

Kan en af jer hjælpe med det??

Mvh Caf
Avatar billede mclemens Nybegynder
15. september 2006 - 16:30 #1
Det virker fint ? Du har bare misforstået hvad active gør ...
Klik på et link, men hold museknappen nede - linket vil med nedenstående
være hvidt ... Jeg har rettet baggrunden så man kan se skiftet ...

<!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">
#links a  {
    width: 146px;
    display: block;
    text-align: left;
    padding: 6px;
    margin: 2px;
    text-decoration: none;
    color:#FFCC33  ;
    background: #838383;
    border-right: 5px solid #505050;
    border-bottom: 2px solid #505050;
    border-top: 1px solid #505050;
    border-left: 1px solid #505050;
}


#links a:hover {
    color:#444 ;
    background: #AAA;
    border-right: 5px  #838383;
    border-bottom: 2px solid #838383;
}

#links a:active {
    color:#444 ;
    background: #fff;
    border-right: 5px  #838383;
    border-bottom: 2px solid #838383;
}
</style>

</head><body>

<div id="links">
    <a href="index.html">Forside</a>
    <a href="Italien.2006.html">2006 Italien</a>
    <a href="Kroatien.2005.html">2005 Kroatien</a>
    <a href="Danmark.2004.html">2004 Danmark</a>
    <a href="Ungarn.2003.html">2003 Ungarn</a>
    <a href="Ungarn.2002.html">2002 Ungarn</a>
    <a href="Kontakt.html">Kontakt & Links</a>
</div>

</body></html>


... Active kan ikke bruges til at lave farve
på det link som er lig med det nuværende ...
- Det skal laves med javascript eller serverside ...
Avatar billede stenger Nybegynder
15. september 2006 - 16:31 #2
Hvordan virker ikke? a:active er når man har klikket på linket, mens hover er en slags MouseOver...

Sker der bare ingenting eller hvad er problemet mere specifikt?
Avatar billede mclemens Nybegynder
15. september 2006 - 16:48 #3
Og her er lige eksemplet med at skifte
stylen på det aktive link som man er under...

<!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>

<script type="text/javascript">

if(window.addEventListener)window.addEventListener("load", function(){wload();}, false);
else if(window.attachEvent)window.attachEvent("onload", function(){wload();});

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

</script>


<style type="text/css">
#links a  {
    width: 146px;
    display: block;
    text-align: left;
    padding: 6px;
    margin: 2px;
    text-decoration: none;
    color:#FFCC33  ;
    background: #838383;
    border-right: 5px solid #505050;
    border-bottom: 2px solid #505050;
    border-top: 1px solid #505050;
    border-left: 1px solid #505050;
}


#links a:hover {
    color:#444 ;
    background: #AAA;
    border-right: 5px  #838383;
    border-bottom: 2px solid #838383;
}

#activelink {
    color:#444!important;
    background: #aaa!important;
    border-right: 5px  #838383!important;
    border-bottom: 2px solid #838383!important;
}

</style>

</head><body>

<div id="links">
    <a href="./index.html">Forside</a>
    <a href="Italien.2006.html">2006 Italien</a>
    <a href="Kroatien.2005.html">2005 Kroatien</a>
    <a href="Danmark.2004.html">2004 Danmark</a>
    <a href="Ungarn.2003.html">2003 Ungarn</a>
    <a href="Ungarn.2002.html">2002 Ungarn</a>
    <a href="Kontakt.html">Kontakt & Links</a>
</div>

</body></html>
Avatar billede mclemens Nybegynder
15. september 2006 - 16:50 #4
a#activelink {
    color:#444;
    background: #aaa;
    border-right: 5px  #838383;
    border-bottom: 2px solid #838383;
}

var nok en bedre css til #activelink i ovenstående eksempel ...
Avatar billede mclemens Nybegynder
15. september 2006 - 16:54 #5
Vedrørende 16:30:42 formoder jeg at du havde forstået :active som
det aktive link istedet for det link man havde musen trykket ned
på fordi at #links a:hover og #links a:active i spørgsmålet var ens :)
Avatar billede caf Nybegynder
15. september 2006 - 17:16 #6
Hej mclemens

Du har ret, jeg troede at aktive var = den siden man var på :-)

Så skriver du et fint eks. med men javascript som så skulle skifte farven men,(det kan være det er mig) det virker ikke.
Avatar billede mclemens Nybegynder
15. september 2006 - 17:40 #7
I test filen var jeg kommet til at skrive
<a href="./index.html">Forside</a> istedet for
<a href="index.html">Forside</a> - dog virkede den
alligevel hos mig ... prøv at gemme filen som
index.html på skrivebordet ...

<!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>

<script type="text/javascript">

if(window.addEventListener)window.addEventListener("load", function(){wload();}, false);
else if(window.attachEvent)window.attachEvent("onload", function(){wload();});

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

</script>


<style type="text/css">
#links a  {
    width: 146px;
    display: block;
    text-align: left;
    padding: 6px;
    margin: 2px;
    text-decoration: none;
    color:#FFCC33  ;
    background: #838383;
    border-right: 5px solid #505050;
    border-bottom: 2px solid #505050;
    border-top: 1px solid #505050;
    border-left: 1px solid #505050;
}


#links a:hover {
    color:#444 ;
    background: #AAA;
    border-right: 5px  #838383;
    border-bottom: 2px solid #838383;
}

a#activelink {
    color:#444;
    background: #aaa;
    border-right: 5px  #838383;
    border-bottom: 2px solid #838383;
}

</style>

</head><body>

<div id="links">
    <a href="./index.html">Forside</a>
    <a href="Italien.2006.html">2006 Italien</a>
    <a href="Kroatien.2005.html">2005 Kroatien</a>
    <a href="Danmark.2004.html">2004 Danmark</a>
    <a href="Ungarn.2003.html">2003 Ungarn</a>
    <a href="Ungarn.2002.html">2002 Ungarn</a>
    <a href="Kontakt.html">Kontakt & Links</a>
</div>

</body></html>





Ved lidt gennemtænkning kan der være problemer
med http://www.mit_---_domænde.dk/ og et link som
/index.html istedet for / ... prøver lige at lege med den ...
Avatar billede mclemens Nybegynder
15. september 2006 - 17:48 #8
Denne hjalp hos mig :)

<script type="text/javascript">

if(window.addEventListener)window.addEventListener("load", function(){wload();}, false);
else if(window.attachEvent)window.attachEvent("onload", function(){wload();});

function wload(){
  var links=document.getElementById("links").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].setAttribute("id","activelink");
      i=i2;
    }
  }
}

</script>

... Så virker den ved både:
htttp://localhost/index.html
og http://localhost/
Avatar billede mclemens Nybegynder
15. september 2006 - 17:54 #9
Og en lille fejl i css'en jeg ikke så:

#links a:hover {
    color:#444 ;
    background: #AAA;
    border-right: 5px solid #838383;
    border-bottom: 2px solid #838383;
}

a#activelink {
    color:#444;
    background: #aaa;
    border-right: 5px solid #838383;
    border-bottom: 2px solid #838383;
}

(der manglede solid i border-right ...
jeg fangede den ikke lige ... )
Avatar billede mclemens Nybegynder
15. september 2006 - 17:56 #10
Og så en forkortelse i css'en :D
... Poster den lige igen, ellers bliver det for rodet ...



<!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>

<script type="text/javascript">

if(window.addEventListener)window.addEventListener("load", function(){wload();}, false);
else if(window.attachEvent)window.attachEvent("onload", function(){wload();});

function wload(){
  var links=document.getElementById("links").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].setAttribute("id","activelink");
      i=i2;
    }
  }
}

</script>


<style type="text/css">
#links a  {
    width: 146px;
    display: block;
    text-align: left;
    padding: 6px;
    margin: 2px;
    text-decoration: none;
    color:#FFCC33  ;
    background: #838383;
    border-right: 5px solid #505050;
    border-bottom: 2px solid #505050;
    border-top: 1px solid #505050;
    border-left: 1px solid #505050;
}


#links a:hover,a#activelink {
    color:#444 ;
    background: #AAA;
    border-right: 5px solid #838383;
    border-bottom: 2px solid #838383;
}

</style>

</head><body>

<div id="links">
    <a href="./index.html">Forside</a>
    <a href="Italien.2006.html">2006 Italien</a>
    <a href="Kroatien.2005.html">2005 Kroatien</a>
    <a href="Danmark.2004.html">2004 Danmark</a>
    <a href="Ungarn.2003.html">2003 Ungarn</a>
    <a href="Ungarn.2002.html">2002 Ungarn</a>
    <a href="Kontakt.html">Kontakt & Links</a>
</div>

</body></html>


... Undskyld spamming :O)
Avatar billede caf Nybegynder
15. september 2006 - 18:08 #11
Hej igen

Nu har jeg prøvet at lave ovenstående i en fil på skrivebordet ved navn index.html og en anden fil også på skrivebordet ved navn Italien.2006.html, men (jeg er ked af at sige det) når man står på Italien så er "knappen" ikke ændret.

Jeg har ikke uploadet noget endnu, men add. er www.voresferier.dk
Avatar billede mclemens Nybegynder
15. september 2006 - 18:55 #12
Og du husker at lægge scriptet ind i Italien.2006.html?
- Det virker fint ved min lokale test ...

... Det er dog nok bedre at lægge:

<script type="text/javascript" src="activelink.js"></script>
ind på alle siderne istedet for hele scriptet og så lave en
fil med navnet activelink.js med indholdet:


if(window.addEventListener)window.addEventListener("load", function(){wload();}, false);
else if(window.attachEvent)window.attachEvent("onload", function(){wload();});

function wload(){
  var links=document.getElementById("links").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].setAttribute("id","activelink");
      i=i2;
    }
  }
}
Avatar billede mclemens Nybegynder
15. september 2006 - 18:59 #13
eksempel:
w ww.dkif.com/users/clemens/tmp/index.html
kun italien siden er lavet
Avatar billede caf Nybegynder
15. september 2006 - 19:02 #14
Jeps

index:
<!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>

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


<style type="text/css">
#links a  {
    width: 146px;
    display: block;
    text-align: left;
    padding: 6px;
    margin: 2px;
    text-decoration: none;
    color:#FFCC33  ;
    background: #838383;
    border-right: 5px solid #505050;
    border-bottom: 2px solid #505050;
    border-top: 1px solid #505050;
    border-left: 1px solid #505050;
}


#links a:hover,a#activelink {
    color:#444 ;
    background: #AAA;
    border-right: 5px solid #838383;
    border-bottom: 2px solid #838383;
}

</style>

</head><body>

<div id="links">
    <a href="./index.html">Forside</a>
    <a href="Italien.2006.html">2006 Italien</a>
    <a href="Kroatien.2005.html">2005 Kroatien</a>
    <a href="Danmark.2004.html">2004 Danmark</a>
    <a href="Ungarn.2003.html">2003 Ungarn</a>
    <a href="Ungarn.2002.html">2002 Ungarn</a>
    <a href="Kontakt.html">Kontakt & Links</a>
</div>

</body></html>

Italien:

<!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>

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





<style type="text/css">
#links a  {
    width: 146px;
    display: block;
    text-align: left;
    padding: 6px;
    margin: 2px;
    text-decoration: none;
    color:#FFCC33  ;
    background: #838383;
    border-right: 5px solid #505050;
    border-bottom: 2px solid #505050;
    border-top: 1px solid #505050;
    border-left: 1px solid #505050;
}


#links a:hover,a#activelink {
    color:#444 ;
    background: #AAA;
    border-right: 5px solid #838383;
    border-bottom: 2px solid #838383;
}

</style>

</head><body>

<div id="links">
    <a href="./index.html">Forside</a>
    <a href="Italien.2006.html">2006 Italien</a>
    <a href="Kroatien.2005.html">2005 Kroatien</a>
    <a href="Danmark.2004.html">2004 Danmark</a>
    <a href="Ungarn.2003.html">2003 Ungarn</a>
    <a href="Ungarn.2002.html">2002 Ungarn</a>
    <a href="Kontakt.html">Kontakt & Links</a>
</div>

</body></html>

Jeg håber jeg spiller din tid og at vi taler om det samme.
Når jeg går ind på min side og vælger Italien ( er nu på Italien)og flytter musen væk fra knappen, så får den farven som ved a.hover ikk? og detgør ovenstående ikke hos mig.
Avatar billede mclemens Nybegynder
15. september 2006 - 19:09 #15
Virker w ww.dkif.com/users/clemens/tmp/index.html hos dig?
Hvis ikke hvilken browser bruger du ?
Avatar billede caf Nybegynder
15. september 2006 - 19:18 #16
Det er lige i øjet :-)) det virker hvordan??
Avatar billede mclemens Nybegynder
15. september 2006 - 19:18 #17
Du må have pillet i javascriptet ?
Avatar billede caf Nybegynder
15. september 2006 - 19:19 #18
Virker det kun ved upload eller hvad?
Avatar billede caf Nybegynder
15. september 2006 - 19:20 #19
Jeg har kopieret det her fra siden. Jeg prøver lige igen.
Avatar billede mclemens Nybegynder
15. september 2006 - 19:20 #20
Nej, den virker fint lokalt hos mig også ... ?
Ved dog ikke om der kan være blokeret for aktivt
indhold på pc'er ved sikkerhedsopdateringer fra ms ?
Avatar billede mclemens Nybegynder
15. september 2006 - 19:21 #21
Edit: Ved dog ikke om der kan være blokeret for aktivt indhold ved kørsel
af javascripts lokalt på pc'er grundet sikkerhedsopdateringer fra ms ?
Avatar billede caf Nybegynder
15. september 2006 - 19:30 #22
Hej igen

Har nu lagt det ind på alle sidder og uploadet det og det virker perfekt.

Det virker dog ikke lokalt så det må være en indstilling et eller andet sted.

1000 tak for hjælpen det var sødt af dig at bruge en fredag aften på mig.
Kan du have en god weekend.

Catarina
Avatar billede mclemens Nybegynder
15. september 2006 - 19:35 #23
Velbekom, og tak for point :o)
... alternativt til scriptet kan
man selvfølgelig bare sætte id på linket...
Avatar billede caf Nybegynder
15. september 2006 - 19:51 #24
Ja det er rigtigt, men jeg kan nu godt lide kun at ændre et sted:-))
Avatar billede mclemens Nybegynder
15. september 2006 - 22:08 #25
Helt enig :) Og god
weekend til dig også ;)
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
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
27/0714:34 Hjælp til at kunne skanne negativer på Plustek 8300i SE Af Mariann i Foto & video
27/0713:58 Mapperne Dokumenter og Overførsler er forsvundet efter geninstallation af Win11 Af bragger i Windows
25/0713:55 Ukendt sender e-mails fra - og til min e-mail adresse Af mort1 i Andet sikkerhed
24/0711:08 Forskel mellem klokkeslet start aften slut næste morgen Af krasmussen i Excel
23/0715:10 WINDOWS KOMPABILITET Af snestrup2000 i Windows
White papers
Flere white papers »