Using tables, etc as alternatives to frames

Discussion in 'HTML & Website Design' started by patwa, Jul 20, 2006.

  1. #1
    Hello all. I would greatly appreciate any help or advice that members can give.

    Up until now, I've built sites that use a PHP include to include an HTML file with a horizontal bar (table) with links in the cells that lead to the other pages of the website. This bar is included on every page.

    However, I would like to do a similar thing, but with a vertical bar. The thing is that the bar does not extend all the way down the page. There are only a few links in the bar, taking up a few rows and the rest is blank. But I am not sure how to do this.

    I am using Dreamweaver as my Web Design application, and in a new page I first created a table with width 15%, wrote the headings for the links, then wanted to create another table to occupy the remaining 85% as the main body of the page, but this doesn't happen, and the table is created aligned to the left of the page UNDER the first table. Also, I'm not sure how to get it so that it looks good with just the links one underneath the other, and then the rest of the table/bar blank. At the moment, with paragraph breaks between the links, it looks rather too spacious and not very nice. And if I centre align the links, it gives less space on either side, the the links are uneven and it doesn't look right either.

    I'd be grateful if you can suggest anything. I haven't use Javascript or DHTML much so am relatively unfamiliar with that.

    Cheers and take care.

    Hussein.
     
    patwa, Jul 20, 2006 IP
  2. kaethy

    kaethy Guest

    Messages:
    432
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Forget completely about frames.

    You can't have 2 tables next to each other, instead you would have one table with 2 cells, with the left cell at 15%. See this tutorial on flexible tables
    Flexible Tables

    But really you need to learn CSS, and get away from tables. Which version of Dreamweaver do you have? The latest, Dreamweaver 8 has good support for CSS built in.
     
    kaethy, Jul 22, 2006 IP
  3. patwa

    patwa Peon

    Messages:
    61
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hello and thanks for the reply. As you can probably guess, I don't have much experience with CSS, and formatting in general is a weakness for me.

    I'll definitely take a look at your link on Flexible Tables. As I hinted, I never even knew that you could do such formatting without tables, so I'm completely in the dark here.

    Yes, I have Dreamweaver, and the latest v8 as well.

    Thanks.

    Cheers and take care.

    Hussein.
     
    patwa, Jul 22, 2006 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    Are you wanting 2 columns of equal height? Forgive me, but I usually ignore threads where table layouts or frames are mentioned, and I may misunderstand what you want.

    When all else fails, Google is your friend.

    cheers,

    gary
     
    kk5st, Jul 22, 2006 IP
  5. patwa

    patwa Peon

    Messages:
    61
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Basically I want to do the traditional layout with a navigation bar on the left and the content panel filling the rest of the page. I'll also have a banner/tagline at the top and acknowledgements at the bottom.

    I'm really asking for help on the best way to do this. I only mentioned tables and frames, as I'd heard frames are now going out of fashion, and tables were the only other way I knew of doing this. But CSS seems to be able to do it if I can work out how.

    In dimension terms, the navigation panel would occpy about 15% of the width of the page, with the remaining 85% being the content panel, with a few pixels gap between them so that the content doesn't run together.

    Cheers and take care.

    Hussein.
     
    patwa, Jul 22, 2006 IP
  6. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #6
    Did you follow the link I gave you? From there, go to the home page which is a similar layout. If neither of those pages are similar to what you want, look at the links in the Google search link.

    Get something started, and we can help you out.

    cheers,

    gary
     
    kk5st, Jul 22, 2006 IP
  7. TechnoGeek

    TechnoGeek Peon

    Messages:
    258
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Hello, patwa.
    You can use something like the following:

    <table width="100%" border="1" cellpadding="1" cellspacing="2" summary="">
    <tr>
    <td colspan="2">Header</td>
    </tr>
    <tr>
    <td width="15%">Links</td>
    <td width="85%">Contents</td>
    </tr>
    <tr>
    <td colspan="2">Footer</td>
    </tr>
    </table>

    If you don't want the links to be too spaced, you may use the line break tag <BR> instead of the paragraph tag <P>.
     
    TechnoGeek, Jul 24, 2006 IP
  8. Gordaen

    Gordaen Peon

    Messages:
    277
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #8
    You can very easily do this with CSS. Just divide the sections into divisions (div tag).

    <div id="banner">top stuff here</div>

    <div id="navigation">Nav links here</div>

    <div id="content">Content...</div>

    <div id="footer">You get the idea...</div>

    Then, using styles, set the navigation to "float: left;" and the footer to "clear: both;" That should give you a pretty good starting point. Do not use tables, because tables are for tabular data, not layouts. To correct a point above, yes, you can have two tables next to each other. It's just not how they line up by default.

    I'd suggest using unordered lists for the links, styling as necessary, rather than new paragraphs or line breaks as mentioned above.
     
    Gordaen, Jul 24, 2006 IP
  9. slickricky

    slickricky Active Member

    Messages:
    240
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #9
    To clear up Gordaen's post a little bit it would be completely coded like this, (sorry about the image, my program froze so I print screen instead of typing it out again.)

    [​IMG]
     
    slickricky, Jul 24, 2006 IP