I have a css for sliding doors mneu and would like to have the color of the tab change for the page I am on. I've looked through the code and dont know where to change this. I am new to css but have a decent grasp, i think. Any help would be appreciated.
Lets say one of your pages is a contact page. Assign an ID to the body: <body id="contact"> HTML: Do this for every page that your tabbed navigation links to making sure every page has a different ID. For example, your home page might have an ID of "home". Then assign a different selector for each tab. So your contact tab might look like this: <li class="contact"><a class="contact">Contact</a></li> HTML: Do this for each tab, assigning a different class to each one. Then you target each tab like so: #contact .contact, #home .home, #info .info{ background-position: 0 -30px; } Code (markup): Obviously, your code may be different than this, but you can probably get the idea.
THanks.... one more question. Where do i place the color or the imag for the tab? Im i right to assume that the last code you posted goes in the cs file? the one that the individual pages target eg:#contact
The last code would probably go into your global CSS file, or one that is common to all your pages. The code I posted above is just an example of how you might accomplish this. Please don't copy/paste this, just use it as an example. Since you noted that you were using the sliding doors technique, I assumed you were using an image for the background rather than a color. The best way to accomplish the button change effect is to either load a new background image with the new color, or use an image that includes both states. For example, say your tab is 30px high. You create a 60px high image with the normal state at the top and the rollover/selected state at the bottom. Then, whenever you want to display the rollover/selected state, you simply change the background position: background-position: 0 -30px; If you just wanted to style the tab with a different color, you would have to first remove the background image, and then set a background color. In this case, the CSS style would change to: #contact .contact, #home .home, #info .info{ background-image: none; background-color: blue; /* or whatever color */ } Again, this is just an example. Your code will be different depending on how your HTML is written.
you can use ul is name then creat style like this if <ul id="menu"> then #menu li.current-page a{ background-color: blue; }
True, you could assign the ids to the ULs instead of the bodies, but it would not be possible to assign static ids if your nav is in an include. But then you could do something like: <ul id="<?php if(isset($_GET['page_id'])){ echo $_GET['page_id']; }else{ echo 'home';} ?>"> Code (markup): The UL id would either be the page_id or if no page id is set, then the id is home.