Forum

[bobat6]

Hi

I have created my first website shop after learning from this site. I am using Dreamweaver for creating the site. The problem I have is that I have created all the pages (15 or so) using 1440 x 900 default resolution I have set-up on my PC. Unfortunately, when I check my site on 1024 x 768 resolution which I believe is the most common resolution around my web pages do not fit the monitor and you have to scroll horizontally. I seem to have missed some vital point somewhere in the design tutorial!

In Dreamweaver on the bottom status bar you can select the window sizes but none of the sizes are highlighted for me to downsize because I understand you cannot downsize once it is maximised.

Is there any quick and easy way to fix this problem so that my web pages are always shown full screen regardless of monitor size? It will be a huge task if I have to start amending the content on each page.

Please see my site www.ukcarrierbags4u.co.uk to see the problem.

Any advice will be appreciated immensely.

Many thanks
Bob

 

[markling]

Hi Bob,

I've got bad news for you. Unless you've used some sort of Dreamweaver template (where you change one page and it affects your whole site) I'm afraid you're going to have to do it all over again.

The problem is that you've created your site using tables, and you've explicitly specified the width of pretty much every single table cell inside that table. To make the page fit into a smaller resolution you'll need to go through and change the width of all those cells to something smaller (pixels) or something flexible (percentages).

I know its a bit late for this piece of advice, but you should really be designing your sites so that if problems like this pop up, you don't need to rejig every single page.

The way that we usually do this is by using CSS. You can already see some CSS in the top of your page (Dreamweaver meaningfully calls everything "style1" "style2" etc), but what you need is an EXTERNAL stylesheet that drives the style for your whole page.

So then what you do is go through your layout, remove all specified widths, and in their place put this:

<td class="sidebar">
<td class="maincontent">
<td class="footer">

And so on.

Then in your stylesheet you can say that you want the "footer" to be X-width, your sidebar to be 30% width, your maincontent to be 60% width, etc.

That way you can change one stylesheet and affect your whole site.

You might need to hunt up some tutorials on this to make it really clear. I can't really give you a full tutorial in this forum :) But this guy does it pretty well:

http://www.yourhtmlsource.com

The other option is to go through every single page on your site and change the sizes manually :)

Good luck!
Mark

 

[bobat6]

thanks Mark, I had guessed this was not going to be an easy fix. I'll re-vamp using CSS and percentages to get that flexibility...

I'll contact you again once I have done it and you can check and critique the site for me.

Regards
Bob