boldfacing the page you are on (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

lilblackgirl -> boldfacing the page you are on (10/9/2006 12:02:07)

i know it can be done, but what would the CSS look like to automatically boldface the page you are on displaying in the navigation tree?



rdouglass -> RE: boldfacing the page you are on (10/9/2006 12:29:56)

I think you're probably looking for 'active' as in:

A:active {
font-weight: bold;
}


Something like that?



Tailslide -> RE: boldfacing the page you are on (10/9/2006 12:31:41)

There are a couple of different ways of doing it depending on the semantics of the issue - i.e. if you want a bit of text to have actual emphasis (for screenreaders for example) then you should use <strong> around the bits of text.

If it's just a presentational thing and you don't actually want the text to have more importance than the surrounding text then you just add font-weight:bold to the section you are talking about.

So if you have a list of navigation items within an unordered list called "navlist" for instance you'd add this: 

#navlist {font-weight:bold;}



lilblackgirl -> RE: boldfacing the page you are on (10/9/2006 13:25:00)

I think the idea was for whatever page you are on, that page name in the nav bar was highlighted in some way, whether boldfaced or other. For example:

HOME
ABOUT US
WORK
CONTACT US
OTHER INFO

In this case, the WORK option was boldfaced because i was on that page. But i wanted to see if it could be coded so that whatever page i was on, that page would be boldfaced, not so that i had to manually bolden that page. It would do it on its own.

Am i making sense? I don't feel as though i'm explaining this very well. [:D]



Tailslide -> RE: boldfacing the page you are on (10/9/2006 13:39:37)

Ok I got you. Yes it's not too hard to do, there are a couple of different ways to do it too - I like the lazy way which is the following:

Firstly you need to assign a unique id to the body element of each page like this: 

<body id="home">


Or "contact" or "about" - you get the idea.

Next you need to assign a unique id to each navigation link like this:

(I'll assume that your nav is in a list 'cos that's the way I do it [:D] but it works if it's not) 

<ul>
<li><a href="index.html" id="nav-home">Home</a></li>
<li><a href="about.html" id="nav-about">About Us</a></li>
<li><a href="contact.html" id=nav-contact">Contact Us</a></li>
</ul>

Now in your CSS you can reference each navigation link on each page uniquely so you can get the exact effect you were looking for. Like this: 

#home #nav-home, #about #nav-about, #contact #nav-contact {font-weight:bold;}


So on the home page the CSS is looking for the link with the id nav-home and no others.

This approach is especially good if you ever want to use includes - even if you don't it means that you can just copy/paste the same navigation items into each page.



lilblackgirl -> RE: boldfacing the page you are on (10/9/2006 13:53:16)

That's what i was looking for, thanks Tailslide!



womble -> RE: boldfacing the page you are on (10/9/2006 16:01:01)

You can also do it with PHP if the server you're on supports PHP. I used this method recently on a site successfully picks up the current page and changes the link to the current page, adding in a "current" class.



rdouglass -> RE: boldfacing the page you are on (10/9/2006 16:17:04)

quote:

picks up the current page and changes the link to the current page, adding in a "current" class.


Yup, I do that same thing with ASP and works quite well.



lilblackgirl -> RE: boldfacing the page you are on (10/12/2006 16:13:32)

< --- knows zip about PHP or ASP. [:o]



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125