PDA

View Full Version : Atomatic updating navbar for multiple pages



bodmin
Jul 4th, 2009, 11:10 PM
Ok i am very new to all this and have picked it back up from where i left off last year (long story, dont ask) and what i wont to achive is a seperate css page that has all my code for my navbar on it and a code in all my pages of my website (which is not on line yet) so that when i up date the nav bar it altomaticly up dates all my other pages when viewed (when its online) so i dont have to keep going to every page and adding the new bit of code to each indervidual page.
Hope that makes sence

I have also checked my template in most browsers and it all works/looks fine but the navbar wont expand in IE.
Can anyone help with that as well

Regards
Mark

Ps if anyone see's anything i have done wronge please let me know.. Thanks



#container
{
width: 800px;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
background-image: url('imgs/background.gif');
background-position: top left;
background-repeat: repeat-y;
}

#header
{
height: 180px;
padding: 0px;
border-bottom: 0px solid gray;
}

#header h1
{
padding: 0px;
margin: 0px;
}

#leftnav
{
float: left;
width: 120px;
margin: 0px;
border-right: 0px solid gray;
padding: 0em;

}

#rightnav
{
float: right;
width: 110px;
margin: 0px;
border: 0px solid gray;
padding: 0em;

}

#floatright
{
float: right;
width: 120px;
border: 0px solid #666;
margin: 0px 0px 0px 0px;
padding: 0px;
}

p { margin-top: 0px; }

#content
{
margin-left: 160px;
margin-right: 120px;
padding: 1em;
max-width: 36em;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%
}

#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ffff9e;
border-top: 1px solid gray;
}
body
{
background-color: #aaaaaa;
padding: 20px;
margin: 0;
font-size: small;
}

#navigation ul
{
list-style-type:none;
padding: 0;
margin: 0;
width: 130px;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%
}

#navigation li
{
margin: 0;
}

#navigation a
{
text-decoration: none;
text-transform: uppercase;
font-weight:bold;
display: block;
padding: 3px 12px 3px 8px;
background-color: #ffff9e;
color: #1c1c1c;
border-top:1px solid #dddddd;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #dddddd;
}

#navigation a:hover
{
background-color: #efdb80;
}

#navigation a:active
{
padding: 2px 13px 4px 7px;
background-color: #efdb80;
color: #eeeeee;
border-top: 1px solid #333333;
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
border-left: 1px solid #333333;
}

#navigation li li a
{
text-decoration: none;
text-transform: lowercase;
font-weight: normal;
padding: 3px 3px 3px 17px;
background-color: #999999:
color: #111111;
}

#navigation li li a:active
{
padding: 2px 4px 4px 16px;
background-color: #efdb80;
color: #000000;
border-top: 1px solid #333333;
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
border-left: 1px solid #333333;
}




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="
styles.css"/>
<title>New Template</title>
<style type="text/css">
</style>
<script type="text/javascript">
//<![CDATA[
function swap(targetId)
{
if (document.getElementById)
{
target = document.getElementById(targetId);
if(target.style.display == "none")
{
target.style.display = "block";
}

else
{
target.style.display = "none";
}
}
}
//]]>
</script
</head>

<body>

<div id="container">

<div id="header">

<img src="imgs/header1.gif" alt="Nurture your pets logo" style="
width: 800px; height:180px;"/>
</div>

<div id="leftnav">

<div id="navigation">

<ul>
<li><a href="#" onclick="swap('sectionOneLinks');return false;">
Dogs</a>
<ul id="sectionOneLinks" style="display:none;">
<li><a href="#">Breeds</a></li>
<li><a href="#">Training</a></li>
<li><a href="#">Getting a dog</a></li>
<li><a href="#">A link to a page</a></li>
</ul>
</li>
<li><a href="#" onclick="swap('sectionTwoLinks');return false;">
Hamsters</a>
<ul id="sectionTwoLinks" style="display:none;">
<li><a href="#">Feeding</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
</ul>
</li>
<li><a href="#" onclick="swap('sectionThreeLinks');return false;
">Section three</a>
<ul id="sectionThreeLinks" style="display:none;">
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
</ul>
</li>
<li><a href="#" onclick="swap('sectionFourLinks');return false;
">Section four</a>
<ul id="sectionFourLinks" style="display:none;">
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
</ul>
</li>
</ul>
</div>


</div>

<div id="rightnav">


</div>

<div id="content">
<p>
tyytkh;gfckujljfkjojhgj

</p>
<br>
<br>
</td>
</tr>
</tbody>
</div>

<div id="footer">Copyright 2009 Nurture Your Pets. All rights reserved.
</div>
</div>
</body>
</html>

jswany
Jul 5th, 2009, 10:42 PM
if i understand correctly what you want to do then you could use php to require the links. This would just include one page of links to every page. you would just need to save the pages as .php rather than .html .. Then when you wish to add/delete or change a link you would do so on the links.php page and this would change accross the site.

index.php


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="
styles.css"/>
<title>New Template</title>
<style type="text/css">
</style>
<script type="text/javascript">
//<![CDATA[
function swap(targetId)
{
if (document.getElementById)
{
target = document.getElementById(targetId);
if(target.style.display == "none")
{
target.style.display = "block";
}

else
{
target.style.display = "none";
}
}
}
//]]>
</script
</head>

<body>

<div id="container">

<div id="header">

<img src="imgs/header1.gif" alt="Nurture your pets logo" style="
width: 800px; height:180px;"/>
</div>

<div id="leftnav">

<div id="navigation">
<?php require('links.php'); ?>
</div>


</div>

<div id="rightnav">


</div>

<div id="content">
<p>
tyytkh;gfckujljfkjojhgj

</p>
<br>
<br>
</td>
</tr>
</tbody>
</div>

<div id="footer">Copyright 2009 Nurture Your Pets. All rights reserved.
</div>
</div>
</body>
</html>


the page in which to be included.
links.php


<ul>
<li><a href="#" onclick="swap('sectionOneLinks');return false;">
Dogs</a>
<ul id="sectionOneLinks" style="display:none;">
<li><a href="#">Breeds</a></li>
<li><a href="#">Training</a></li>
<li><a href="#">Getting a dog</a></li>
<li><a href="#">A link to a page</a></li>
</ul>
</li>
<li><a href="#" onclick="swap('sectionTwoLinks');return false;">
Hamsters</a>
<ul id="sectionTwoLinks" style="display:none;">
<li><a href="#">Feeding</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
</ul>
</li>
<li><a href="#" onclick="swap('sectionThreeLinks');return false;
">Section three</a>
<ul id="sectionThreeLinks" style="display:none;">
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
</ul>
</li>
<li><a href="#" onclick="swap('sectionFourLinks');return false;
">Section four</a>
<ul id="sectionFourLinks" style="display:none;">
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
</ul>
</li>
</ul>


i hope this helps :thumbsup:

Note: PHP is a server side code. so it will not work untill it is online.