SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

  2. #2
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  3. #3
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

  5. #5
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I'm sorry bro I can't be any more clear than that link is. Just follow all the steps.

  7. #7
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Den Mother View Post
    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?
    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
    Code HTML4Strict:
    <!--#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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •