--- title: "fel med a:active" type: "forum-thread" url: "https://www.webforum.nu/amne/html-css/115793-fel-med-a-active" topic: "HTML & CSS" topic_url: "https://www.webforum.nu/amne/html-css" author: "MagnusJ" published: "2004-11-14T00:18:38.000Z" updated: "2004-11-14T18:13:15.000Z" replies: 19 views: 441 page: 1 pages: 1 language: "sv-SE" site: "webForum — webforum.nu" rights: "Upphovsrätten till varje inlägg tillhör dess författare." attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/115793-fel-med-a-active" --- # fel med a:active ## #1 — MagnusJ, 2004-11-14T00:18Z Hur kan man göra för att få bakgrunden till en annan färg när länken är active. Jag har gjort så här nu och det verkar inte vilja fungera, nån som har nån idé? ``` #meny ul li a { padding: 3px 0; display: block; background: #ebebeb; width: 100px; color: #000; font-size: 10px; letter-spacing: 1px; text-align: center; text-decoration: none; } #meny a:hover { background: #9da584; } #meny a:active { background: #9da584; } ``` Permalänk: https://www.webforum.nu/p/115793 ## #2 — dectgap, 2004-11-14T01:47Z Till att börja med: En länk räknas vara i tillståndet *active* när man har klickat på den. I Mozilla slutar länken vara active när man släpper musknappen, medan den i IE slutar vara active först när länken inte längre har fokus. W3C säger följande: > The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it. Eftersom du har angett samma bakgrundsfärg för *:hover* som *:active* kommer det i Mozilla aldrig att märkas att du har angett en bakgrundsfärg just för tillståndet *active*. I IE kommer en klickad länk ha bakgrundsfärgen #9da584 ända tills den förlorar fokus. Hur hade du tänkt att det skulle fungera? Permalänk: https://www.webforum.nu/p/1483745 ## #3 — MagnusJ, 2004-11-14T10:31Z Okej. Jag hade tänkt att det skulle vara som på Permalänk: https://www.webforum.nu/p/1483799 ## #4 — icaaq, 2004-11-14T11:21Z Är det den menyn med upfront, articles, osv, osv så har de löst det så att dem har en id-tag på bodyn och sedan i css:n ``` [red]body#sectionone #menu li#one a, body#sectiontwo #menu li#two a, body#sectionthree #menu li#three a, body#sectionfour #menu li#four a, body#sectionfive #menu li#five a { background: #c30; border: 1px solid #c30; color: #fff; font-weight: bold; } [/red] ``` mv icaaq Permalänk: https://www.webforum.nu/p/1483824 ## #5 — MagnusJ, 2004-11-14T11:34Z Aha, okej. Men hur ska man göra så att id-tagen på body ändras när man byter sida? Permalänk: https://www.webforum.nu/p/1483833 ## #6 — icaaq, 2004-11-14T11:40Z > **MagnusJ skrev:** > > Aha, okej. Men hur ska man göra så att id-tagen på body ändras när man byter sida? Har du en eller flera sidor du presenterar ditt innehåll på ? Har du en, använder du säkert något script-språk. Då borde du kunna ändra genom det. Har du flera sidor skriver du väl bara en annan Id-tag på de olika sidorna. Eller missuppfattade jag dig? mv icaaq Permalänk: https://www.webforum.nu/p/1483835 ## #7 — MagnusJ, 2004-11-14T12:22Z Du fattade mig korrekt. Jag använder C#. Vet du vad man kan ange att bodyid ska vara för slags typ? ``` if(Request.QueryString["p"] = "start") { bodyid = "start"; } else if(Request.QueryString["p"] = "artiklar") { bodyid = "artiklar"; } else { bodyid = "start"; } ``` Permalänk: https://www.webforum.nu/p/1483872 ## #8 — icaaq, 2004-11-14T12:51Z Jag hade nog gjort följande ``` [red] [/red] ``` ``` [red] protected System.Web.UI.HtmlControls.HtmlGenericControl bodytag; private void Page_Load(object sender, System.EventArgs e) { if(Request.QueryString["p"] != null) { bodytag.Attributes.Add("class", Convert.ToString(Request.QueryString["p"])); } else { bodytag.Attributes.Add("class", "start"); } // Put user code to initialize the page here }[/red] ``` Då får du ändra till .klassensnamn istället för #klassensnamn i css:n mv icaaq */red. bytte tagnamn till ett mer semantiskt namn* Permalänk: https://www.webforum.nu/p/1483895 ## #9 — MagnusJ, 2004-11-14T13:17Z Tack för hjälpen! Har en liten fråga till :) På alistapart i IE, om man markerar en liten del av knappen där det inte är text markeras ändå länken. Men för mig markeras knappen bara om man markerar texten. Funkar i mozilla om man bara markerar en liten del av knappen. Permalänk: https://www.webforum.nu/p/1483907 ## #10 — icaaq, 2004-11-14T13:21Z Jag förstår tyvärr inte vad du menar :OO Har du en länk på hur din fungerar? mv icaaq Permalänk: https://www.webforum.nu/p/1483913 ## #11 — Karlsson, 2004-11-14T13:45Z Menar du att hela bakgrunden bakom a ska vara klickbar? Isf prova sätta a: {display: block;} Permalänk: https://www.webforum.nu/p/1483923 ## #12 — martin, 2004-11-14T14:33Z Testa att sätta något som gör att a-taggen hamnar i "hasLayout"-mode i ie6 t ex ``` /*göm för iemac \*/ * html a { zoom:1.0; } /*sluta gömma*/ ``` eller det klassiska: ``` /*göm för iemac \*/ * html a { height:1%; } /*sluta gömma*/ ``` eller nåt annat skoj. Självklart i samband med ``` a {display:block} ``` Permalänk: https://www.webforum.nu/p/1483944 ## #13 — MagnusJ, 2004-11-14T14:38Z Okej. ``` #meny ul li a { display: block; padding: 3px 0; width : 100px; background : #ebebeb; font-size : 10px; color : #000; letter-spacing : 1px; text-align : center; text-decoration : none; } ``` Så där ser det ut nu. Men det vill fortfarande inte fungera i IE. Permalänk: https://www.webforum.nu/p/1483946 ## #14 — icaaq, 2004-11-14T14:53Z Lägg till ett hover objekt i css:n kanske ;) ``` [red] #meny ul li a:hover { display: block; padding: 3px 0; width : 100px; /*en annan färg kanske du vill ha */ background : #808080; font-size : 10px; color : #000; letter-spacing : 1px; text-align : center; text-decoration : none; } [/red] ``` mv icaaq Permalänk: https://www.webforum.nu/p/1483952 ## #15 — MagnusJ, 2004-11-14T15:29Z Jag har redan ett hover objekt, men jag tänkte att det kanske inte spelade nån roll om jag visade det eller inte ;) Får inte till det att fungera, IE användarna får skylla sig själva och röra musen några mm längre ;) Nån som har nån idé får gärna skriva. Permalänk: https://www.webforum.nu/p/1483964 ## #16 — martin, 2004-11-14T15:45Z ...eller så gör du som jag skrev, så borde det funka. Lägg till det här (stjärnan och kommentarerna och allt i koden är viktigt): ``` /*göm för iemac \*/ * html #meny ul li a { height:1%; } /*sluta gömma*/ ``` / m a r t i n Permalänk: https://www.webforum.nu/p/1483970 ## #17 — MagnusJ, 2004-11-14T16:59Z Oj, jag såg inte ditt tidigare inlägg :/ Men det verkar inte vilja fungera ändå. Permalänk: https://www.webforum.nu/p/1484004 ## #18 — Karlsson, 2004-11-14T17:48Z Testa detta: ``` #meny ul li a { display: block; padding: 3px 0; width : 100%; background : #ebebeb; font-size : 10px; color : #000; letter-spacing : 1px; text-align : center; text-decoration : none; } html>body #meny li a { width: auto; } ``` Sätt width till 100% för att fylla diven helt Permalänk: https://www.webforum.nu/p/1484027 ## #19 — martin, 2004-11-14T18:13Z position:relative då? / m a r t i n - Jag har haft samma problem förr, och lyckades då. kommer inte riktigt ihåg hur bara :r Permalänk: https://www.webforum.nu/p/1484038 ## #20 — MagnusJ, 2004-11-14T18:13Z Det ville inte heller fungera. Nu blev det så att i IE blev "knapparna" 100% så alla blev 600px och blev på rad istället för bredvid varandra och i mozilla krymptes dom ihop. Permalänk: https://www.webforum.nu/p/1484039 --- Tråden på webben: https://www.webforum.nu/amne/html-css/115793-fel-med-a-active