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

Browni · #1 April 19th, 2005, 10:14 AM

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/si....php?page=home Also how do i set it to always default to viewing home.html when i open the site?

Pengu · #2 April 19th, 2005, 11:02 AM

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** · #3 April 19th, 2005, 08:53 PM

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

texanpenguin · #4 April 20th, 2005, 02:34 AM

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 · #5 April 20th, 2005, 02:38 AM

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

**mdnky** · #6 April 21st, 2005, 11:17 AM

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 · #7 April 21st, 2005, 11:37 AM

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** · #8 April 21st, 2005, 06:55 PM

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