changing a css statement depending on the reuslt of $_GET['page']

Browni

Browni

Registered
I have a site tabbed navigation at the top, this is done by CSS, every tab has a off state, and an on state the on state for each tab is the same.

the content is controlled by a $_GET['page'] statement, is there a way to change the state of a tab depending on the result of $_GET['page']? for example if $_GET['page'] returns 'services' then the services tab is highlighted (with its on state) and every other tab is 'off'?

I will post an example when i iorn out a few cracks.
\
Edit: added link : http://adambrowndesigns.co.uk/dev/site/index.php?page=home Also how do i set it to always default to viewing home.html when i open the site?
 
i know exactly what you want. you want to have tabs that highlight on mouse (using :hover) but also you want the current page's tab to be highlighted all the time. there isn't a way that i know of to do it, without duplication. ie: in the css file, declare another class for each tab, in the "on" state (highlighted, or whatever) and then add a string into the class="" paramater in the HTML, using a php variable..
 
Very simple to do with CSS and a simple body id tag, no PHP required.

HTML:
Code: 
<body id="nav_services">

<a href="index.php?page=home" class="nav_services">Home</a>

CSS:
Code: 
#nav_services #menu .nav_services {
     color: #000;
     border-top: 1px solid #666;
     border-right: 1px solid #666;
     border-bottom: 1px solid #fff;
     border-left: 1px solid #666;
     background-color: #fff;
     background-image: none;
     {

Get rid of the #menu.aactive rule when you add the one above. Change #nav_services to a unique ID for each page it's required on, and add an unique active class to each link tag in the navigation. Also, make sure that CSS rule is below every other CSS rule that deals with the navigation's styling.

You might want to consider using an unordered list to control the links better too.

CSS example for all links:
Code: 
#nav_home #menu .nav_home, 
#nav_services #menu .nav_services,
#nav_support #menu .nav_support, 
#nav_itunes #menu .nav_itunes,
#nav_gallery #menu .nav_gallery, 
#nav_contact #menu .nav_contact {
     color: #000;
     border-top: 1px solid #666;
     border-right: 1px solid #666;
     border-bottom: 1px solid #fff;
     border-left: 1px solid #666;
     background-color: #fff;
     background-image: none;
     {
 
mdnky is right about everything.

I agree about using a ul for the tab list too - it's a more sensible way to represent a list. Just make sure to use display: inline;
 
Yea. Either display inline, or display block on the li elements with a float: left specified, will do the job (make sure to clear the float if you choose that method).
 
i really need to learn so me CSS and stop relying on Dreamwever to do it for me, because i have very little idea with it.
 
Best way to learn it is to do it; as the more you do it, the easier it'll become. Be prepared to be annoyed for a short period while you transition over from the 'old-ways' of thinking and doing things, but that'll disappear shortly and everything will be brighter. It's kinda like switching from Windows to Mac OS X...not totally, but kinda like that.


You can find a lot of info on the web itself. Just have to be careful who you listen to on the web sometimes.





xHTML & CSS showcases:
 
Oh, and for CSS creation, there's no better program ANYWHERE than CSSEdit (Mac Only).

It's insanely good at what it does, unlike HTML programs where each is roughly equal, and none is perfect just yet (Tag would be close, but it annoys me occasionally and I just keep going back to SubEthaEdit)
 
You must log in or register to reply here.
Back
Top