boldfacing the page you are on

	Home Register Search Help Login

Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums

Recent Posts

Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

boldfacing the page you are on

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets >> boldfacing the page you are on

Page: [1]


lilblackgirl Posts: 288 Joined: 5/16/2002 From: Status: offline	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? _____________________________ You look like you're about to do something stupid. I'm in.


rdouglass Posts: 9280 From: Biddeford, ME USA Status: offline	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? _____________________________ Don't take you're eye off your final destination. ASP Checkbox Function Tutorial. (in reply to lilblackgirl)


Tailslide Posts: 6292 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	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;} _____________________________ "My strategy is so simple an idiot could have devised it" Little Blue Plane Web Design \| Blood, Sweat & Rust - A Land Rover restoration project (in reply to lilblackgirl)


lilblackgirl Posts: 288 Joined: 5/16/2002 From: Status: offline	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. _____________________________ You look like you're about to do something stupid. I'm in. (in reply to Tailslide)

Tailslide

Posts: 6292
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

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

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.

_____________________________

"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project

(in reply to lilblackgirl)


lilblackgirl Posts: 288 Joined: 5/16/2002 From: Status: offline	RE: boldfacing the page you are on - 10/9/2006 13:53:16 That's what i was looking for, thanks Tailslide! _____________________________ You look like you're about to do something stupid. I'm in. (in reply to Tailslide)


womble Posts: 5702 Joined: 3/14/2005 From: Living on the edge Status: offline	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. _____________________________ ~~ "A cruel god ain't no god at all" ~~ ~~ Erase hate. Practice love. ~~ (in reply to lilblackgirl)


rdouglass Posts: 9280 From: Biddeford, ME USA Status: offline	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. _____________________________ Don't take you're eye off your final destination. ASP Checkbox Function Tutorial. (in reply to womble)


lilblackgirl Posts: 288 Joined: 5/16/2002 From: Status: offline	RE: boldfacing the page you are on - 10/12/2006 16:13:32 < --- knows zip about PHP or ASP. _____________________________ You look like you're about to do something stupid. I'm in. (in reply to rdouglass)