Help making CSS tab bar

Messiah Khan

Messiah Khan

Messiah Khan

Soldato
Joined
1 Sep 2005
Posts
10,001
Location
Scottish Highlands
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?
 
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 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?
Click to expand...

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. :)
 
Last edited:
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!
Click to expand...

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 :)
Click to expand...

Cheers, Dup, but im having issues understanding my own code, never mind someone elses :p. I can see how it's done, its just integrating thats the problem.
 
Got it working! :D

I needed <script type="text/javascript" src="nav.js"></script> after the header include in every page. Now to make it look nice.
 
Messiah Khan said:
I may call upon you again when I get stuck again (which I probably will). :)
Click to expand...

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 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?
Click to expand...

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.
 
adamph said:
your welcome :)
Click to expand...

Since your so good, here's another one for you;

Ive not integrated pixelpost into my site (http://www.afowler.co.uk/test/gallery/index.php?x=browse) And ive set the second navigation links up to show the categories the images are in. However when you choose a category it simply adds
Code: 
?x=browse&category=4
to the URL, where
Code: 
category=4
defines the category number within pixelpost. So how would I go about adding the;

Code: 
<script type="text/javascript"> 
var main_nav = "gallery"; 
navigation(); 

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

part of the script when it doesn't load up a seperate page? I bascially need something that reads the category numbers and links the navigation script with that. Any ideas?

Edit; Nervermind, got it sorted. \o/
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom