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



## Browni (Apr 19, 2005)

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?


----------



## Pengu (Apr 19, 2005)

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..


----------



## mdnky (Apr 19, 2005)

Very simple to do with CSS and a simple body id tag, no PHP required.

HTML:

```
<body id="nav_services">

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

CSS:

```
#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:

```
#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;
     {
```


----------



## texanpenguin (Apr 20, 2005)

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;


----------



## Browni (Apr 20, 2005)

that would make it __________ as aposed to |
                                                             |
                                                             |
                                                             |
Right?


----------



## mdnky (Apr 21, 2005)

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).


----------



## Browni (Apr 21, 2005)

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.


----------



## mdnky (Apr 21, 2005)

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.

*Some books that might be worth looking into:*

Designing with Web Standards - Jeffrey Zeldman
Web Standards Solutions: The Markup and Style Handbook - Dan Cederholm
Cascading Style Sheets the Definitive Guide - Eric Meyer

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

*Designer's Sites to Browse:*

Jeffrey Zeldman
Douglas Bowman
Dan Cederholm
Dave Shea
Eric Meyer
Jon Hicks
Shaun Inman
Simon Collison
Russ Weakley


*xHTML & CSS resource sites:*

ALA (A list Apart)
WSG (Web Standards Group)
MaxDesign Presentations
Listamatic
Listamatic2
Listutorial
Floatutorial
Selectutorial


*xHTML & CSS showcases:*

CSS Vault
StyleGala
CSS Zen Garden


----------



## Browni (Apr 22, 2005)

Mkdy. one word THANK YOU **bows down in awe**

thanks


----------



## texanpenguin (Apr 22, 2005)

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)


----------



## Browni (Apr 22, 2005)

thanks guys i will check out CSS edit, shareware i expect?


----------



## texanpenguin (Apr 22, 2005)

http://www.macrabbit.com/cssedit/

It's commercial software ($25 for the full version), but it does have a demo version which allows you to develop CSS up to 2499 characters long (weird limit, that one ).
Give the demo a go, you're almost guaranteed to get the full version.


----------

