How do I layout a page? I need to do this.

[midi25]

Hi I have a header gif and a footer gif. They are 1024px wide. I want the header at the top and the footer at the bottom and no overflow.

I will be using a <table> for my body content.

What is the best way to do this in css?

Thanks

[ahmedtheking]

Ok what i recommend is that you set your layout like this:

layer (header)
table (main stuff)
layer (footer)

NOTE: make sure the body has margin 0!

Make the layer for the header (we'll give it an id of header yea?) is like this:

#header {
top:0 /*so that its 0px from the top!*/
position: relative; /*this is so that your layout can be centered (if you want!) */
margin: 0 auto 0 auto /*This will only work in XHTML 1.1! */
height: whatever the header is;
width: same as;
}

do the same for the footer, but change the top to bottom and keep it at 0!

Make sure you're main table has a position of relative because this will push the footer down to the bottom!

Tell me if this dont work or if you need more help!

[ronin]

I will be using a <table> for my body content.

A <table>? Really?

Why don't you use a couple of <ul>s?

Or a mix of <blockquote>s and <img>s?

If you're this far ahead with css and ready to take the next step you really might as well really go for it and lay out the whole page with absolute positioning, relative positioning and floats.

I know it seems a bit daunting at the start, but you'll thank yourself later on for taking the plunge.

Lose the layout tables. Seriously.

[ahmedtheking]

True, I agree with losing the tables, but at the beginning, when i first made the jump, i modeled my sites with tables and then slowly converted to CSS! If they start off with main layers and a table for the main content, they can see how the page will be put together and then go for it!

[midi25]

So if I loose the tables how do I lay out my content.

do I use divs and just postion them absolute. etc?

Thanks

[ahmedtheking]

Well it depends what kind of content you have! For example, you can make a list for a main/sub menu and then edit it in CSS!

Check out my site source code (www.firestartermedia.com) cos it sounds like ur after something like that! if not, check out www.#*$!.com or www.projectseven.com. They have good CSS tutorials!