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

5 svar · 415 visningar · startad av Anna Maria 28 feb. 2012

Anna MariaMedlem sedan feb. 20123 inlägg

Frågan28 feb. 2012 11:45#1

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

voigtann1Medlem sedan juni 20019 519 inlägg

28 feb. 2012 11:59#2

Hej Anna Maria,

Välkommen till wF!

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

Danne VMedlem sedan aug. 20068 090 inlägg

28 feb. 2012 12:07#3

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>

Anna MariaMedlem sedan feb. 20123 inlägg

28 feb. 2012 13:13#4

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?

Anna MariaMedlem sedan feb. 20123 inlägg

28 feb. 2012 13:14#5

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

voigtann1Medlem sedan juni 20019 519 inlägg

28 feb. 2012 13:16#6

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.