Help making CSS tab bar

Messiah Khan · 12 Jun 2008 at 10:25

Im trying to make a tab type navigation bar for; www.afowler.co.uk, but im not sure how to go about it. I thought it was simply a matter of changing the a:active in the css, but apparently its not. Ive come across a few solutions on the internet, but my problem is that the whole site has been split up.

All the navigation and header etc is in its own .php file, the footer in its own .php file and the main content in its own file. This means I can't change the link html code for each page. Any ideas?

adamph · 12 Jun 2008 at 10:39

I have done something similar before you need to tell it which page is open via Javascript

Ross1234 · 12 Jun 2008 at 10:42

Or you could use php to check which page is open.

adamph · 12 Jun 2008 at 10:50

Just made you a quick solution its rough but it works

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">

.on {background-color: #000000; color: #FFFFFF ;}

</style>

<script type="text/javascript">
function navigation(){

//collapse/expand menus
var sections = new Array("home","gallery","about","sales","links","comments" ,"contact");

//highlight relevant links
if(window.main_nav && document.getElementById("main-nav-" + main_nav)){
document.getElementById("main-nav-" + main_nav).className = "on";
}

}

</script>

<script type="text/javascript">
var main_nav = "about";
</script>

</head>

<body>

<div id="navbar">
<ul>
<li id="main-nav-news"><a href="index.php">News</a></li>
<li id="main-nav-gallery"><a href="gallery.php">Gallery</a></li>
<li id="main-nav-about"><a href="about.php">About</a></li>
<li id="main-nav-sales"><a href="sales.php">Sales</a></li>
<li id="main-nav-links"><a href="links.php">Links</a></li>
<li id="main-nav-comments"><a href="messages.php">Comments</a></li>
<li id="main-nav-contact"><a href="contact.php">Contact</a></li>
</ul>
</div>

<script type="text/javascript">
navigation();
</script>

</body>
</html>

I would put the JS function in a seperate JS file and link it from a global head include if you have one.

Also to change which page is highlighted you need to edit this on each page:

<script type="text/javascript">
var main_nav = "about";
</script>

Any questions PM me

Messiah Khan · 12 Jun 2008 at 11:21

Thanks for the replies. I can't seem to get that to work adamph. I think my main problem is the way I have the site broken up. For example the index page is;

Header;

PHP:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Alasdair Fowler Photography</title>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>

<body>  	
<script type="text/javascript" src="swfobject.js"></script>

<div id="toplogo">
	<div class="toplogo"  id="monoSlideshow1">
		<p><strong>Please install Flash and turn on Javascript.</strong></p>
	</div>
</div>

<div id="navbar">
	<ul>	
		<li><a href="index.php">News</a></li>
		<li><a href="gallery.php">Gallery</a></li>
		<li><a href="about.php">About</a></li>
		<li><a href="sales.php">Sales</a></li>
		<li><a href="links.php">Links</a></li>
		<li><a href="messages.php">Comments</a></li>
		<li><a href="contact.php">Contact</a></li>	
	</ul>
</div>

<script type="text/javascript">
	var fo = new SWFObject("monoslideshow.swf", "FOmonoSlideshow", "800", "100", "7", "#000000");
	fo.addVariable("showLogo", "false");
	fo.addVariable("dataFile", "monoslideshow2.xml");
	fo.write("monoSlideshow1");
</script>

Content;

PHP:

<?PHP			
include("/var/www/html/header.php");
?>

<div id="content">	
	<div id="contenttext">

		<?PHP
		$number=1;
		$template="News";
		$category=1;
		include("/var/www/html/cutenews/show_news.php");			

		$number=5;
		$template="Oldnews";
		$category=1;
		$static=TRUE;
		include("/var/www/html/cutenews/show_news.php");
		?>

	</div>
</div>

<?PHP
include("/var/www/html/footer.php");
?>

Footer;

PHP:

<div id="footer">
	<div class="footertextleft">All images and content are the copyright of Alasdair Fowler</div>
	<div class="footertextright"><a href="http://validator.w3.org/check?uri=referer">XHTML 1.0 Strict</a> <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS level 2.1</a></div>
</div>
</body>
</html>

How would I go about breaking your script up into the right sections?

adamph · 12 Jun 2008 at 11:31

ok put these lines of code in your header:

<script type="text/javascript">
function navigation(){

//collapse/expand menus
var sections = new Array("home","gallery","about","sales","links","comments" ,"contact");

//highlight relevant links
if(window.main_nav && document.getElementById("main-nav-" + main_nav)){
document.getElementById("main-nav-" + main_nav).className = "on";
}

}

</script>

Or you can stick it in a file say nav.js and put this one line in:

<script type="text/javascript" src="nav.js"></script>

Next you need to give your menu some ID's here:

<div id="navbar">
<ul>
<li id="main-nav-news"><a href="index.php">News</a></li>
<li id="main-nav-gallery"><a href="gallery.php">Gallery</a></li>
<li id="main-nav-about"><a href="about.php">About</a></li>
<li id="main-nav-sales"><a href="sales.php">Sales</a></li>
<li id="main-nav-links"><a href="links.php">Links</a></li>
<li id="main-nav-comments"><a href="messages.php">Comments</a></li>
<li id="main-nav-contact"><a href="contact.php">Contact</a></li>
</ul>
</div>

That should be your header done!

In each individual pages content stick this at the bottom, just before the footer include

<script type="text/javascript">
var main_nav = "comments";
navigation();
</script>

change the - var main_nav = "comments";
depending on what page you are in

Finally you need a class called "on" in your css which has the style you want to apply.

So

#navbar .on {background: #fff; }

Hope this works!

Messiah Khan · 12 Jun 2008 at 11:50

Nope, still doesn't seem to work im afraid.

adamph · 12 Jun 2008 at 11:51

want me to email the file to you and you can try and piece it together yourself? Or show me what your code looks like now and I will try and work out what's gone wrong?

Messiah Khan · 12 Jun 2008 at 11:54

adamph said:
want me to email the file to you and you can try and piece it together yourself? Or show me what your code looks like now and I will try and work out what's gone wrong?

Yeah you can if you want. Use the email in my trust. The site ive tried it on is www.afowler.co.uk/test/ if you look at the source code, ive put it in as you said, but its doesn't seem to affect it at all. Edit; at the moment the code looks like;

Header;

PHP:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Alasdair Fowler Photography</title>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>

<body>  	
<script type="text/javascript" src="swfobject.js"></script>

<div id="toplogo">
	<div class="toplogo"  id="monoSlideshow1">
		<p><strong>Please install Flash and turn on Javascript.</strong></p>
	</div>
</div>

<div id="navbar">
	<ul>
		<li id="main-nav-news"><a href="index.php">News</a></li>
		<li id="main-nav-gallery"><a href="gallery.php">Gallery</a></li>
		<li id="main-nav-about"><a href="about.php">About</a></li>
		<li id="main-nav-sales"><a href="sales.php">Sales</a></li>
		<li id="main-nav-links"><a href="links.php">Links</a></li>
		<li id="main-nav-comments"><a href="messages.php">Comments</a></li>
		<li id="main-nav-contact"><a href="contact.php">Contact</a></li>
	</ul>
</div>

<script type="text/javascript">
	var fo = new SWFObject("monoslideshow.swf", "FOmonoSlideshow", "800", "100", "7", "#000000");
	fo.addVariable("showLogo", "false");
	fo.addVariable("dataFile", "monoslideshow2.xml");
	fo.write("monoSlideshow1");
</script>

Index;

PHP:

<?PHP			
include("/var/www/html/header.php");
?>

<div id="content">	
	<div id="contenttext">

		<?PHP
		$number=1;
		$template="News";
		$category=1;
		include("/var/www/html/cutenews/show_news.php");			

		$number=5;
		$template="Oldnews";
		$category=1;
		$static=TRUE;
		include("/var/www/html/cutenews/show_news.php");
		?>

	</div>
</div>

<script type="text/javascript">
var main_nav = "news";
navigation();
</script>

<?PHP
include("/var/www/html/footer.php");
?>

Footer;

PHP:

<div id="footer">
	<div class="footertextleft">All images and content are the copyright of Alasdair Fowler</div>
	<div class="footertextright"><a href="http://validator.w3.org/check?uri=referer">XHTML 1.0 Strict</a> <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS level 2.1</a></div>
</div>
</body>
</html>

Css (Its the 'navbar' itmes your after);

Code:

/* Page background */
* 

{
padding:0;
margin:0; 
} 


html {
height:100%;
}

/* Body settings */
body {

background:
	#AFAC9B
	url(Background.gif)
	repeat-x
	0px 0px;

text-align: center;
font-family: 'Trebuchet MS', Trebuchet, sans-serif;
font-size: 9pt;
color: #ffffff;
line-height: 160%;
}


/* All link settings */
a:link {color: #999999; text-decoration: none; font-weight: bold; }
a:active {color: #999999; text-decoration: none; font-weight: bold; }
a:visited {color: #999999; text-decoration: none; font-weight: bold; }
a:hover {color: #ffffff; text-decoration: none; font-weight: bold; }


/* All images */
img { 
 border: none; 
}


/* Main content area box */
#content {
	width: 800px;
	margin: 0 auto;
	background-color:#000000;
	border-left: solid #999999 1px;
	border-right: solid #999999 1px;
	width:800px;
}


/* Vertical pinstripes around main content area  */
#pinstripesides {
	border-left: solid #999999 1px;
	border-right: solid #999999 1px;
	width:800px;
}


/* Horizontal pinstripe at top of main content areas */
#pinstripetop {
	border-top: solid #999999 1px;
	width:800px;
}


/* Main content area footer for rounded box */
div#footer {
	background: url(Roundedbarbottom.gif)
	no-repeat;
	width: 800px;
	margin: 0 auto;
	padding: 0px;		
	height: 17px;
}


/* Main content area footer text, ie copyright info*/
.footertextleft {
	margin-left: 50px;
	text-align: left;
	font-family: 'Trebuchet MS', Trebuchet, sans-serif;
	font-size: 7pt;
	font-weight: normal;
	color: #999999;
	width:49%;
	float: left;
}

/* Main content area footer text, ie copyright info*/
.footertextright {
	margin-left: 50px;
	text-align: left;
	font-family: 'Trebuchet MS', Trebuchet, sans-serif;
	font-size: 7pt;
	font-weight: normal;
	color: #999999;
	width:25%;
	float: right;
}


/* Main content text */
#contenttext {
	text-align: left;
	width: 700px;
	margin: 0 auto;
	padding: 20px;
	font-family: 'Trebuchet MS', Trebuchet, sans-serif;
	font-size: 9pt;
	color: #ffffff;
}


/* Content text titles */
#titletext {
	text-align: center;
	width: 700px;
	margin: 0 auto;
	padding: 20px;
	font-family: 'Trebuchet MS', Trebuchet, sans-serif;
	font-size: 9pt;
	color: #ffffff;
	font-weight: bold;
}


/* Main text links default */
.links a {
    color: #999999;
    font-weight: bold;
}


/* Main text links visited */
div#links  a:visited {
    color: #999999;
    font-weight: bold;

}


/* Main text links hover */
div#links  a:hover {
    font-weight: bold;
    color: #FFFFFF;    
}


/* Main text links active */
div#links  a:active {
    font-weight: bold;
    color: #FFFFFF;    
}


 
/* Lists */
ul {
	list-style: none;
	margin-left: 0;
	padding-left: 0em;
	text-indent: 0em;
	display: inline;
	margin-left:50px;
	width: 10em;
	padding: 1px;	
	} 


/* Top banner gap fix*/
div#toplogo {
margin-bottom:-6px;
}

#navbar .on {
	background: #FF0000;
}

/* Main navigation bar spacing */
#navbar {
	margin: 0 auto;
	padding: 3px 0;
}


/* Main navigation bar */
div#navbar {
    text-align: center;
    width: 800px;
    height: 20px;    
    border-top: solid #999999 1px;
    border-bottom: solid #999999 1px;
    background: #000000;
}


/* Main navigation bar text */
div#navbar ul {
    margin: 0px;
    padding: 0px;
    font-family: 'Trebuchet MS', Trebuchet, sans-serif;
    font-size: 9pt;
    color: #999999;
    line-height: 20px;
    white-space: nowrap;
}


/* Main navigation bar list layout */
div#navbar li {
    list-style-type: none;
    display: inline;
}


/* Main navigation bar list style */
div#navbar li a {
    text-decoration: none;
    padding: 7px 20px;
    color: #999999;
    font-weight: bold;
}


/* Main navigation bar text links */
div#navbar li a:link {
    color: #999999;
    font-weight: bold;
}


/* Main navigation bar text visited */
div#navbar li a:visited {
    color: #999999;
    font-weight: bold;

}


/* Main navigation bar text hover */
div#navbar li a:hover {
    font-weight: bold;
    color: #FFFFFF;    
}


/* Input box single line */
input { 	
font-family: Verdana, Helvetica, Arial, sans-serif; 
color : #ffffff; 
font-size : small; 
background-color : #000000; 
border : 1px solid #999999; 
} 


/* Input box multi line */
textarea { 
font-family: Verdana, Helvetica, Arial, sans-serif; 
color : #ffffff; 
font-size : small; 
background-color : #000000; 
border : 1px solid #999999; 
} 


/* Input button */
select { 
font-family: Verdana, Helvetica, Arial, sans-serif;
font-weight: bold; 
color : #ffffff; 
font-size : small; 
background-color : #999999; 
border : 1px solid #999999; 
}

/* Input box width control */
.inputbox { 
width: 310px;
}


/* Index page old news*/
div#oldnews {
text-align: left;
margin-left:50px;
}


/* Image layout left */
div#imgleft 
{
float:left;
margin:20px;
margin-left:0px
}

/* Image layout right */
div#imgright 
{
float:right;
margin:20px;
margin-right:0px
}


/* Sales page image container */
.imageContainer {
	width: 700px;
	height: 150px;
	margin-top:15px;
}


/* Sales page image layout */
.imgsales 
	{
	float:left;
	margin-right:15px;
}


/* Guest book page message box header text */
div#guestbook {
	padding: 55px;
	text-align: Center;
	font-family: 'Trebuchet MS', Trebuchet, sans-serif;
	font-size: 9pt;
	color: #999999;
	font-weight: bold;
}


/* Guest book page text comments */
div#guestbookcomments {
	width: 300px;
	padding: 5px;
	text-align: Center;	
}


/* Guest book page comment name */
.name {
	font-family: 'Trebuchet MS', Trebuchet, sans-serif;
	font-size: 10pt;
	font-weight: normal;
	color: #999999;
}


/* Guest book page comment info */
.info {
	font-family: 'Trebuchet MS', Trebuchet, sans-serif;
	font-size: 10pt;
	font-weight: normal;
	color: #999999;
}


/* Guest book page comment data */
.comment {
	font-family: 'Trebuchet MS', Trebuchet, sans-serif;
	font-size: 10pt;
	font-weight: normal;
	color: #FFFFFF;
}


/* Guest book page comment number */
.comNumber {
	font-family: 'Trebuchet MS', Trebuchet, sans-serif;
	font-size: 10pt;
	font-weight: normal;
	color: #999999;
}


/* Guest book page comment reply */
.comReply {
	padding: 5px;
	font-family: 'Trebuchet MS', Trebuchet, sans-serif;
	font-size: 10pt;
	font-weight: normal;
	color: #999999;
}


/* Guest book page comment reply */
.reply {
	font-family: 'Trebuchet MS', Trebuchet, sans-serif;
	font-size: 10pt;
	font-weight: normal;
	color: #FFFFFF;
}


/* Guest book page comment entries */
div#Entries {
	font-family: 'Trebuchet MS', Trebuchet, sans-serif;
	font-size: 10pt;
	font-weight: normal;
	color: #999999;
}


/* Links page link container */
.linkContainer {
	width: 676px;
	margin: 0 auto;
	height: 200px;
}


/* Links page link */
.LinkItem {
	float: left;
	padding: 0px;
	margin: 10px;
	border-left: solid #999999 1px;
	border-right: solid #999999 1px;
	border-top: solid #999999 1px;
	border-bottom: solid #999999 1px;
}


/* Contact page message box header text */
div#contact {
	font-family: 'Trebuchet MS', Trebuchet, sans-serif;
	font-size: 9pt;
	color: #999999;
	font-weight: bold;
}

Thanks for your help btw.

adamph · 12 Jun 2008 at 12:06

Ok I have zipped it up here.

http://www.adamhowse.co.uk/nav/

I can see why its not working for you,

your navigation needs to change from :

<div id="navbar">
<ul>
<li><a href="index.php">News</a></li>
<li><a href="gallery.php">Gallery</a></li>
<li><a href="about.php">About</a></li>

<li><a href="sales.php">Sales</a></li>
<li><a href="links.php">Links</a></li>
<li><a href="messages.php">Comments</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>

to:

<div id="navbar">
<ul>
<li id="main-nav-news"><a href="index.php">News</a></li>
<li id="main-nav-gallery"><a href="gallery.php">Gallery</a></li>
<li id="main-nav-about"><a href="about.php">About</a></li>
<li id="main-nav-sales"><a href="sales.php">Sales</a></li>
<li id="main-nav-links"><a href="links.php">Links</a></li>
<li id="main-nav-comments"><a href="messages.php">Comments</a></li>
<li id="main-nav-contact"><a href="contact.php">Contact</a></li>
</ul>
</div>

also you need the Javascript in the head section after the line:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<script type="text/javascript">
function navigation(){

//collapse/expand menus
var sections = new Array("home","gallery","about","sales","links","comments" ,"contact");

//highlight relevant links
if(window.main_nav && document.getElementById("main-nav-" + main_nav)){
document.getElementById("main-nav-" + main_nav).className = "on";
}

}
</script>

Or you can have it as say one file ( the version I have uploaded has it as a separate file)

<script type="text/javascript" src="nav.js"></script>

Most importantly you need a class in your css called "on" that will be the same CSS as your a:active that you made

adamph · 12 Jun 2008 at 12:11

Messiah Khan said:
Thanks for your help btw.

Your welcome, hope it works. I am going out on my lunchbreak now so hopefully it will be working when I next check this thread! Failing that, email me the files I will make the adjustments and email them back!

Dup · 12 Jun 2008 at 12:20

This doesn't help with the separate header. It's from 3 years ago and was a quick mock up but may help you:

http://www.duperouzel.co.uk/webwork/tabbed/s4.htm

CSS

Feel free to steal what works for you

Messiah Khan · 12 Jun 2008 at 13:33

adamph said:
Your welcome, hope it works. I am going out on my lunchbreak now so hopefully it will be working when I next check this thread! Failing that, email me the files I will make the adjustments and email them back!

Hope you had a good lunch. Not managed to get it sorted im afraid. Everything looks as it should, but its simply having no effect. It's probably a tiny fault somewhere, but I can't see it.

Dup said:
This doesn't help with the separate header. It's from 3 years ago and was a quick mock up but may help you:

http://www.duperouzel.co.uk/webwork/tabbed/s4.htm

CSS

Feel free to steal what works for you

Cheers, Dup, but im having issues understanding my own code, never mind someone elses

. I can see how it's done, its just integrating thats the problem.

Messiah Khan · 12 Jun 2008 at 14:17

Got it working!

I needed <script type="text/javascript" src="nav.js"></script> after the header include in every page. Now to make it look nice.

adamph · 12 Jun 2008 at 15:00

Messiah Khan said:
Got it working!

I needed <script type="text/javascript" src="nav.js"></script> after the header include in every page. Now to make it look nice.

yay!

have fun!

P.s where did you get that nice flowery background image from? I have been searching for a site that has lots of background resources, but no luck yet.

Dup · 12 Jun 2008 at 15:41

http://www.k10k.net/ is a good site for tiles.

Define it as a pattern in Photoshop (open image, edit, define patten). Use the fill tool set to pattern on a new image the same width of the tile and as high as you want it.Then just add a colour to transaprent gradinet on a new layer and make it a horizontally tiled bg image in the CSS

Messiah Khan · 12 Jun 2008 at 16:32

I was hunting for ages for that sort of pattern until I stumbled across http://www.theinspirationgallery.com/ Thanks for your help guys. I may call upon you again when I get stuck again (which I probably will).

adamph · 12 Jun 2008 at 17:53

Dup said:
http://www.k10k.net/ is a good site for tiles.

Define it as a pattern in Photoshop (open image, edit, define patten). Use the fill tool set to pattern on a new image the same width of the tile and as high as you want it.Then just add a colour to transaprent gradinet on a new layer and make it a horizontally tiled bg image in the CSS

I was hunting for ages for that sort of pattern until I stumbled across http://www.theinspirationgallery.com/ Thanks for your help guys. I may call upon you again when I get stuck again (which I probably will).

Thanks for the links

Messiah Khan · 15 Jun 2008 at 17:14

Messiah Khan said:
I may call upon you again when I get stuck again (which I probably will).

Like Nostradamus, I predicted the future. Your script is working very nicely, so thank you for that. However now im trying to implement a secondary navigation menu. So if you click on say 'About', there will be another nav menu underneath the main one with subsections.

Ive managed to get that set up nicely, however I can't seem to get the tabbar system working as it should (Im not going to have that system tabbed as such, but I need the same system to change the link colour). Its simply not picking up the fact that the style should change. At the moment I have;

index.php;

PHP:

<?PHP			
include("/var/www/html/test/header.php");
?>

<?PHP			
include("/var/www/html/test/nav_index.php");
?>

<script type="text/javascript" src="nav.js"></script>

<div id="content">	
	<div id="contenttext">

		<?PHP
		$number=1;
		$template="News";
		$category=1;
		include("/var/www/html/cutenews/show_news.php");			

		$number=5;
		$template="Oldnews";
		$category=1;
		$static=TRUE;
		include("/var/www/html/cutenews/show_news.php");
		?>

	</div>
</div>

<script type="text/javascript">
var main_nav = "news";
navigation();
</script>

<?PHP
include("/var/www/html/footer.php");
?>

nav_index.php;

PHP:

<div id="secondarynavbar">
	<ul>
		<li id="main-nav-news"><a href="test.php">Lorum</a></li>
		<li id="main-nav-gallery"><a href="gallery.php">Gallery</a></li>
		<li id="main-nav-about"><a href="about.php">About</a></li>
		<li id="main-nav-sales"><a href="sales.php">Sales</a></li>
		<li id="main-nav-links"><a href="links.php">Links</a></li>
		<li id="main-nav-comments"><a href="messages.php">Comments</a></li>
		<li id="main-nav-contact"><a href="contact.php">Contact</a></li>
	</ul>
</div>

test.php (a subpage of index.php);

PHP:

<?PHP			
include("/var/www/html/test/header.php");
?>

<?PHP			
include("/var/www/html/test/nav_index.php");
?>

<script type="text/javascript" src="nav.js"></script>

<div id="content">	
	<div id="contenttext">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut imperdiet molestie purus. Quisque sed pede. Etiam pede erat, iaculis nec, vulputate ut, eleifend quis, justo. Quisque at elit. Donec ante mauris, bibendum eget, eleifend vel, porttitor ut, tellus. In vehicula lorem sed enim. Fusce suscipit feugiat eros. Suspendisse consequat faucibus mauris. Nulla a arcu ut ipsum volutpat imperdiet. Phasellus scelerisque. Aenean mollis, turpis in viverra egestas, ipsum dui scelerisque augue, id iaculis magna arcu sed sapien. Vestibulum fringilla. 

Mauris suscipit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent sem est, tincidunt quis, convallis non, aliquam a, ligula. Suspendisse ac quam quis elit laoreet ornare. Etiam auctor, felis ut sodales malesuada, erat augue aliquet ligula, a semper ipsum turpis vitae quam. Pellentesque sed mauris vitae tellus ultricies eleifend. Sed malesuada. Praesent rhoncus dapibus risus. Integer iaculis vestibulum tellus. Aliquam gravida convallis augue. Cras imperdiet euismod risus.

	</div>
</div>

<script type="text/javascript">
var main_nav = "news";
navigation();

var secondary_nav = "lorum";
secondarynavigation();
</script>

<?PHP
include("/var/www/html/footer.php");
?>

nav.js (can I include both functions in the same .js file like this?);

Code:

function navigation(){
	
	//collapse/expand menus
	var sections = new Array("home","gallery","about","sales","links","comments" ,"contact");
	
	
	//highlight relevant links
	if(window.main_nav && document.getElementById("main-nav-" + main_nav)){
	document.getElementById("main-nav-" + main_nav).className = "on";

	}

}


function secondarynavigation(){

	//collapse/expand menus
	var sections = new Array("lorum","test1","test2","test3","test4","test5" ,"test6");

	//highlight relevant links
	if(window.secondary_nav && document.getElementById("secondary-nav-" + secondary_nav)){
	document.getElementById("secondary-nav-" + secondary_nav).className = "onsecondary";

	}

}

mystyle.css;

Code:

/* Main navigation bar text active */
#navbar .on {
	background: url(tablong.gif) no-repeat left top;
	font-family: 'Trebuchet MS', Trebuchet, sans-serif;
	font-size: 9pt;
	color: #ffffff;
}

...

Code:

/* Secondary navigation bar text active */
#secondarynavbar .onsecondary {
	background: url(tablong.gif) no-repeat left top;
	font-family: 'Trebuchet MS', Trebuchet, sans-serif;
	font-size: 9pt;
	color: red;
}

Also one thing I noticed was that although the main navigation works perfectly fine in terms of having the tabbar as a background, I can't seem to change any font variables, ie change the .on color to white. Any ideas why its playing up?

Btw, the test site is www.afowler.co.uk/test/

Messiah Khan · 16 Jun 2008 at 09:56

Messiah Khan said:
Also one thing I noticed was that although the main navigation works perfectly fine in terms of having the tabbar as a background, I can't seem to change any font variables, ie change the .on color to white. Any ideas why its playing up?

Right, ive sorted that one by having the color controlled by

Code:

.on a

in the css. However im still unsure as to how to control the css of the secondary navbar.