M MagnusJ Medlem sedan apr. 2004 150 inlägg Frågan 14 nov. 2004 00:18 #1 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;
}
dectgap Medlem sedan sep. 2002 1 655 inlägg Till att börja med: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 .
Hur hade du tänkt att det skulle fungera?
M MagnusJ Medlem sedan apr. 2004 150 inlägg Okej.
Jag hade tänkt att det skulle vara som på http://www.alistapart.com/
I icaaq Medlem sedan okt. 2000 5 273 inlägg Är det den menyn med upfront, articles, osv, osv
[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
M MagnusJ Medlem sedan apr. 2004 150 inlägg Aha, okej. Men hur ska man göra så att id-tagen på body ändras när man byter sida?
I icaaq Medlem sedan okt. 2000 5 273 inlägg
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
M MagnusJ Medlem sedan apr. 2004 150 inlägg 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";
}
I icaaq Medlem sedan okt. 2000 5 273 inlägg 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
M MagnusJ Medlem sedan apr. 2004 150 inlägg 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.
I icaaq Medlem sedan okt. 2000 5 273 inlägg Jag förstår tyvärr inte vad du menar :OO
Har du en länk på hur din fungerar?
mv icaaq
K Karlsson Medlem sedan maj 2000 252 inlägg Menar du att hela bakgrunden bakom a ska vara klickbar?
martin Medlem sedan apr. 2000 313 inlägg 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}
M MagnusJ Medlem sedan apr. 2004 150 inlägg 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.
I icaaq Medlem sedan okt. 2000 5 273 inlägg 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
M MagnusJ Medlem sedan apr. 2004 150 inlägg 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.
martin Medlem sedan apr. 2000 313 inlägg ...eller så gör du som jag skrev, så borde det funka.
/*göm för iemac \*/
* html #meny ul li a {
height:1%;
}
/*sluta gömma*/
/ m a r t i n
M MagnusJ Medlem sedan apr. 2004 150 inlägg Oj, jag såg inte ditt tidigare inlägg :/
Men det verkar inte vilja fungera ändå.
K Karlsson Medlem sedan maj 2000 252 inlägg 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
martin Medlem sedan apr. 2000 313 inlägg 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
M MagnusJ Medlem sedan apr. 2004 150 inlägg 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.
