---
title: "specifik/fast kulör som bakgrundsfärg i meny-lista"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/189211-specifik-fast-kulör-som-bakgrundsfärg-i-meny-lista"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Anna Maria"
published: "2012-02-28T11:45:45.000Z"
updated: "2012-02-28T13:16:36.000Z"
replies: 5
views: 427
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/189211-specifik-fast-kulör-som-bakgrundsfärg-i-meny-lista"
---

# specifik/fast kulör som bakgrundsfärg i meny-lista

## #1 — Anna Maria, 2012-02-28T11:45Z

Hej!

Alldeles ny på forumet, alldeles ny vad det gäller HTML och CSS!

Försöker lösa en uppgift och kanske kan jag få hjälp här!??

Jag har en menyrad med vissa egenskaper (active, link, visited och hover) "Knapparna" har definierade bakgrundsfärger i CSS, men i just det här fallet ska det på en sida (HTML) ha en specifik fast kulör som bakgrundsfärg till en av "knapparna" och jag lyckas inte lösa detta.

Har försökt ange en selektor + egenskap i CSS, och sedan hänvisa till denna i li-elemnetet (för den aktuella "knappen") men det låter sig inte göras utan att meny-egenskaperna försvinner, eller att färgen inte dyker upp alls.

Vad ska man skriva i CSS (bakgrundsfärgen), och hur ska man särskilja (id?) just den aktuella li-raden i HTML men ändå bibehålla meny-egenskaperna?

Ja, det är min fråga.
Jag förstår om ni inte förstår helt och fullt utifrån det jag har skrivit här, men jag kastar bollen får vi se vad som händer ...

Mycket tacksam för råd!

Anna Maria

Permalänk: https://www.webforum.nu/p/189211

## #2 — voigtann1, 2012-02-28T11:59Z

Hej Anna Maria,

Välkommen till wF!

skulle du kunna posta det du har gjort (HTML+CSS)?

Permalänk: https://www.webforum.nu/p/2296341

## #3 — Danne V, 2012-02-28T12:07Z

Ge just den länken ett eget id. Alltså typ \<p id="minsida"\>\<a href="min-sida.html"\>Min sida\</a\>\</p\>

I just det dokumentet, mellan \<head\> och \</head\> lägger du till stilarna du vill för den länken: Ungefär så här:

```
</script>
<style type="text/css">
<!--
#minsida a {
background:#333
}
#minsida a:hover {
background:#666
}
-->
</style>
```

Permalänk: https://www.webforum.nu/p/2296342

## #4 — Anna Maria, 2012-02-28T13:13Z

Okej, det gäller en uppgift på en kurs jag går, därför det lite märkliga "upplägget".  Just det här är alltså inget som ska användas, detär mer en prövning hur man använder "id", tror jag, och jag lyckas alltså inte.

I CSS:

\#meny{ position: absolute; margin-left: 300px; margin-top: 131px; padding-left: 0; font: 70% Verdana, Helvetica, sans-serif; color: #blue;}
\#meny li{display: inline; list-style-type: none;}
\#meny a{padding: 0.25em 1em; text-decoration: none;}
\#meny a:link{color: blue; background-color: #AFAAA3;}
\#meny a:visited{color: blue; background-color: #60605B;}
\#meny a:hover{color: blue; background-color: #60605B;}
\#meny a:active{color: blue; background-color: white;}

\#rubrik2 {background-color: white}

I HTML:

\<div id="header"\>
\<div id="rubrik"\>Firmanamn\</div\>
\<div id="logo"\>\<img src="logo.gif"\>\</div\>
\<ul id="meny"\>
\<li\>\<a href="#"\>Rubrik 1\</a\>\</li\>
\<li id="rubrik2"\>\<a href="#"\>Rubrik 2\</a\>\</li\>
\<li\>\<a href="#"\>Rubrik 3\</a\>\</li\>
\<li\>\<a href="#"\>Rubrik 4\</a\>\</li\>
\</ul\>
\</div\>

Kommentar: 
Som ni ser leder inte länkarna någonstans, om de gjorde det skulle det fungera (verkar det som). Men nu ska det bara SE UT som om jag är på en aktiv sida. Jag har alltså försökt ge den "aktiva sidan" under Rubrik2 ett id med vit bakgrund men anger tydligen detta fel i alla mina försök.
Det ni ser här är bara en av alla varianter jag prövat.

Aktuella rader är alltså:
den sista i CSS: #rubrik2
sjätte raden uppifrån i HTML, där jag försöker hämta info från CSS

Har också testat att ange bakgrundsfärgen direkt i taggen och i HTML-dokumentet.

Antigen så ändrar det inte färg alls utan har kvar bakgrundsfärgen som anges i CSS, eller också förstörs formatet i Menyraden. "Knappen"/Rutan försvinner och jag får bara en "vanlig text" med vit bakgrund.

Hmmmm ... blev detta begripligt?

Permalänk: https://www.webforum.nu/p/2296349

## #5 — Anna Maria, 2012-02-28T13:14Z

Hur gör ni för att klistra in koder sådär fint som DanneV har gjort?

Permalänk: https://www.webforum.nu/p/2296350

## #6 — voigtann1, 2012-02-28T13:16Z

du vill inte färga lin, du vill färga a-elementet inne i li
och din :link är för högt i värde, strunta i att använda a:link {} använd bara a {}

använd 

```
 och avsluta blocket med [ /kod] (utan mellanslag) för att få lite snygga format på kod (och lättare att läsa)

Sen din:
[kod]#meny a:visited{ background-color: #60605B;}
```

 väger mer än **\#rubrik2 a** så om du en gång har besökt sidan så kommer den inte heller vara vit.

Läs: <http://www.w3.org/TR/CSS2/cascade.html#specificity> för att förstå vilken vikt dina CSS selectors har för vikt.

Permalänk: https://www.webforum.nu/p/2296351

---

Tråden på webben: https://www.webforum.nu/amne/html-css/189211-specifik-fast-kulör-som-bakgrundsfärg-i-meny-lista