Repeating Menu in CSS

My website has over 150 pages/links and I have a ‘menu’ that appears on each page. Here is the code I’m using for CSS and HTML.

div#left {
font-family: Georgia, Times New Roman, Times, serif;
font-weight: bold;
font-size: 15pt;
font-style: italic;
text-align: center;
width: 239px;
height: 680px;
position: absolute;
left: 10px;
padding: 0px;
top: 500px;
border: solid thin white;
<br><a class=“customlink” href=“index.html” target=“_blank”>Home</a><br><br><br>
<a class=“customlink” href=“Awardees.html”>Awardee Institutions</a><br><br><br>
<a class=“customlink” href=“Membership.html”>Members</a><br><br><br>
<a class=“customlink” href=“Research_Focus_Groups.html”>Focus Groups</a><br><br><br>
<a class=“customlink” href=“Supported_Sites.html”>Supported Sites</a><br><br><br>
<a class=“customlink” href=“Research_Resources.html”>Research Resources</a><br><br><br>
<a class=“customlink” href=“Pilot_Proj.html”>Pilot Projects</a><br><br><br>
<a class=“customlink” href=“SCCPRR_Policy_Operations.pdf”>Policy Manual</a><br><br><br>
<a class=“customlink” href=“Competition.html”>Annual Competition</a><br><br><br>
}

HTML: <div id=“left”>

My problem is that only my white border, to the left of my page is working. Am I missing something? Thanks for any help I can get.

Thank you very much. One more question though. How do I get the links on the Stylesheet? My problem is that with so many pages/links, if I need to modify the menu I need to go into each page; I would prefer to make only 1 change on the stylesheet. Suggestions?

You do that wuth php includes http://www.visibilityinherit.com/code/php-includes.php

Your markup is completely wrong, Here is an example page of what you should be doing:

<html>

<head>

<title>Test Page</title>

<style>
div#left {
font-family: Georgia, Times New Roman, Times, serif;
font-weight: bold;
font-size: 15pt;
font-style: italic;
text-align: center;
width: 239px;
height: 680px;
position: absolute;
left: 10px;
padding: 0px;
top: 500px;
border: solid thin white;
}
</style>

</head>

<body>

<div id=“left”>
<br><a class=“customlink” href=“index.html” target=“_blank”>Home</a><br><br><br>
<a class=“customlink” href=“Awardees.html”>Awardee Institutions</a><br><br><br>
<a class=“customlink” href=“Membership.html”>Members</a><br><br><br>
<a class=“customlink” href=“Research_Focus_Groups.html”>Focus Groups</a><br><br><br>
<a class=“customlink” href=“Supported_Sites.html”>Supported Sites</a><br><br><br>
<a class=“customlink” href=“Research_Resources.html”>Research Resources</a><br><br><br>
<a class=“customlink” href=“Pilot_Proj.html”>Pilot Projects</a><br><br><br>
<a class=“customlink” href=“SCCPRR_Policy_Operations.pdf”>Policy Manual</a><br><br><br>
<a class=“customlink” href=“Competition.html”>Annual Competition</a><br><br><br>
</div>
</body>
</html>

The easiest way to re-use an HTML ‘fragment’ across your site, if you aren’t already using PHP, is with a server-side include (SSI).

  1. Create a menu.htm file that has the code you want to repeat on multiple pages.
  2. In all the other pages, instead of that code, put in the line
<!--#include virtual="menu.htm" -->

The URL is relative to the page where it is referenced, so you may want to have /menu.htm to ensure it always looks in the root folder. You can only include pages on the same server, so no need to include the domain name.
3. You can either rename all your pages to use .shtml extension (SSI only happens in .shtml files by default) or you can switch your server to parse all .htm files for SSI - I’d advise you to ask on the Apache configuration board how to go about that best.

I’m afraid that you will have to change the links on every page, unless you employ a javascript solution, and add event listeners to your menu items. you could do this just once in an external javascript file. Alternatives include:

  • Putting the menu in a separate file, that gets added to each pages via an iframe
  • Create a back-end script to generate your script
  • Create a page template in wbich your menu will live

I’m sorry bro I can’t be any more clear than that link is. Just follow all the steps.

Hi Eric. I understand the concept but how does the nav.inc fit into my div#left style? I followed the instructions on the link you provided, but it’s still not working. I want my menu to fit into that box with the white line around it.