Søg
Avatar billede hobbez Nybegynder
13. august 2006 - 00:28 Der er 27 kommentarer og
1 løsning

Farve aktive (aktuelle) link alene ved CSS?

Jeg kender godt a:active, men det dækker ikke mit behov:

Jeg har tre sider: 1.htm, 2.htm og 3.htm.

På hver side er der tre links:

Link til side 1
Link til side 2
Link til side 3

Det siger vist sig selv hvor de tre links peger hen :o)

Hvordan kan jeg få linket "Link til side 1" til at være rødt når man er på siden 1.htm, linket "Link til side 2" til at være rødt når man er på siden 2.htm, osv?

De to andre links skal blot være standardfarve for links.

Jeg troede at a:active skulle gøre det, men her kan man jo kun få farvet linket rødt i den periode hvor man holder musetasten nede.


Kan man CSS'e sig ud af det her, eller skal det programmeres fra bunden?

/Rob
Avatar billede mclemens Nybegynder
13. august 2006 - 13:00 #1
[ Kan man CSS'e sig ud af det her, eller skal det programmeres fra bunden? ]
Nej, det kan du ikke.



- Fra bunden, css har ikke noget der style præcis det link du er under...
( http://www.w3schools.com/css/css_reference.asp#pseudoclasses )
... Jeg benytter mig af at sætte en class på et link afhængig af
hvilken side man er inde på. Man kan nok også sætte det ved at
måle på sidens url og loope igennem a elementerne på siden og
så få javascriptet til at skifte stylen på et link.

Jeg anbefaler at du laver det manuelt istedet for et javascript... :)
Avatar billede mclemens Nybegynder
13. august 2006 - 13:04 #2
Eksempel på javascript, men anbefaler at
du angiver en id eller class som du skifter
på hver side istedet for javascriptet...



<!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">
window.onload=function(){
  as=document.getElementsByTagName("a");
  urls=window.location.href;
  for(i in as)if(as[i].href==urls){
    as[i].style.color="#ccc";
  }
}
</script>

</head><body>
<a href="1.html">1</a>
<a href="2.html">2</a>
</body></html>
Avatar billede mclemens Nybegynder
13. august 2006 - 16:23 #3
^ - Prøv at gemme filen som 1.html eller 2.html
Avatar billede or.han Nybegynder
13. august 2006 - 22:47 #4
Jeg ville give body en id:
<body id="side1">

Så i css'en skrive:
body#side1 a{
color:red;
}
Avatar billede or.han Nybegynder
13. august 2006 - 22:48 #5
Så kan du jo skrive det samlet:
body#side1 a,
body#side2 a,
body#side3 a{
color:red;
}
Avatar billede mclemens Nybegynder
13. august 2006 - 23:32 #6
or.han du læser spørgsmålet forkert:
[ Hvordan kan jeg få linket "Link til side 1" til at være rødt når man er på siden 1.htm, linket "Link til side 2" til at være rødt når man er på siden 2.htm, osv? ]

- Og der er det nemmeste at definere en id eller class på det link der skal have en anderledes farve og så lave css'en til id'et eller classen ligesom jeg nævnte i 13/08-2006 13:00:52... Men, hvis det havde været alle links - og ikke blot det ene link der pegede på den samme side som man stod på var forslaget ligepå.
Avatar billede mclemens Nybegynder
13. august 2006 - 23:34 #7
altså...

html: <a href="siden_man_er_paa.html" id="aktivt">Test</a>
css: #aktivt{color:#f00;}

eller

html: <a href="siden_man_er_paa.html" class="aktivt">Test</a>
css: .aktivt{color:#f00;}

- class anbefales hvis der er flere links på samme
side til den samme side som man står på ellers id.
Avatar billede olebole Juniormester
14. august 2006 - 14:05 #8
<ole>

Måden, man nomalt gør det på, er (side 1):

    <span>Side 1</span>
    <a href="side2.html">Side 2</a>
    <a href="side3.html">Side 3</a>

(side 2):
    <a href="side1.html">Side 1</a>
    <span>Side 2</span>
    <a href="side3.html">Side 3</a>

(side 3):
    <a href="side1.html">Side 1</a>
    <a href="side2.html">Side 2</a>
    <span>Side 3</span>

- og så style'er derefter  ;o)

/mvh
</bole>
Avatar billede or.han Nybegynder
14. august 2006 - 15:37 #9
mclemens>> Du forstår vist ikke det jeg vil.

Fx vil jeg opbygge en menu således:
<ul id="menu">
  <li id="side1"><a href="#">Link til side 1</a></li>
  <li id="side2"><a href="#">Link til side 2</a></li>
  <li id="side3"><a href="#">Link til side 3</a></li>
  <li id="side4"><a href="#">Link til side 4</a></li>
</ul>

Så giver man body'en forskellige id'er på de enkelte side:
<body id="t-side1">

I CSS'en gør man så således:
body#t-side1 #side1 a,
body#t-side2 #side2 a,
body#t-side3 #side3 a,
body#t-side4 #side4 a{
color:red;
}
Avatar billede or.han Nybegynder
14. august 2006 - 15:37 #10
*enkelte sider, skulle der stå
Avatar billede mclemens Nybegynder
14. august 2006 - 17:20 #11
Jeg forstod det du skrev i 13/08-2006 22:47:38
og 13/08-2006 22:48:35 på den eneste måde de kunne
forståes. Nu har du så uddybet det så du gør det manuelt
med ekstra selectors på de forskellige href's som jeg
nævnte, det gør så at du kan skifte farven på det aktuelle
link via css afhængig af hvilket link der er det aktive på
den pågældende side baseret på id defineret i body ...

Bemærk dog at du samtidig får noget jeg synes er
kode overhead ... altså unødvendige id'er da #t-side1 #side2
aldrig ville være opfyldt så er det ikke nødvendigt med id'er
på links til side 2-4 på side 1 ... jeg synes derfor at den simple
måde med at definere et id på det link der skal have en anden farve
er den nemmeste... ( 13/08-2006 23:34:36 ) ... så slipper du for de
andre id'er på links der ikke skal påvirkes og id'en på body tagget.
Avatar billede mclemens Nybegynder
14. august 2006 - 17:24 #12
Alternativet er Olebole's forslag i 14/08-2006 14:05:22.
Den eneste ulempe ved det er at linket så ikke er klikbart da det
er en span istedet for et link. Det vil så også kun være en ulempe
hvis man har noget javascripting aktiveret og brugeren ville resette
siden ved at klikke på linket igen - eller ønsker at hoppe
til toppen af en lang side ved klik på linket.
Avatar billede mclemens Nybegynder
14. august 2006 - 17:33 #13
[ Kan man CSS'e sig ud af det her, eller skal det programmeres fra bunden? ]

Men uanset hvilken del du vælger ( 13/08-2006 23:34:36 / 14/08-2006 14:05:22 / 14/08-2006 15:37:17) så ... Skal du have fat i markup'en og rette det til så du får forskellen lavet fra den ene side til den anden ... ellers er det javascriptet (13/08-2006 13:04:35) - og det er ikke optimalt.
Avatar billede hobbez Nybegynder
14. august 2006 - 23:18 #14
Tak for jeres input.

Jeg er med på hvordan jeg skal lave det, hvis jeg skal lave koden forskellig fra side til side, men jeg håbede på at der var en nemmere måde i CSS.

Og siderne hedder kun 1.htm, 2.htm osv i mit eksempel. I virkeligheden hedder de selvfølgelig noget mere sigende (velkommen.htm, kontakt.htm osv).

Tak igen.

/Rob
Avatar billede mclemens Nybegynder
14. august 2006 - 23:25 #15
Og tak for point :)
Avatar billede hobbez Nybegynder
14. august 2006 - 23:43 #16
:o)
Avatar billede olebole Juniormester
15. august 2006 - 10:53 #17
- men hvorfor overhovedet have et link til siden, man aktuelt står på ... er det ikke ligegyldigt overkill?  :)
Avatar billede mclemens Nybegynder
15. august 2006 - 11:11 #18
Eneste årsag jeg kan se er ( 14/08-2006 17:24:03 ) eksempelvis et menu panel der altid er tilgængelig i venstre side - hvis man så har linket kan man klikke for at hoppe til toppen ... m.h.t. det andet med nulstilling af et javascripts påvirkning m.v. er der selvfølgelig også F5 tasten, man jo det kan også betegnes som overkill - men det er sjældent nødvendigt så den med span'en er også ganske effektiv / oftest brugt :)
Avatar billede mclemens Nybegynder
15. august 2006 - 12:05 #19
[ er det ikke ligegyldigt overkill?  :) ] Joh :)
Avatar billede hobbez Nybegynder
15. august 2006 - 18:31 #20
Jamen jeg behøver heller ikke linket til siden.

Det jeg gerne vil er at have MENUPUNKTET farvet i en anden farve for at vise at 'denne side er du på'.

Simpelt, ikke?

Og så naturligvis undgå at skulle ændre i menukoden for hver enkelt side, men bruge samme HTML-kode (med CSS) på alle sider.

Så det vil da være fint med en løsning hvor linket til siden bliver inaktivt også.

Men ligefrem at kalde det OVERKILL? Så ved man vist ikke hvad ordet 'overkill' betyder :o)

/Rob
Avatar billede mclemens Nybegynder
15. august 2006 - 18:47 #21
overkill er bare et andet ord for overhead... Altså at man kan
gøre en ting lettere... I Olebole's tilfælde slipper browseren
for at lave et link ... overkill kan måske lyde voldsomt her
- men det er ikke så slemt som det lyder igen... Jeg bruger
selv den med linket og ikke den med span'en... Jeg kunne
måske spare 20 tegn og en generering af et link...
- så det er ikke slemt for mit vedkommende.

[ Og så naturligvis undgå at skulle ændre i menukoden for hver enkelt side, men bruge samme HTML-kode (med CSS) på alle sider. ] Uanset hvad du vælger så skal du rette markup'en ligesom jeg nævnte i 14/08-2006 17:33:31.

[ Så det vil da være fint med en løsning hvor linket til siden bliver inaktivt også.  ] Det er som sagt at gøre som Olebole viser i 14/08-2006 14:05:22 - og så ramme span'en med f.eks. en css selector oppe fra menu div'en f.eks.:

<div id="menu">
  <span>Side 1</span>
  <a href="side2.html">Side 2</a>
  <a href="side3.html">Side 3</a>
</div>

css:
#menu span{color:#f00;background:#fff;}
- og så css til de andre links også


eller

  <span id="clink">Side 1</span>
  <a href="side2.html">Side 2</a>
  <a href="side3.html">Side 3</a>

css:
#clink{color:#f00;background:#fff;}
- og så css til de andre links også


... Men som sagt - du skal pille i din html for at lave det ...
- Tror du fangede Olebole's indlæg forkert det han hentydede til
var at når man i forvejen skal til at sætte en id eller en class
kan man ligeså godt fjerne href og lave a'tagget om til et span samtidig.
Avatar billede mclemens Nybegynder
15. august 2006 - 18:48 #22
Mvh Clemme :o)
Avatar billede olebole Juniormester
16. august 2006 - 09:22 #23
hobbez >> hvis du vil have forklaret ordet 'overkill', siger du bare til  ;o)
Avatar billede hobbez Nybegynder
16. august 2006 - 18:26 #24
"Overkill: Any effort that seems to go farther than would be necessary to achieve its goal."

"Overkill is a slang term for the use of excessive force that seems to go farther than just achieving its goal. For example, trying to kill a bee with a gun would be overkill."

I mit tilfælde gør jeg INGENTING for at løse noget jeg ikke ser som et problem, så jeg forsøger slet ikke at nå det mål.

Hvis det er noget, så må det da være UNDERkill! :o)

Men jeg siger naturligvis tak for jeres forslag på en løsning på noget jeg slet ikke spurgte om hjælp til, og noget der oven i købet reelt ikke er noget problem - i stedet for jeres løsning på det jeg rent faktisk spurgte om.

Hvis jeg fremover kan hjælpe jer til forståelse af engelske fremmedord, så siger I bare til :o)

/Rob
Avatar billede mclemens Nybegynder
16. august 2006 - 19:06 #25
[ Men jeg siger naturligvis tak for jeres forslag på en løsning på noget jeg slet ikke spurgte om hjælp til ] Rolig hobbez, en ting ad gangen - svaret på dit spørgsmål er i 13/08-2006 13:00:52 ... Og svaret er delen hvor der står: "Nej, det kan du ikke.".


Eksperten.dk er en flok it-nørder, it-interreserede og folk med enkelte it-problemer der alle hjælper hinanden til at komme videre. I tråde der oprettes kan deltagerne sommetider tage emner op til gennemløb med forslag som muligvis udspringer fra emnet.


I dette spørgsmål giver du ikke i selve spørgsmålet indtryk af om du ved hvordan du bedst skal snuppe rettelsen inde på selve siden - og derfor kunne det måske være relevant at have dette sammen med spørgsmålet.


Nu ved du så hvordan man gør det i selve mark'up en (fortæller du at du ved i 14/08-2006 23:18:39)... men der kommer måske en anden der løber ind i samme problem -> Det er så fint nok hvis der sammen med problemet lægger selve løsningen på problemet (du ved godt hvordan du vil gribe problemstillingen an med rettelse af markup'en, men begynderen der læser med i din tråd - eller læser den senere ved det ikke).

^ ... Derfor kom der lidt mere køb på det end blot et kort nej ...
(man skal jo også arbejde lidt for pointene - selvom nej kunne have været nok) ...



Efter din kommentar om at du ved det i 14/08-2006 23:18:39... Kommer Olebole lige med en lille kommentar til mig om at det var overkill jeg lavede med at have et a'tag når man kunne nøjes med et span element. Dette er også af hensyn til tråden som helhed - eventuel for mig, or.han og dig ... hvis vi ikke vidste det ... men ligeså meget for dem der læser tråden senere.



- Så kommenterer jeg lidt op på Olebole's indlæg og du
hopper i 15/08-2006 18:31:41 tilbage til hovedspørgsmålet...

[ ...
Og så naturligvis undgå at skulle ændre i menukoden for hver enkelt side, men bruge samme HTML-kode (med CSS) på alle sider.

Så det vil da være fint med en løsning hvor linket til siden bliver inaktivt også.
... ]


Jeg uddyber så i 15/08-2006 18:47:42 af hensyn til både trådens forståelse og hvad Olebole foreslog og hvorfor det ville/kunne være bedre end det med linket og kommer samtidig med en forklaring på at du sikkert misforstod Olebole's indlæg.


I 16/08-2006 18:26:04 kommer du så med en forklaring på ordet Overkill som jo betyder at man i dette tilfælde foretager sig en ting som er unødvendig - og forsvarer samtidig med store bogstaver at [ I mit tilfælde gør jeg INGENTING for at løse noget jeg ikke ser som et problem, så jeg forsøger slet ikke at nå det mål. ] ... Men som sagt var Olebole's indlæg henvendt til mit eksempel med a elementet der burde / kunne have været et span element istedet... Han kunne selvfølgelig også have undladt ordet overkill, men han ville nok lige have mig til at indse at det andet som regel er smartere og mere anvendt (14/08-2006 17:24:03) - ordet overkill tager jeg ikke så hårdt, jeg ved godt den er lidt overkill med a tagget istedet for span tagget (som nævnt i 15/08-2006 18:47:42) ... men Olebole mener det jo ikke slår mig ikke - han giver mig bare en standard Olebole kommentar med et "lille" høfligt prik på skulderen og en lille løftet pegefinger :o) .






[ Men jeg siger naturligvis tak for jeres forslag på en løsning på noget jeg slet ikke spurgte om hjælp til, og noget der oven i købet reelt ikke er noget problem - i stedet for jeres løsning på det jeg rent faktisk spurgte om. ] Du fik svaret på den løsning du spurgte om, nemlig nej:

[ Kan man CSS'e sig ud af det her, eller skal det programmeres fra bunden? ]
13/08-2006 13:00:52 Nej, det kan du ikke.


- At vi hygge debatterer eventuelle andre ret så relevante ting i tråden bagefter er selvfølgelig en anden sag (selve koden der skal rettes på siden er relevant for andre der læser tråden), sådan er en del af os desværre bare - det er dog positivt i de flestes øjne ...


... Tag nu et eksempel at man læser en tutorial eller en bog om javascript, php, asp eller andet til lettere øvede - i denne bog / tutorial stod så kun selve kildekoden ... Man kontakter forfatteren og spørger: "Hvorfor er der ingen forklarende tekst i denne bog?" -> "Fordi der på bogen står til lettere øvede programmører, og vi ved jo ikke hvor meget øvet programmøren er så derfor må vi forudsætte at personen der læser bogen kan finde ud af tingene i forvejen." - Morale vi ved ikke, at du i forvejen ved hvordan du retter det før i 14/08-2006 23:18:39. Og derfor kommer vi lidt i dybden ligesom bøger og tutorials nogle gange gør for at forklare det så ikke erfarne kan følge med... Spørgsmålet lægger op til at du ikke ved alt om css og udfra selve spørgsmålet at vide om du ved hvordan du retter det fra bunden...


[ Hvis jeg fremover kan hjælpe jer til forståelse af engelske fremmedord, så siger I bare til :o) ] Ved ikke hvem "jer" er, men jeg fik for det meste 11 i engelsk så der er ikke så meget tvivl om engelsk hos mig. Og Olebole's kommentar var nok en hentydning til at du som sagt måske havde misfortået Olebole's kommentar om at mit indlæg var overkill - og at du derfor måske ikke kendte betydningen af overkill fordi du hopper op af stolen for at vende tilbage til problemet.... og det gør du egentlig stadigvæk i det sidste indlæg [ i stedet for jeres løsning på det jeg rent faktisk spurgte om. ] ... men der er som sagt et alternativ til markup rettelsen, og det har jeg lagt i 13/08-2006 13:04:35...


// Puha, fik ondt i hånden, tror jeg hopper videre...
Avatar billede mclemens Nybegynder
16. august 2006 - 19:06 #26
Hmm, blev lidt langt, men jeg fik vist det hele med.
Avatar billede mclemens Nybegynder
16. august 2006 - 19:12 #27
[ men jeg fik for det meste 11 i engelsk ] Manglede lidt, 11 virkede som pral i sætningen - jeg trækker lige lidt i modsatte reb af moralske årsager. Dansk lå så på et 8 tal som regel. Jeg er 100% viking, så det er ikke fordi, at jeg blander sprog sammen, men engelsk virker bare lidt mere spændende til tider...

... Men når jeg ser på min elendige dansk karakter, er det selvfølgelig
også muligt, at jeg ikke aflæser Olebole's bits på skærmen korrekt ?
Avatar billede olebole Juniormester
17. august 2006 - 11:08 #28
Hvad OleBole mente:
    Et menu-link til den side, hvor man står, er overflødigt => 'overkill'.

- så enkelt er det såmænd  =)
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 »