friendly layout?

[mic2020]

Thankyou everybody for your knowledge on setting up my website. I am however having problems with the table layout, I have set tables before, but I have only ever designed for a 800*600 format, not 1024 * 768, now I am finally making the move and designing for both.

In this case I have started with tables and used the percentage feature to auto size my tables, however I am using dreamweaver 4. I set the layout table and use the 100% on that, then I put my layout cells to divide my page (navigation, etc), THIS is where my problem lays, when you resize the browser window the page looks fairly messy.

Can anybody advise on the best ways to layout these tables and cells to make sure they work the best, good advice or a really good tutorial is what I need, any suggestions?

You can check out the mess so far at:

http://www.digiboxnetwork.com

By the way the site you are looking at is just beta, no links work yet or anything.

Thanks for any help
Michael Prosser

[Technosailor]

I'd still design for 800x600. Restrict the table width to 770 pixels wide. You can center the table if you wish, but I'd keep the table with all the content at 770 px. That way you are safe.

Sketch

[ollspin]

770px is too wide - check this out: http://hotwired.lycos.com/webmonkey/...html?tw=design

[Technosailor]

what do you mean it's still too wide?

Sketch

[pip]

I realise that this is the wrong way of approaching a situation like this, but if you're interested you should give it a bash.

What I normally do is set my table witdh to 100% then the side that I want to keep a specific pixel size I specify in pixels and make sure that there is an image place holder in the cell of the same size. Then place a 100% width in the cell that should stretch accross the whole page. There's a slight bug doing it this way in Netscape, however if you have content within the cell to be stretched, it works fine.

Just to make sure I've mentioned it, this is not how it should be done, but I normally get it to work on all browsers

<TABLE BORDER="0" WIDTH="100%">
<TR><TD WIDTH="100">
<IMG SRC="pixel.gif" WIDTH="100" HEIGHT="1"><BR>
</TD><TD WIDTH="100%">
<BR>
</TD></TR>
</TABLE>

[Technosailor]

thanks for the tip. I am reworking allnations-durham.org to be DW4 designed/cleaned/etc and not so FP2k intensive. Once that is done, I will be redoing livingpages.net with the same concept of cleaning, reworking and editing glitches. These tips are great.

Sketch

[techie2003]

I just design for about 770 and just let a background tile in one direction, either left or right. And it looks fine in most browsers/platforms.

Thought this prolly isn't a great example, here's one that I did a while ago in a big rush.

Dang, now I gotta stop doing 770 and start going smaller, prolly 725 just to be safe...

[JMulder]

Hmmm, I am using 750px wide =\

[beachball]

hmmmmm, the problem i find is that when tryin' to desgin a site with percentages then u have to be very conscious about the images you are gonna ne usin' because they can often be too small and so leave big gapgs, or too big and pull your sites design all over the place leaving you with an almightly mess

With %ages tho you just have to accept that you can't design a site for every resolution unless you go out of your way to make different images and check it at each res to see specific probs, but if you gonna do this then might as well do 7 different versions of the site, which would be laborious unless you are very database reliant in which case onece you have got the templates for each site sorted then the content is just read in to that page and only have to change the data in the database...

some food for thought,
beachball