www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 19

Thread: Is there an easy way to create a links menu without frames?

  1. #1
    Join Date
    Dec 2004
    Posts
    18

    Question Is there an easy way to create a links menu without frames?

    Each page of my website has a centralised menu of page links at the top of the screen, so that people can jump from one page to another on the site.
    At the moment, the HTML code that does this is just a formatted table full of links that I copy into the source code of each new page I create.
    But this also means that each time I create a new page, I have to modify the links table on all the other pages on the site so that they contain the link to the new page.

    Is there an easy way to make this table a single, separate file which is automatically accessed by all the other pages on the site (so that I only have to append another link to this one file each time a new page is added to the site)?

    I would like to do this without the use of frames if possible.
    (I don't think all web browsers can deal with frames anyway?)

    I have already tried creating the links table as a separate webpage, and then embedding it in every other page on the site using <object> tags with type='text/html'.
    But the result wasn't very good, because the embedded table always had a scroll bar along its edge (which I didn't want).
    Plus, the area of the embedded HTML object always has the same dimensions, whether the size of the browser window is changed or not.
    Is there maybe a way of embedding the HTML object so that it has no scroll bar, and resizes itself to accomodate the full table of links whatever the dimensions of the browser window?

    Or is frames the only way to do this?

  2. #2
    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,273
    You can use php with most servers.

    Save the html to a separate file - no header, body tags or whatever - just the menu.
    It could be .html, .htm, .txt or .php - I don't think it really matters (I use .htm).

    So let's say you saved this as menu.htm, put this line in your page where you want the menu html to appear :
    PHP Code:
    <?php @include ("menu.htm"); ?>
    Then save your page as whateveryourpagenameis.php .

    The server does the work - it inserts that bit of html (or whatever it is your asking it to insert) before it gets to the browser. You look at the source code and you don't even see this line - all you see is the html.

    I'm really sorry you didn't know about this earlier (it happened to me too a while ago).

  3. #3
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Many servers that don't have PHP available do allow Server-Side Includes (SSI).
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  4. #4
    Join Date
    Jan 2005
    Location
    Iowa, USA
    Posts
    16

    Table w/2 menus

    Koto > Try:

    Code:
    <body>
    <table><tr>
    <td>
    <table><tr>
    <td>
    <!-- left menu -->
    <table><tr>
    <td>Title of Menu #1</td>
    </tr><tr>
    <td>
    Item #1<br />
    Item #2<br />
    Item #3
    </td>
    </tr></table>
    <!-- spacer table -->
    <table><tr>
    <!-- take out space between b & s -->
    <td>&nb sp;</td>
    </tr></table>
    <!-- /spacer table -->
    <table><tr>
    <td>Title of Menu #2</td>
    </tr><tr>
    <td>
    Item #1<br />
    Item #2<br />
    Item #3
    </td>
    </tr></table>
    <!-- /left menu -->
    </td><td>
    <!--- content of page -->
    <table><tr>
    <td>PAGE CONTENT</td>
    </tr></table>
    </td><td>
    <!-- right Menu -->
    <table><tr>
    <td>Title of Menu #3</td>
    </tr><tr>
    <td>
    Item #1<br />
    Item #2<br />
    Item #3
    </td>
    </tr></table>
    <!-- Spacer table -->
    <table><tr>
    <!-- Take out space between b & s -->
    <td>&nb sp;</td>
    </tr></table>
    <!-- /Spacer table -->
    <table><tr>
    <td>Title of Menu #4</td>
    </tr><tr>
    <td>
    Item #1<br />
    Item #2<br />
    Item #3
    </td>
    </tr></table>
    <!-- /right menu -->
    </td>
    </tr></table>
    </body>
    This is very incomplete right now, just add any formating to it and have fun.

    I do suggest you try some kind of SSI, as BonRouge suggested. But, as ray326 pointed out, most servers do not support server SSI. I suggest: 1asphost.com.

    ASP include file in same directory:
    <!--#include file="Path"-->

    ASP include in other directory:
    <!--#include virtual="path/path"-->

    (I have just written this code, please post any problems, and I will fix them.)

    Feel free to ask any questions or correct me.


    Hope I helped

    -- Kory
    -----------------------------
    Kory A. Adam
    My Site
    My Email

    Great Sites:
    W3Schools.com | W3.org | FormBuddy.com | ProBoards.com | Milenko500.com

    -----------------------------

  5. #5
    Join Date
    Jul 2003
    Location
    New York City
    Posts
    2,771
    Actually, since one would want to use Semantic coding, following the W3C, comply to accessbility LAWS, and make your content available to all browsers, an HTML example would be:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en" dir="ltr">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="Content-Style-Type" content="text/css">
    <title></title>
    <style type="text/css">
    <!-- 
    * {
    margin:0;
    padding:0;
    }
    #left {
    width:20%;
    float:left;
    }
    #content {
    width:59%;
    float:left;
    }
    #right {
    width:20%;
    float:right;
    }
    #left ul, #right ul {
    list-style:none;
    }
    -->
    </style>
    </head>
    <body>
    <div id="left">
    <h2>Menu 1</h2>
    <ul>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    </ul>
    <h2>Menu 2</h2>
    <ul>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    </ul>
    </div>
    <div id="content">
    Content
    </div>
    <div id="right">
    <h2>Menu 3</h2>
    <ul>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    </ul>
    <h2>Menu 4</h2>
    <ul>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    </ul>
    </div>
    </body>
    </html>

  6. #6
    Join Date
    Nov 2003
    Location
    Hyde Park, Ny
    Posts
    14
    Hi Koto,

    I had a simular problem to yours.
    What I did was I used an iframe. This allowed me to have one file that held my master menu list which I could place in a cell on the left side of my webpages.

    As far as scroll bars, if the window is resized the you have to have a scrollbar to compinsate for the reduce area viewed.

    Here is the code I use to do the iframe.
    <!-- row 2 -->
    <tr align="center">
    <td rowspan="7" valign="top" width="20%" bgcolor="#ffff66">

    <iframe src="../iframe/menu_all.html" width="100%" height="100%">
    </iframe>
    <br />
    </td>
    </tr>
    <!-- This is the end of the menu link -->
    The file name menu_all.html contains the links for the menu.
    This was my simple solution to the problem.
    SeeYa
    Ed

  7. #7
    Join Date
    Dec 2004
    Posts
    18
    BonRouge, ray326, ksource (Kory), MstrBob, TiYogi, many thanks for all your help.

    There are obviously several things for me to try out here, and all your suggestions are useful as far as I'm concerned.
    The main reason I'm building a website at the moment is to learn about web development (rather than me having a specific purpose for creating a site), so it's very useful for me to be able to try out a variety of approaches to the problem.

    It's also clear that I should start investigating other langauges and scripting methods - so far, I've only been experimenting with HTML and Javascript.

    Many thanks.

  8. #8
    Join Date
    Nov 2003
    Location
    Hyde Park, Ny
    Posts
    14
    To MstrBob ,

    In the code you post below is something I do not understand.
    That is the use of the <-- , I always thought this was a comment but here it does not act like a comment. So that anything inbetween the <-- --> was a comment.
    However I notice that if I change the margin:0; to margin:20; it in fact moves the marging over.

    Could you please explain this?



    Originally posted by MstrBob
    Actually, since one would want to use Semantic coding, following the W3C, comply to accessbility LAWS, and make your content available to all browsers, an HTML example would be:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en" dir="ltr">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="Content-Style-Type" content="text/css">
    <title></title>
    <style type="text/css">
    <!-- 
    * {
    margin:0;
    padding:0;
    }
    #left {
    width:20%;
    float:left;
    }
    #content {
    width:59%;
    float:left;
    }
    #right {
    width:20%;
    float:right;
    }
    #left ul, #right ul {
    list-style:none;
    }
    -->
    </style>
    SeeYa
    Ed

  9. #9
    Join Date
    Jun 2004
    Location
    England
    Posts
    2,972
    Originally posted by TiYogi
    In the code you post below is something I do not understand.
    That is the use of the <-- , I always thought this was a comment but here it does not act like a comment. So that anything inbetween the <-- --> was a comment.
    When using <style> or <script> elements you comment out the contents so as not to bothere incompatable browsers.

    @ Koto, Mr Bob's awnser is acurate in regards as to how you should should mark up any list.

    To awnser your original question,

    I would recomend includes, you can do these using ASP, PHP, SSI, Pearl, Coldfusion or whatever other server-side languages your host supports: check with them.

    I would not recomend <iframe>s or JavaScript includes to do this, they both bring up all types accesability issues and <iframe>s are a hassle for everyone, clients as well as developers.
    Disclaimer. (1) Whilst I will help you sometimes, if I feel like it, and my advice in relation to your actual question will be of good quality: my posts are to be taken with a pinch of salt. I will be sarcastic, deploy irony and include obscure cultural references for my own amusement without warning.
    (2) You will gain nothing from complaining, and if you try to argue with me then you will not win. No matter how noble your battle seems, I am still better than you, don't be an hero.

  10. #10
    Join Date
    Jan 2005
    Posts
    19
    To MstrBob,
    what kind of coding did you use there? is there any other language involved besides HTML?
    you use the <script> tag, is it javascript?

    i'm facing a similar problem and i also do not want to use frames. Where can i learn the language you use?

    Thanks..

  11. #11
    Join Date
    Jun 2004
    Location
    England
    Posts
    2,972
    Originally posted by Magma
    what kind of coding did you use there? is there any other language involved besides HTML?
    There is just HTML and CSS in there. Both of which can be learned at http://w3schools.com
    Originally posted by Magma
    you use the <script> tag, is it javascript?
    MOst of the time, not always. That's why there is the type="text/javascript" attribute that you ought to put in.
    Originally posted by Magma
    i'm facing a similar problem and i also do not want to use frames. Where can i learn the language you use?
    Mr Bob's post wasn't an awnser to the question, just a much much better way of coding a set of links.

    If I remember rightly, MrBob is a PHP man, like me, in which case go for http://php.net. The solution to this particular problem is covered using php in Bon Rouge's post.

    Incedently, you should go for the .inc file extension for the files that you because it has no MIME type, that way it doesn't confuse people/spiders that come accross it, although that doesn't really matter.
    Disclaimer. (1) Whilst I will help you sometimes, if I feel like it, and my advice in relation to your actual question will be of good quality: my posts are to be taken with a pinch of salt. I will be sarcastic, deploy irony and include obscure cultural references for my own amusement without warning.
    (2) You will gain nothing from complaining, and if you try to argue with me then you will not win. No matter how noble your battle seems, I am still better than you, don't be an hero.

  12. #12
    Join Date
    Jul 2003
    Location
    New York City
    Posts
    2,771
    Paul is right on the mark. The comments will comment out the style for older browser versions that don't support styling or scripts. It's something I just do without thinking anymore.

    PHP, a server side language, allows one to include files. However, keep in mind there are other languages available, including, but not limited to, ASP, ASP.net, JSP, and PERL. There is also something known as Server Side Includes (SSI) which, as the name implies, is a simple method for including files. If you're not doing anyother scripting, and your server supports it, I'd recommend this method, as it's very simple.

    On the other hand, using PHP or any other server side language, you can better make sure people aren't accessing your included files when they aren't supposed to. Let's say that you have a file, head.php, which you want to include. This file contains the top section of your webpages. But you don't want people accessing this file directly. There are many methods of preventing it. In PHP, one method I've seen used alot is:

    head.php:
    PHP Code:
    <?PHP
    if(SHOW===true)
    {
    echo <<<HEAD

    all your html
    goes
    here

    HEAD;

    }
    ?>
    Now, whenever you call the head.php file, you do this:

    PHP Code:
    <?PHP
    define
    ('SHOW'true);
    include(
    'head.php');
    ?>
    If someone goes directly to head.php, they won't get anything. This method is preferable over the .inc method, since using a text editor like Notepad will still allow people to use the file, whereas the scripting I provided won't allow them to view the file unless it's included.

  13. #13
    Join Date
    Jan 2005
    Posts
    19
    Originally posted by the tree
    There is just HTML and CSS in there. Both of which can be learned at http://w3schools.com
    HTML and CSS? i think i can handle that, although i still haven't gone through the CSS tutorials at w3schools

    Originally posted by the tree
    Incedently, you should go for the .inc file extension for the files that you because it has no MIME type, that way it doesn't confuse people/spiders that come accross it, although that doesn't really matter.
    Whoa, this i'm really lost. What is .inc, what is MIME?

    Originally posted by the MstrBob
    PHP, a server side language, allows one to include files.
    Is it similar to XML? since XML allows you to store data. Is PHP hard?

    Im plan2 host my site on 1 of those free hosting websites with subdomain, for example freeservers.com Thus im also not quite sure whether or not they allow free users like me to use PHP

  14. #14
    Join Date
    Jul 2003
    Location
    New York City
    Posts
    2,771
    XML is nothing like PHP. XML is a generic markup language. Markup languages merely store and define data. A scripting langauge is very different from a markup language. Javascript is closer to PHP in that they are both scripting languages, but what they do still are very different.

    A .inc is just a file extension. Much like .txt, .html, .jpg, .php, and the like. MIME tells the media type of a given file. This is important so that programs know if they can handle the type of file, and what type of file it should be treated as. For instance, if you create an XML file, how does the browser know to treat it as an XML file and not as a plain text file? The server sends the MIME type, normally as text/xml. If a browser encounters a MIME type it doesn't support, then it probably won't open it.

    CSS you should definately learn. If you're creating web pages and don't know CSS, you're probably using presentational markup. Presentational markup includes attributes like color, align, background along with tags like <font>, <b>, <i>, and <u>. These are depreceated. Which means that you should use them, because they don't stick with the purpose of HTML and are meaningless for different browsers. This is where CSS comes in. CSS should control all aspects of how your webpage LOOKS.

  15. #15
    Join Date
    Jan 2005
    Posts
    19
    c if i got this straight,

    content=text/html content=text/css and content=text/xml are MIMEs? coz it tells d server its dealing with either html, css or xml rite?

    How about this?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    what does it mean?must i include it in my html code?
    Last edited by Magma; 01-08-2005 at 10:08 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles