Archief - a:active

b

blackredthunder

Legacy Member

• 17 jun 2009

• #1

Goeiedag

Ik wil als je op een bepaalde pagina zit, dat wordt weergegeven in het menu met een achtergrondkleurtje.
Normaal doe je dit toch met a:active ?
Bij mij werkt het enkel als ik er op klik, bij het loslaten verdwijnt het terug.

Wat is hier fout?

#menu{
position: relative;
width: 160px;
min-height: 400px;
padding-top: 10px;
}

#menu a{
text-decoration: none;
color: #FFF;
}

#menu a:active{
background: url(images/h1.png);
display: block;
}

a

adrianhates

Legacy Member

• 17 jun 2009

• #2

active is de staat als je er op klikt

om zo iets te bereiken moet je een klasse maken
#menu a.active{
background: url(images/h1.png);
display: block;
}

b

blackredthunder

Legacy Member

• 17 jun 2009

• #3

Werkt nog steeds niet hoor

#menu{
position: relative;
width: 160px;
min-height: 400px;
padding-top: 10px;
}

#menu a{
text-decoration: none;
color: #FFF;
}

#menu a.active{
background: url(images/h1.png);
display: block;
}

G

GregoryCo

Legacy Member

• 17 jun 2009

• #4

blackredthunder zei:

Werkt nog steeds niet hoor

#menu{
position: relative;
width: 160px;
min-height: 400px;
padding-top: 10px;
}

#menu a{
text-decoration: none;
color: #FFF;
}

#menu a.active{
background: url(images/h1.png);
display: block;
}

Klik om te vergroten...

Doe gewoon eens #menu .active

Code:

#menu{
	position: relative;
	width: 160px;
	min-height: 400px;
	padding-top: 10px;
}

#menu a{
	text-decoration: none;
	color: #FFF;
}

#menu .active{
	background: url(images/h1.png);
	display: block;
}

b

blackredthunder

Legacy Member

• 17 jun 2009

• #5

nog steeds niet...

S

Streetrunner

Legacy Member

• 17 jun 2009

• #6

je moet die 'a' een width en een height meegeven zodat je background weergegeven kan worden

b

blackredthunder

Legacy Member

• 17 jun 2009

• #7

Streetrunner zei:

je moet die 'a' een width en een height meegeven zodat je background weergegeven kan worden

Klik om te vergroten...

nope, werkt nog niet

#menu{
position: relative;
width: 160px;
min-height: 400px;
padding-top: 10px;
}

#menu a{
text-decoration: none;
color: #FFF;
}

#menu a.active{
background: #30C;
display: block;
width: 150px;
height: 20px;
}

ook door #menu active te ge bruiken werkt het nog niet.

S

Streetrunner

Legacy Member

• 17 jun 2009

• #8

Maar WAT werkt er precies niet ?
Is de opmaak gewoon hetzelfde als de andere links ?

Gebruik eens background-image of background-color in plaats van gewoon background.

Door die class te gebruiken zeg jij: link met de class active moet volgende eigenschappen krijgen en moet er dus zo uitzien ...
Is het dat wat je zoekt ?

b

blackredthunder

Legacy Member

• 17 jun 2009

• #9

Streetrunner zei:

Maar WAT werkt er precies niet ?

Klik om te vergroten...

Wat ik wil is dat wanneer je op een link klikt in je menu, dat die link een achtergrond(kleur) krijgt, zodat de bezoeker weet op welke pagina hij zit op dat moment.
Dit in mijn html:

HTML:

<div id="menu">
      	<p><a href="home.htm" class="active">Home</a></p>
              	<br />
        <p><a href="history.htm" class="active">History</a></p>

dit in mijn css:
#menu{
position: relative;
width: 160px;
min-height: 400px;
padding-top: 10px;
font-size: 16px;
}

#menu a{
text-decoration: none;
color: #FFF;
}

#menu a.active{
}

#menu a.active:active{
background: url(images/h1.png);
display: block;
}

G

GregoryCo

Legacy Member

• 17 jun 2009

• #10

Je moet eerst uw links in ul en li's zetten e, niet vergeten!
En dan in CSS evt. die bullets enzo wegdoen

j

j design

Legacy Member

• 17 jun 2009

• #11

Voor de duidelijkheid.
Ge moet da zelf per pagina de juiste item de class active meegeven.
Dat heeft niets te maken met a:active

dus zit ge op home dan is het

<ul>
<li><a href class="active">home</a></li>
<li><a href >tralala</a></li>
</ul>

Klik om te vergroten...

a

adrianhates

Legacy Member

• 17 jun 2009

• #12

voila , my point exactly..
kdacht dat ge dat wel uit die css kon opmaken