I've used this technique in other sites but it's not working now. I am hoping that someone has an idea why... The site I'm working on is here: www.wlstranslations.com/v2 I have a lot of work to do, but the simple thing I want to do is make the links on the top navigation bold when you're on the page. What I've tried (which has worked on other sites) is this... In the global nav, I place an id tag on the links: <li><a href="index.php" id="home">HOME</a></li> <li><a href="translation.php" id="translate">TRANSLATION</a></li> ... Code (markup): Then in the top of each page, I place a style to that id: <style type="text/css"> a#home { font-weight: bold; } </style> Code (markup): I've done this before and it's worked fine. For some reason here it's not working. If anyone has suggestions on what I'm doing wrong, I'd love to learn. Thanks!
#menu a { font-weight:bold; } Code (markup): And remove all ids from links. Not needed. Also, I recommend you to make an external CSS stylesheet instead of manually writing the styles in each page - that is really contraproductive. Copy all your CSS styles to let's say file called style.css, place it to the root folder, then to the header of each page add: <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> Code (markup): Now you don't need to edit each page when you need to modify some minor issue. You will just edit the external stylesheet.
By the way, there are some other accessibility issues on your website you pay attention to. Just to let you know.
I'm trying to make the current menu link bold, not all of them. So I do have an external sheet, but the manual embedded style is just to highlight the current page. I guess I wasn't clear on that.
Thanks but that seems to make all the links bold. I just want one of the links bold - the link on the page. That's why it's not in an external style sheet. On the home page I'll bold the home. On the translation page I'll highlight the translation link.
Oh, ok assuming I read your post correctly this time. Here is a quick example I think that could work for you. Ok so for an example say we are working on the links page right now. <ul id="nav"> <li class="home"><a href="#">home</a></li> <li class="links linkselected"><a href="#">links</a></li> <li class="about"><a href="#">about</a></li> <li class="contact"><a href="#">contact</a></li> </ul> Now if we where working on the about page. <ul id="nav"> <li class="home"><a href="#">home</a></li> <li class="links"><a href="#">links</a></li> <li class="about aboutselected"><a href="#">about</a></li> <li class="contact"><a href="#">contact</a></li> </ul>
Here is simple way <a style="font-weight: bold;" href="index.php" id="home">HOME</a> <a style="font-weight: bold;" href="aindex.php" id="home">2</a> <a style="font-weight: bold;" href="bindex.php" id="home">3</a> <a style="font-weight: bold;" href="vindex.php" id="home">4</a> Regards Alex
I'm getting embarrassed. Thanks for your suggestions but I guess I didn't spell out exactly what I'm trying to do... I have a php include file that has the header navigation. This is a global navigation. So the code for the links can not be changed between pages. The easiest option in my mind is to create a simple embedded CSS definition on the specific page to make the correct link bolded. However it's not working for me. Thanks.
OK if you have control over the include, then you could change the class of whatever page it's on to a class called current, and then this would just change the font-weight to bold. But this gets rid the purpose of having an include I guess. The other option you could define it inside the HTML Body, before the include, like this: <body> <style type="text/css" media="screen"> whateverpage { font-weight: bold; } </style> <php> The Header Include ?> The Rest Of the file.. </body> Or you could use some PHP within the Menu file I guess to determine what page you are on and assign the style as appropriate, but the last method should work .
I think you will have to use some PHP as described above to get which page you are on, then apply a class to the anchor... Like, index.php page for eg <?php $page = "about"; include("includes/nav.php"); ?> Code (markup): nav.php file <ul> <li> <a href="index.php" class="<?php if($page == "home") { echo "current"; } ?>"> </li> <li> <a href="about.php" class="<?php if($page == "about) { echo "current";} ?>"> </li> </ul> Code (markup): That is completly untested, and I am sure that I have c**ked it up somewhere, but the basic principle is there... And the css file would be like, ul a.current { font-weight: bold; } Code (markup):
In my above post, I really should have put the class within the if statement, otherwise you will always have a class=""... Just a thought.