Stebo
11-08-2011, 02:25 PM
Hi, I'm really new into CCS and HTML. My problem is that I don't know how and where to giv the desired links a CSS class of ".selected". There is no problem when I hover the menu but it wont keep the last state that shows what link is active for the moment. It would be most kind if anyone could help me understand this. Best regards //Stefan
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Meny</title>
<link href="meny.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background-color: #F0F0E3;
}
</style>
</head>
<div class="arrowgreen">
<ul>
<li><a href="main.html" target="two" title="main">Startsidan</a></li>
<li><a href="fastigheterna.html" target="two" title="Fastigheterna">Fastigheterna</a></li>
<li><a href="forebygg_skador.html" target="two" title="forebygg_skador">Förebygg skador</a></li>
<li><a href="garage_parkering.html" target="two" title="garage_parkering">Garage, parkering</a></li>
<li><a href="medlemsinformation.html" target="two" title="medlemsinformation">Medlemsinformation</a></li>
<li><a href="ordningsregler.html" target="two" title="ordningsregler">Ordningsregler</a></li>
<li><a href="sopsortering.html" target="two" title="sopsortering">Sopsortering</a></li>
<li><a href="gemensamma_lokaler.html" target="two" title="gemensamma_lokaler">Gemensamma lokaler</a></li>
<li><a href="dokument_anvisningar.html" target="two" title="dokument_anvisningar">Dokument, anvisningar</a></li>
<li><a href="styrelsen.html" target="two" title="styrelsen">Styrelsen</a></li>
<li><a href="lankar.html" target="two" title="lankar">Länkar</a></li>
<li><a href="kontakt.html" target="two" title="kontakt">Kontakt</a></li>
</ul>
</div>
<body>
</body>
</html>
css:
@charset "utf-8";
/* CSS Document */
<style type="text/css">
.arrowgreen{
width: 180px; /*width of menu*/
border-style: solid solid none solid;
border-color: #94AA74;
border-size: 1px;
border-width: 1px;
}
.arrowgreen ul{
list-style-type: none;
margin: 0;
padding: 0;
}
.arrowgreen li a{
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
display: block;
background: transparent url(bilder/meny_arrow/arrowgreen.gif) 100% 0;
height: 24px; /*Set to height of bg image- padding within link (ie: 32px - 4px - 4px)*/
padding: 4px 0 4px 5px;
line-height: 24px; /*Set line-height of bg image- padding within link (ie: 32px - 4px - 4px)*/
text-decoration: none;
}
.arrowgreen li a:link, .arrowgreen li a:visited {
color: #5E7830;
}
.arrowgreen li a:hover{
color: #26370A;
background-position: 100% -32px;
}
.arrowgreen li a.selected{
color: #26370A;
background-position: 100% -64px;
}
</style>
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Meny</title>
<link href="meny.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background-color: #F0F0E3;
}
</style>
</head>
<div class="arrowgreen">
<ul>
<li><a href="main.html" target="two" title="main">Startsidan</a></li>
<li><a href="fastigheterna.html" target="two" title="Fastigheterna">Fastigheterna</a></li>
<li><a href="forebygg_skador.html" target="two" title="forebygg_skador">Förebygg skador</a></li>
<li><a href="garage_parkering.html" target="two" title="garage_parkering">Garage, parkering</a></li>
<li><a href="medlemsinformation.html" target="two" title="medlemsinformation">Medlemsinformation</a></li>
<li><a href="ordningsregler.html" target="two" title="ordningsregler">Ordningsregler</a></li>
<li><a href="sopsortering.html" target="two" title="sopsortering">Sopsortering</a></li>
<li><a href="gemensamma_lokaler.html" target="two" title="gemensamma_lokaler">Gemensamma lokaler</a></li>
<li><a href="dokument_anvisningar.html" target="two" title="dokument_anvisningar">Dokument, anvisningar</a></li>
<li><a href="styrelsen.html" target="two" title="styrelsen">Styrelsen</a></li>
<li><a href="lankar.html" target="two" title="lankar">Länkar</a></li>
<li><a href="kontakt.html" target="two" title="kontakt">Kontakt</a></li>
</ul>
</div>
<body>
</body>
</html>
css:
@charset "utf-8";
/* CSS Document */
<style type="text/css">
.arrowgreen{
width: 180px; /*width of menu*/
border-style: solid solid none solid;
border-color: #94AA74;
border-size: 1px;
border-width: 1px;
}
.arrowgreen ul{
list-style-type: none;
margin: 0;
padding: 0;
}
.arrowgreen li a{
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
display: block;
background: transparent url(bilder/meny_arrow/arrowgreen.gif) 100% 0;
height: 24px; /*Set to height of bg image- padding within link (ie: 32px - 4px - 4px)*/
padding: 4px 0 4px 5px;
line-height: 24px; /*Set line-height of bg image- padding within link (ie: 32px - 4px - 4px)*/
text-decoration: none;
}
.arrowgreen li a:link, .arrowgreen li a:visited {
color: #5E7830;
}
.arrowgreen li a:hover{
color: #26370A;
background-position: 100% -32px;
}
.arrowgreen li a.selected{
color: #26370A;
background-position: 100% -64px;
}
</style>