cip6791 Posted October 19, 2008 Share Posted October 19, 2008 hi ... I have a general header.php which I include in all my pages. I am building a static website. How would like to make the button in the navigation be on hover like if user is on home page the home button stays a different color. and so on. so i have this : <li><a href="index.php" class="active">Home</a></li> but since all the pages get the same page, how can i change the active class for each of my pages? there are 5 in total. thank you Quote Link to comment Share on other sites More sharing options...
dropfaith Posted October 19, 2008 Share Posted October 19, 2008 the php is included server side not browser so it doesnt effect the display of things based on active states in css a:link { color:red; text-decoration:underline; } a:visited { color:red; text-decoration:underline; } a:hover { color:green; text-decoration:underline; } a:active { color:red; text-decoration:underline; } Quote Link to comment Share on other sites More sharing options...
haku Posted October 20, 2008 Share Posted October 20, 2008 This is easiest done with php. For each link you output, check to see if the link is the same as the page you are on. If it is, then output class="active" on that link. Then set a css class for .active that looks the way you want it. It's also possible to do this entirely in CSS, though it will take more coding. The above way is the simplest. Quote Link to comment Share on other sites More sharing options...
cip6791 Posted October 20, 2008 Author Share Posted October 20, 2008 an example would be great. i don't know php. Quote Link to comment Share on other sites More sharing options...
dropfaith Posted October 20, 2008 Share Posted October 20, 2008 http://www.webcheatsheet.com/PHP/get_current_page_url.php Quote Link to comment Share on other sites More sharing options...
cip6791 Posted October 20, 2008 Author Share Posted October 20, 2008 thank you ... i ll give it a try and let u know how it works. Quote Link to comment Share on other sites More sharing options...
haku Posted October 20, 2008 Share Posted October 20, 2008 If you don't know php, then a css only method is probably easier for you. If you have some links, for example home, about, contact, then give each of those links an id with that name: <a href="/home" id="home">home</a> <a href="/about" id="about">about</a> <a href="/contact" id="contact">contact</a> then you give the body of each of those pages a unique id. So the home body will look like this: <body id="home_page"> Then you set your regular css: a { color: black; } and you set the active links by using the body IDs: #home_page #home, #about_page #about, #contact_page #contact { color: red; } Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.