Web Display is different with each size of monitor? What do I do?

[Stephannie]

Hello,,

I have created some 21 pages of a website, all looked great when viewed by Dreamweaver. I used Photo Shop for image template and Dreamweaver for links, images and text.

I viewed and created site with my 19" monitor. Went to show a friend and she said the images and text I added in Dreamweaver are off to the right.

Take a look www.vetsglass.net/Auto.html
http://www.vetsglass.net/Welcome.html

What do I do to fix this problem? I want it so that no matter what size of screen one has it is viewed the same. And printing the page allows the full page and not cut off images and text. Please help.

I pray I don't have to start all over again.

Thank you so much for your input.
I appreciate it!

[DeadIntoIt]

Hi Stephanie,

Yes your web pages are going to look different on different size monitors and even the same size monitor with the screen resolution set at different sizes.

To maintain your layout, you need to build your pages inside a Table with a set width, not a percentage.

If you are using DreamWeaver for it's ease of use as a WYSIWYG page design tool, then your default new page settings should be changed. Or set yourself up a template page in DW with the table built in at the width you want. A lot of people set their standard width at 750 to 780 pixels.

There are of course times you will want to set the width at a percentage of what ever the screen ends up being, but not where layout is paramount.

But the ABSOLUTELY best recommendation I can give you is to take a couple of hours an at least get some basic HTML coding knowledge so you won't have these kinds of questions. Like about where to put your images etc.

You can get some very cool "Written in human being language" HTML tutorials here: http://www.pagetutor.com/

I've been doing this stuff for 10 years and started with Joe Barta's Page Tutor basic lessons and continue to think they are the best out there.

Stick with it girl. You'll get it working.

[D_Sims]

Actually tables can get complicated once you get into cascading style sheets and tables are best used for eating. create a container div i.e.

<div style="margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;padding:0;"><div style="width:700px;height:120px;background-image: url('file/where/images/are/stored.png') top;"></div><div stle="float:left;">side nav</div><div style="float:right;</div></div>
Something like I put above includes inline styles when you get more advanced you will link your pages to a style sheet. Trust me it all takes time and plenty of it but if I can do it so can you. Different browsers i.e. IE and firefox render styles differently namely padding and margins and also font-weight i.e. bold if you pick up O'Reilly's Cascading Style Sheets book you will be a wiz in no time. Not to pick on the before mentioned but tables just kill you with code.

[shadmego]

Actually tables can get complicated ...

... Not to pick on the before mentioned but tables just kill you with code.
They are actually also being phased out as far as standard-compliant code is concerned. I highly recommend learning CSS, as mentioned in the above post. It helps clean your html and seperates your content from your layout.

It may seem daunting at first, but it isn't that hard to learn. The most difficult thing about CSS is, again as mentioned above, learning how different browsers interpret the code and the work arounds needed to fix those issues.

~regards

[CafeenMan]

Take a look at my site: www.airfieldmodels.com.

I designed it originally for a minimum monitor width of 800. I'm caring less about that now because first, my site is free for all and I want it to look like I want it to look and if your monitor doesn't like it then you get what you pay for, and two, because monitors are getting bigger so eventually everyone will get with my program.

So anyway, a lot of people say don't use tables to lay out your site. They're full of crap. Tables are easy to use and you don't HAVE to define the width.

The cells on the left side of my pages have a defined width (in pixels) and the rest of the table springs to your monitor width.

I spent a lot of time on the web before I designed my site and one of the first things I realized I hate (beside useless flashy crap instead of content) is pages that have a strip of text down the middle and wasted space on both sides of it because it has a hard-coded width.

All you have to do is have the cell (column or table) that you want to spring to fill the screen as a default set to 100% width. Simple and trouble-free.

[sjlplat]

There's a slight learning curve to tableless design and CSS, but it's much more powerful than tables. http://www.ua-tracker.com is 100% valid full-screen tableless design. Tables were never designed for page layout.

[tradinga]

I have a similar problem to Stephannie. I wonder if one of you people would be so kind and look at my page to see where I need to improve it. As you probably can see, I am a very raw beginner.
www.tradingaustralianshares.com
Thank you

[shadmego]

I have a similar problem to Stephannie. I wonder if one of you people would be so kind and look at my page to see where I need to improve it. As you probably can see, I am a very raw beginner.
www.tradingaustralianshares.com (http://www.tradingaustralianshares.com)
Thank you

From what I've seen, this bit of code is your problem:



<table width="1141" border="0" cellspacing="3" cellpadding="3">
<tr>
<th width="219" scope="col"><table width="80%%" border="2" cellspacing="3" cellpadding="3">


Change the first table width to something much less than 1141, say, 100% or 98%. You should also change the 80%% to 80%.

I didn't look too deeply at anything else so you might have more coding issues. Also, when you change the width of the tables in the above code, you may have to go ahead and change the width of other tables as well.

~regards

[tradinga]

Thank you Shadmego, I will try that

Eric

[hybridgoomba]

It all depends on how big your screen resolution. Currently the standard screen res. is 1024x768. The smaller the screen of your monitor, the smaller the viewing as well. Basically, just make it in the size you think looks right, then let everyone else cope with the size you have it at.