Hi all,

I have been given a project to do in college and I have to come up with the best way to structure a website.

I have been given 2 different screen shots, one being a main page and another being a menu page. I think

that I will use CSS for most of the building and positioning of content but I wonder should I use CSS in

conjunction with tables.

For the header, navigation and footer I will use CSS, but I am unsure an how to approach the centre of the

page, i.e. the bit that will change from page to page. For example, should I use layers and position them in

CSS with absolute posiitoning etc... or should I use tables. I know that there are cross browsers issues for

different reasons. Any advice would be greatly apprieciated. Here are the screenshots:

Home page: http://www.materialprojects.com/csi/3/cover.html

Inside page: http://www.materialprojects.com/csi/3/inside.html

Thanks in advance!

No need to use tables. An absolute positioned DIV with left, top attributes and a fixed width and an auto height would work fine.

Agreed with most of what funkdaddu said. If you use a container div of a fixed width (about 760 pixels), however, you won't even need absolute positioning at all (except possibly for that Turner logo...it might make your life easier).

I dig your layout, too.

Thanks for replying,

I am going to place everthing in a container div of fixed width, which will hold the header, nav, content and

footer divs. The header, nav and footer generally will not change but I am wondering how I am going to

position elements in the content div.

As you can see in the links the content overlaps a bit, so its hard just to do it with column layouts.

http://www.materialprojects.com/csi/3/cover.html

http://www.materialprojects.com/csi/3/inside.html

I'm a bit concerned about the layout. Not sure about the "Services" & "We work smart" parts of the inside

page. Let me know what you think.

I'm guessing your concern with the overlap is becasuse the text and images look like they need to be in the same place horizontally in some places.

You can use z-index with positioning to have the text sit on top of the images and still let the images show through.

Cool Thanks,

I have come up with this CSS style, For the "Services" bit I would keep this as a JPEG and then HTML code the "We work smart" piece.

Would you recommend putting the "We work smart" piece into a table and adding padding and an image for the hard hat photo. Or would it be better to leave out tables and put the grey background colour into a background image and coding the text over it and adding padding or something similar.

You won't need to use a table at all. For the 'We work smart' text you could set that up in several ways.

One easy way would be to have it in an ordinary paragraph, but limit the width of the paragraph so that it can't extend into the area where you place the image to the right. Or instead of limiting the width you could give a margin-right to the paragraph. You might still want to set a width on the paragraph even with the margin-right. If you do either I'd use css positioning on the image.

Another way and perhaps the better way would be to have both the text and the image enclosed in the same div. All you'd have to do then is use float:right on the image and give it some margin-left to maintain the space between the left. I think you'll need to have the code for the image come before the code for the paragraph in order for the float to work right.

For single color backgrounds you almost never need to use an image though you could as you suggested. To add a solid block of color I create an empty div or maybe one containing a single non-breaking space and then set the background-color and the width and height of the div. This has the advantage of reducing the file size so the page loads faster.

You still need to use images to create the single color backgrounds for the curves at least for now. Firefox and Opera and really any browser that adheres to css standards can take advantage of the border-radius property to create curves in borders and backgrounds. I can't wait for IE to catch up so we can all use it regularly.

Thanks Van Gogh thats very useful info

Glad to help. I'll keep checking the post in case you have more questions