talkmagic.co.uk

Hey all, I have finished a site that i have been working on, but I have a problem. How can I get it to resize on smaller monitors? I have a 19" screen but when my friend goes to my site on his pc, it doesn't seem to fit the page. I am using frontpage [I know, I know. Never got on with dreamweaver] and all of the content is in tables.
Is there any way that I can get it to automatically adjust to any monitor size?

Thanks very much =)

Delude wrote:Hey all, I have finished a site that i have been working on, but I have a problem. How can I get it to resize on smaller monitors? I have a 19" screen but when my friend goes to my site on his pc, it doesn't seem to fit the page. I am using frontpage [I know, I know. Never got on with dreamweaver] and all of the content is in tables.
Is there any way that I can get it to automatically adjust to any monitor size?

Thanks very much =)

I seem to remember being taught about liquid designs or something by that name by a friend but i can't for the life of me remember any coding or the like. I'm pretty sure its a code that randers the website depending on what settings of browser it is being browsed on. Saying that i may well be dreaming of things again, but that comes to mind from somewhere

Hope that Helped, and if it didn't Google is your friend

PS. Tables are the devil!

Fixed layout design always contains items in boxes/tables/DIV's whose measurements are in pixels or 'absolute' values.

To make a 'liquid' layout, use percentages.

i.e. a centred table with a width of 700px will ALWAYS be 700px sitting in the middle of the screen. A centred table with a width of 80% will always fill 80% of the screen.

(I use tables as an example. Most newer sites use CSS Divs, same principle)

Inside a table, elements such as sidebars can be constrained to a particular size, wheras the body cell can be the flexible one.

A simple source for a FIXED table would look like:
<table width='700px'>
<tr>
<td width='180px'>This is the sidebar</td>
<td width='520px'>This is the body text content</td>
</tr>
</table>

However, a LIQUID layout table could look like:
<table width='90%'>
<td width='180px'>This is the sidebar. However wide the main window, it will always be 180px wide</td>
<td>This is the content - we haven't specified a TD width, so it will always fill the remaining space within the table</td>
</tr>
</table>

It's important to understand div or table constructs and absolute (i.e. fixed) measurements and variable (i.e. flexible) measurements.

As an example...
I've done a sample set of tables at:
http://www.nothingupmysleeve.co.uk/layouts.html

Experiment with making the window narrower and wider to see the effects, I've done 3 tables. Take a look at the source code to see how it's achieved.

Thanks very much I'll copy that somewhere so I can refer back to it.

Now edited, with an example

Wow, so i did remember right!