11 replies [Last post]
SlickEddy
Offline
newbie
Last seen: 15 years 19 weeks ago
Joined: 2006-05-19
Posts: 4
Points: 0

Hi

i'm making a vertical menu in css. I'm following the tutorial on http://css.maxdesign.com.au/listamatic2/vertical02.htm and adjusted it.

I want to give the active links in my navigation and in my subnavigation the same look as my a:hover styles. But it doesn't seem to work. There are also more 'id' 's in the html then there are in the css and i think i've lost track somewhere. I've been checking out this forum and there are some related questions but i can not really find what i need to know.

You can see what i did on http://www.bnr.be/new/nl/testmenu.html

Can someone help me with this?

thx

larmyia
Offline
Elder
London
Last seen: 13 years 2 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

Active link doesn't seem to work

Hi I'm not 100% of what you're trying to achieve...making your current links look the same as your hover links? if so, you need to look at the order of your links and read up a bit on that.

try this code

#navcontainer a {
	margin: 1px 0 1px 0;
	display: block;
	padding: 4px 0;
	width: 253px;
	color: #2C5958;
	background-color: #fff;
	text-indent: 10px;
	text-decoration: none;
}
#navcontainer a:hover, #navcontainer li#active a#current {
	color: #2C5958;
	background-color: #c1dddc;
	text-decoration: none;
}

#navcontainer ul ul a{
	display: block;
	padding: 2px 0px;
	width: 253px;
	color: #2C5958;
	background-color: #e6f1f1;
	text-indent: 30px;
	text-decoration: none;
}

as a wise man once wrote:

Lord
Vader
Formely
Hatefull
Anakin

larmyia

briski
briski's picture
Offline
Elder
London
Last seen: 9 years 15 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Active link doesn't seem to work

I would ask you one question - what do you mean by active links?

Do you mean if you click a link when the page loads that link then looks like it's being hovered over? If so that's not what the active pseudo class is.

a:active is applies whilst the link is in the process of being clicked/used only, it's often missed.

If you want them to look like that once the page loads you'll have to apply a class or something to the current link then style it seperately.

larmyia
Offline
Elder
London
Last seen: 13 years 2 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

Active link doesn't seem to work

briski wrote:
I would ask you one question - what do you mean by active links?

Do you mean if you click a link when the page loads that link then looks like it's being hovered over? If so that's not what the active pseudo class is.

that's what I assumed the OP meant...but I could be wrong...

SlickEddy
Offline
newbie
Last seen: 15 years 19 weeks ago
Joined: 2006-05-19
Posts: 4
Points: 0

Active link doesn't seem to work

I just mean that for example when i'm on the page 'home', that button must have an other color then the other buttons.

Sorry that i was not so clear, it's early in the morning and i think i need some coffee.

Slick

larmyia
Offline
Elder
London
Last seen: 13 years 2 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

Active link doesn't seem to work

then you are refering to the Current page. you need to give that link an id of current and style that accordingly.

SlickEddy
Offline
newbie
Last seen: 15 years 19 weeks ago
Joined: 2006-05-19
Posts: 4
Points: 0

Active link doesn't seem to work

OK i've changed my html and css on http://www.bnr.be/new/nl/testmenu.html

Here is what i did

For 'item one':

- i've given the <li> the "current" id:
<li id="current"><a href="#">Item one</a>

- and i've given the <li> tag from subitem three the "subcurrent" id:
<li id="subcurrent"><a href="#">Subitem three</a></li>

Both buttons now have the look&feel i want. Smile
But the other subitems of 'item one' take over the look&feel of the "current" style i've assigned to 'item one' Sad

To solve this i made a style "subnavlist":
<ul id="subnavlist">
<li><a href="#">Subitem one</a></li>
<li><a href="#">Subitem two</a></li>
<li id="subcurrent"><a href="#">Subitem three</a></li>
<li><a href="#">Subitem four</a></li>
</ul>

But only the font-weight changes and not the backgroundcolor.javascript:emoticon(':x')

Does this mean that i have to give every subnavigation a seperate id (for example "subnotcurrent") or is there an easier way.

larmyia
Offline
Elder
London
Last seen: 13 years 2 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

Active link doesn't seem to work

it's your code

try this:

li#current a 
 {
	color: #2C5958;
	background-color: #c1dddc;
	text-decoration: none;
}

as opposed to:

#current a:link, #current a:visited,
#current a:hover, #current a:active {
	color: #2C5958;
	background-color: #c1dddc;
	text-decoration: none;
}

basically your code is doing what you're telling it to do!!! and remember because you've put this code after your hover, link etc, it will override it!!

SlickEddy
Offline
newbie
Last seen: 15 years 19 weeks ago
Joined: 2006-05-19
Posts: 4
Points: 0

Active link doesn't seem to work

Jiehaaaaaaaaaaaaaa !!!!!
It works, great, super, fantastic !!!!!
This is my first css site and it can be a pain in the ass but i love it.

thx

larmyia
Offline
Elder
London
Last seen: 13 years 2 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

Active link doesn't seem to work

SlickEddy wrote:

This is my first css site and it can be a pain in the ass but i love it.

thx

Laughing out loud tell me about it. dealing with my own css woes currently!

but css is addictive...

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 2 years 51 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Active link doesn't seem to work

SlickEddy;
You might consider using the body tag to do this styling for you. The way you are doing it now will require you to have a unique menu structure for each page... which gets to be a lot of work.

An example might look like this (you will have to modify to suit your menu structure)... it's a little overly complex because I'm using two sets of images plus text for the main menu and have to style both the li and the a tags
CSS

/* Set current page menu highlight */
body#home #menu2 li.list1t, body#home a#item1t {declarations here}

/* sub menu current page highlight */
body.studio #submenu a.studio {declarations here}

HTML for main menu
<li class="list1t"><a id="item1t" href="4.html" title="home">home</a></li>

HTML for submenu
<li><a href="4a_sub.html" class="studio">Studio</a></li>

The on the page in the body tag use this
<body id="home" class="studio">

This way you can use the same menu throughout the site... all that needs to change is the body tag for each page

Just something for you to consider... [/code]

larmyia
Offline
Elder
London
Last seen: 13 years 2 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

Active link doesn't seem to work

rmfred wrote:
SlickEddy;
You might consider using the body tag to do this styling for you. The way you are doing it now will require you to have a unique menu structure for each page... which gets to be a lot of work.

good point. that's the way I do mine.