Web design

[crill]

Another question here. this one about tables. Are they used for everything in layout or simply for sections that are updated often? for instance, as a basic web page I have a banner across the top, link buttons down the left side, and a section in the middle with "news and updates" that will have stuff added to it every couple of weeks. Do I have three seperate tables for each bit, or only one table in the middle for the News and updates section?

cheers
crill

[Banners]

If you can, avoid tables but use CSS and  tags for setting up the page's basic layout.

M@

[Banners]

That should say "DIV" tags.

M@

[crill]

But then how do I isolate the links on the left when I am doing design (without using frames.) Every time I try and add text to the right of the links it runs over onto the space occupied by the links when it goes to a new line. Even when I try and insert a table to the right of the links it won't do it and inserts it directly underneath. It's probably something stupidly simple but I don't know what.

[Banners]

I think you're misunderstanding tables and framesets (or I may be misunderstanding you - which is perfectly possible!)

The best way to have a three-'framed' page is to create three DIVs. Each DIV is, in effect, a rectangular container that you give dimensions to in your linked CSS file eg.

#leftmenu {
   position: absolute;
   top: 0px;
   left: 0px
   width: 120px;
   height: 100%;
}

#header {
   position: absolute;
   top: 0px;
   left: 120px
   width: 100%;
   height: 80px;
}

#bodypanel {
   position: absolute;
   top: 80px;
   left: 120px
   width: 100%;
   height: 100%;
}

...or something like that (off the top of my head - excuse errors).

Whatever HTML you then put in each DIV is then self-contained and will prevent wrapping.

M@

[Funt Solo]

Short question but long answer.

Many people do use tables for the layout of their page.  In fact, even professional sites often to this (probably as it's relatively easy to achieve).  

However, mbanners is correct:  tables should not be used to influence overall page layout, as that is not what a table is for.  It's for displaying tabular information.

One of the alternatives is frames, but let's not go there:  frames are a prime "usability crime".

The preferred method of page layout is use of CSS to position <div> elements, which become the containers for your content.  This is slightly more complex that using tables, but worthwhile learning.

If you decide to stick with tables, there's no reason to have a table with a single cell for the banner - just have the banner.  Then for the 2nd half of your page a single table split into two cells would do fine.  Plus, of course, you are free to place tables within tables within tables.  (Another reason not to use tables for page layouts:  it cna get messy quickly with all those td and tr tags all over the place.)

Here's a basic example of a site where the content is split up using div tags and css styling:  http://amenable.pwp.blueyonder.co.uk/divTest3.html" target="_blank">divTest3.html

[crill]

OK, I'm learning from the code of that page. Many thanks. Am I correct in assuming that where you have placed % for the width of Menu and Main that it doesn't matter the size of your screen, it will fill the same amount? Does that affect word wrap and the like?

[Art]

Yes and yes.

(well, technically 100% will fill the parent container, which in this case will presumably be BODY and so fill the screen. If you put your 100% DIV inside another DIV you'd get a different result)

[Funt Solo]

I must say, personally I'm not against using tables for page layout:  as sometimes they simply work better.

My rule of thumb for web design nearly always comes back to "what works?"

Example:  check out the following two examples, one built using table.  

Scroll down on each of them, and note that the "proper" method (div tags) causes a glitch whereby that div ends and the background colour of the body shows through, whereas in the table version this does not occur.

Now, this may not be a problem, but it might cause issues which are hard to resolve without falling back on hacky code (like in my previous example where I start messing around with the overflow property of the body).

Not only that, but the hacky version doesn't allow mouse-scrolling in Firefox - tut!

Summary:  if it ain't broke...

[Art]

It's the 100% height thing that gets me... you either have to use JavaScript or resort to tables - it sucks!

[crill]

I'm sort of picking this up. At least I thought so. Using the div tag page as an example, I'm trying to put another div tag to the right of Main Content. I've reduced main content by 10% so have a white area where I can put it. But it won't go. It keeps inserting itself at the top left and I can't link it with any css styling to reposition it.

I haven't even looked at the tables code to try and figure out the same thing.

[Funt Solo]

If IE would just go ahead and implement position:fixed that would be problem solved.  

[Funt Solo]

crill - try moving the position of the menu by adjusting the left property - you should see how it's working then

[crill]

Woo-hoo! Got it. Thanks. (Nice feeling of accomplishment:-) My next question is in relation to the percentage values. My banner graphic is a set height. If I put it into the div tag at the top and rezise it to match my jpeg, it will take away the percentage value for the height of the Menu, Main, and the new column I have put in. The header won't be 20% height any more. Obviously, the new height of the three dix tags below the header will be linked to how high the banner is, but does this mixture of percentage and px lead to problems?
crill
P.S. thanks a lot for this guys. I've been fumbling my way through this all weekend and am only now making headway.

[crill]

Just out of curiousity: how come the page looks fine in web design program, looks fine in Firefox, but when opened in IE it looks f***ked up. Have I messed it up somehow?

http://home.tiscali.co.za/~20081510/Hopefully_new_Index.htm