|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
|
|
#1
March 18th, 2004, 07:56 AM
|
|||
|
|||
|
CSS, Navigation and highlighting a heading
H all,
I have a horizontal navigation bar which basically looks like this: Thing0 | Thing1 | Thing2 | Thing34 What I want to do is when I select a link to a new page, I'd like (using CSS) to have that link highlighted so that the user can see which page he is on. It's either that or hardcoding the name to each page...but since it's already in the Nav bar, I thought highlighting the link on the nav bar serves as a heading as well... Possible?
|
|
#2
March 18th, 2004, 08:18 AM
|
||||
|
||||
|
Definitely possible, but a pain in the arse, and probably won't be cross browser compatible...
Much easier done serverside...
__________________
Support requests via PM will be ignored!
|
|
#3
March 18th, 2004, 08:34 AM
|
||||
|
||||
|
Won't it just be so much easier to just add a .selected class to your style sheet, and hardcode class="selected" in the div of whichever page is loaded?
|
|
#4
March 18th, 2004, 08:43 AM
|
|||
|
|||
|
Sorry, don't follow...it's going to be a small 'un of a website, so I don't really wanna add php scripting to it...can you elaborate a little on your idea?
I thought about naming all the pages what they're called and then using javascript to print out the page name...but then it's keeping more things in sync...a hassle really.
|
|
#5
March 18th, 2004, 08:49 AM
|
||||
|
||||
|
Well, if you have pages like contact, home, news..., the links in your header are gonna be for contact, home, news...
So, in the home page your nav bar would look like... Code:
<span class="somelink">News</span> <span class="selected">Home</span> <span class="somelink">Contact</span> Then, you have css class for "somelink" and selected, and on each page, you just put the class="selected" in the right place... See what I mean?
|
|
#7
March 18th, 2004, 01:59 PM
|
||||
|
||||
|
Here's a little variation on ChiefWigs1982's method.
Since I usually put nav bars in an include file for re-use purposes, the Chief's method wouldn't work for me. What I do is give each link an id. For convenience, I tend to use the page name. Thus; Code:
<ul> <li id="home"><a … >Home</a></li> <li id="news"><a … >News</a></li> <li id="aboutus"><a … >About Us</a></li> </ul> Then on each page add an appropriate style rule Code:
<style type=text/css">
#home { /* or whatever page you're on */
/* assuming you have black on white, for instance */
color: #fff;
background-color: #000;
</style>
gary
__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing. My html and css workshop, demos and tutorials. Ask a better question, get a better answer.
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > CSS, Navigation and highlighting a heading |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
