19 svar · 430 visningar · startad av MagnusJ
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;
}
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.
http://www.w3.org/TR/CSS21/selector.html#x35
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?
Ä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
Aha, okej. Men hur ska man göra så att id-tagen på body ändras när man byter sida?
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
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";
}
Jag hade nog gjort följande
[red]
<body runat="server" id="bodytag">
[/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
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.
Menar du att hela bakgrunden bakom a ska vara klickbar?
Isf prova sätta a: {display: block;}
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}
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.
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
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.
...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
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
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
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.