/    Sign up×
Community /Pin to ProfileBookmark

CSS nav bar problem

Copy linkTweet thisAlerts:
Dec 07.2006

Hi there,

Been redesigning my site to use simple CSS nav bar instead of clunky Firefox generated rollovers.

I’m almost there – all I need is a way to change the colour of the current section to white (like a “down” state).

Here is the page:

[url]http://www.johnclarephoto.co.uk/Press/test%20page.html[/url]

And here is the CSS:

[url]http://www.johnclarephoto.co.uk/John%20Clare.css[/url]

I basically want to change the colour of the list item with id=”active”.

#navcontainer #active { color: #FFFFFF; }

doesn’t seem to work!

What am I doing wrong?

Thanks,

John Clare

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@ray326Dec 07.2006 — li#active a { color: #fff }
Copy linkTweet thisAlerts:
@jhclareauthorDec 07.2006 — Thanks for your quick reply - I tried your suggestion but it has no effect.

How hard can it be?! It must be something obvious....

Any other help much appreciated!


Regards,

John
Copy linkTweet thisAlerts:
@_Aerospace_Eng_Dec 08.2006 — Ray's solution should work unless you some how messed it up which seems like you might have. Apply the solution given to you on your current url and then post back.
Copy linkTweet thisAlerts:
@CentauriDec 08.2006 — Apply the color to the a element - as you already have an unstyled id of "current" on the a element, try

#current { color: #fff; }

and get rid of the "active" id all together.

Cheers

Graeme

PS: MUCH cleaner code than the previous sliced image/table layout
Copy linkTweet thisAlerts:
@rpcarnellDec 08.2006 — Try this variation. Maybe this is what you need:

#navcontainer ul

{

padding: .2em 0;

margin: 0;

list-style-type: none;

background-color: #000;

color:#666666;

width: 760px;

font: normal 90% arial, helvetica, sans-serif;

text-align: center;

}

#navcontainer ul li {

display: inline;

padding: 30px;

}

#navcontainer ul li a

{

text-decoration: none;

background-color:#0;

color:#666666;

padding: .2em 1em;

}

#navcontainer ul li a:hover

{

color: #fff;

}



http://www.carbotek.org
Copy linkTweet thisAlerts:
@jhclareauthorDec 08.2006 — Thanks so much to everyone for their responses.

I tried Centauri's solution first - and it works!

www.johnclarephoto.co.uk to see it in action.

I'm just getting into CSS and love the fact that I can now alter my site appearance in one file! Nifty.

So - the general consensus round here seems to be that Dreamweaver/Fireworks generates awful code? Are Javascript roll-over nav bars now dated?

Regards,

John
Copy linkTweet thisAlerts:
@ray326Dec 08.2006 — So - the general consensus round here seems to be that Dreamweaver/Fireworks generates awful code? Are Javascript roll-over nav bars now dated? [/QUOTE]Yes and yes although Dreamweaver can be fixed according to Zeldman and crew.
×

Success!

Help @jhclare spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...