Gå til innhold

Problemer med active tab [CSS]

PuterDude

Av PuterDude
i Programmering og webutvikling

Anbefalte innlegg

PuterDude

PuterDude

Skrevet
Skrevet

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

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
masb

masb

Skrevet
Skrevet (endret)

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 av masb
Lenke til kommentar
PuterDude

PuterDude

Skrevet
  • Forfatter
Skrevet (endret)

Hei!

 

Dette er bildet på knappene:

tabbg.png

 

Her er bakgrunnsbildet på headeren:

headerbg.png

 

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 av PuterDude
Lenke til kommentar
  • 3 uker senere...
Gjest Slettet-IHWlGMJn

Gjest Slettet-IHWlGMJn

Skrevet
Skrevet (endret)

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 av Slettet-IHWlGMJn
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...