Problemer med active tab [CSS]

PuterDude · 20. desember 2009

Hi!

Jeg sitter nå og greier ikke å fatte hva som er galt. Jeg har laget en navigasjonsmeny, hvor jeg vil at den skal endre farge til hvit når den er aktiv (når li har id'en #current). Under ser dere CSS og HTML-kode:

Sånn ser det hvertfall ut:

/* MENU */

#menu {
float: left;
line-height:normal;
}

#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}

#menu ul li {
float: left;
margin: -1px 4px;
height: 29px;
background: url("img/tabbg.png") repeat-x;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
}

#menu ul li a {
display: block;
padding: 5px 30px;
color: #247786;
text-decoration: none;
}

#menu ul li:hover, #current {
background: white;
}

/* END MENU */

<div id="menu">
			<ul>
				<li><a href="#">Hjem</a></li>
				<li id="current"><a href="#">Produkter</a></li>
				<li><a href="#">Spørsmål og svar</a></li>
				<li><a href="#">Kontakt oss</a></li>
			</ul>
		</div>

Men det som altså skjer er at knappen ikke blir hvit når li har id'en #current.

Jeg greier bare ikke forstå hvorfor det ikke fungerer.

Tusen takk for svar!

- PD

masb · 20. desember 2009

hvordan ser det bildet du bruker ut?


#menu ul li:hover, #menu ul li a.current {
   background: white;
}

div id="menu">
                <ul>
                    <li><a href="#">Hjem</a></li>
                    <li><a class="current" href="#">Produkter</a></li>
                    <li><a href="#">Spørsmål og svar</a></li>
                    <li><a href="#">Kontakt oss</a></li>
                </ul>
            </div>
</div>

her er bakgrunnen på den aktive siden hvit, mens de andre tabsa er svarte

Endret 20. desember 2009 av masb

PuterDude · 20. desember 2009

Hei!

Dette er bildet på knappene:

Her er bakgrunnsbildet på headeren:

her er hele CSS:

body{
font-family:"Trebuchet MS",Arial,sans-serif;
font-size: 13px;
margin: auto 0;
background-color:#7fc2d0;
}

#site {
display: block;
max-width: 963px;
margin: 0 auto;
}

/* GLOBAL */
/* HEADER */

#header {
width: 100%;
height: 150px;
display: block;
position: relative;
background-image: url("img/headerbg.png");
background-repeat: no-repeat;
}

#header #menuwrapper {
width: 100%;
position: absolute;
bottom: 0;
}

/* MENU */

#menu {
float: left;
line-height:normal;
}

#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}

#menu ul li {
float: left;
margin: -1px 4px;
height: 29px;
background: url("img/tabbg.png") repeat-x;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
}

#menu ul li a {
display: block;
padding: 5px 30px;
color: #247786;
text-decoration: none;
}

#menu ul li:hover, #current {
background: white;
}

/* END MENU */

#search {
float: right;
}

/* END HEADER */
/* CONTENT */

#content {
background-color: white;
border-style: solid;
border-width: 1px;
border-color: #42aec2;
padding: 5px 10px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
}

her er hele 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" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<title>Siden min</title>
</head>

<body>
<div id="site">
<!-- Header -->
<div id="header">
	<div id="menuwrapper">
		<div id="menu">
			<ul>
					<li><a href="#">Hjem</a></li>
					<li><a class="current" href="#">Produkter</a></li>
					<li><a href="#">Spørsmål og svar</a></li>
					<li><a href="#">Kontakt oss</a></li>
			</ul>
		</div>
		<div id="search">
			Her kommer søk...
		</div>
	</div>
</div>
<!-- Content -->
<div id="content">
	Her kommer innhold...
</div>	
</div>
</body>
</html>

Takk for svar!

- PD

EDIT: Jeg så nå at i HTML hadde jeg skrevet class="current", og dette endret jeg igår kveld både i HTML og CSS for å sjekke om det virket med class, noe det heller ikke gjorde. Merkelig hvorfor det gjør det nå

I allefall så endret jeg:

<li><a class="current" href="#">Produkter</a></li>
til: <li><a id="current" href="#">Produkter</a></li>

og

#menu ul li:hover, #current {
height: 29px;
background: white;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
}

Takk for hjelp!

- PD

Endret 20. desember 2009 av PuterDude

masb · 20. desember 2009

ved å sette class="current" på <a>-taggen i stdet for <li>-taggen er det som løser problemet ditt

7. januar 2010

Saken her er vel at selectoren "#menu ul li" veier tyngre enn selectoren "#current" og derfor overstyrer.

Vet ikke helt hvordan vektingen regnes ut, men i dette tilfellet er det ganske tydelig at den første overstyrer den andre(Da begge har en ID, men den første har flere elementer i tillegg).

Endret 7. januar 2010 av Slettet-IHWlGMJn

Logg inn

Problemer med active tab [CSS]

Anbefalte innlegg

PuterDude

Lenke til kommentar

Videoannonse

masb

Lenke til kommentar

PuterDude

Lenke til kommentar

masb

Lenke til kommentar

Gjest Slettet-IHWlGMJn

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer