Screen resolution issue

G

Guest

I have designed a page for a client who has purchased a template, so I only
had to make minor changes to the text and layout.
I have published the site in FrontPage using page size 989 x 501. My screen
resolution is 1024 x 768 and the page looks fine. When the client opens the
page with a different screen resolution, the page is distorted.
I know that tables set to a fixed width solve this problem, but how can I
change that if I am using a template and had no input in the initial design?
Is there a way to modify it now?

Thanks a lot
Simona
 
M

Murray

Is there a way to modify it now?

Yes, but it may be much more than you want to tackle. And by the way,
screen resolution tells you nothing about the size of the browser viewport
that's open on that computer, and it's the latter value that is causing you
grief. For example, Mac users never use full-screen browsers.

To fix the page you'd have to do the following -

1. Select a minimum browser viewport size that you want to support
2. Go through the template's code to find any page elements that will be
wider than this
3. Adjust the HTML and the graphics so that they fit within your selected
width

This would be quite a task for someone who is not well comfortable with HTML
(and perhaps CSS).
 
G

Guest

Thanks for that. I am not that comfortable with HTML so I wouldn't attempt
anything. How can I find out the browser viewport that my client is using?
I have set my page size in FrontPage to 989 x 501. What is the standard I
should be using? Would that make any difference?

Thanks again
Simona
 
M

Murray

How can I find out the browser viewport that my client is using?

What about your client's friend, or customer 1, or customer 2, etc.?

The point is, you cannot assume any particular viewport width. You must
select a minimum width, and design/layout the page(s) to fit that width.
They will be presentable in all wider viewports, and may only look strange
in narrower ones. However, if you make your page have a fixed (not
flexible) width, then the only thing that will happen in narrower viewports
is that you will get a horizontal scrollbar.

Read this -

http://www.thepattysite.com/window_sizes1.cfm
I have set my page size in FrontPage to 989 x 501.
Click to expand...

I don't think that this does anything other than change the way the design
view appears on your screen. In other words, this setting adds no markup to
the page.
What is the standard I should be using?
Click to expand...

Most of the sites I build are fixed width, centering pages. I usually
choose ~760px for that fixed width. Sometimes I go wider, depending on the
demographic I expect to be using/visiting the site. An example of such a
page would be here -

http://www.neapco.com/n_why-neapco.php

a page where I have relaxed that 760 width a bit (a tiny bit) is here -

http://www.madisonconcrete.com

or here -

http://www.agexonline.com

Show us your template and perhaps the job will be easier than I have
imagined.
 
M

Murray

I think you have a problem with absolutely positioned elements remaining
static on the screen while your tables center.

This is but one of the reasons why using layers as a layout method is a bad
idea. Who built this melange of Dreamweaver, Microsoft Word, and FP?
 
G

Guest

The template was purchased by TemplateMonster.com by my client. I made some
changes to it because I couldn't use the template as it was.
What should I do? I haven't had this issue with any of the other pages I
built.
Would it be easier to just scrap the template and re-create the page from
the beginning?

Thanks
Simona
 
M

Murray

Would it be easier to just scrap the template and re-create the page from
the beginning?
Click to expand...

I would have never bought from Template Monster in the first place. All of
their stuff is low-order stuff. None of it validates, and many of its
templates contain illegally used stock images, according to a recently filed
flurry of suits against it and its spawn.

Certainly it would be easier for me to rebuild it from scratch - I don't
know about you. But you can try this -

Change this -

</head>

to this -

<style type="text/css">
<!--
body { text-align:center; }
#wrapper { text-align:left; width:760px; margin:0 auto;position:relative; }
/* 760px will display on an 800px screen maximized browser window without */
/* horizontal scrollbars. */
-->
</style>
</head>

change this -

<body ...>

to this -

<body ...>
<div id="wrapper">

and this -

</body>

to this -

<!-- /wrapper -->
</div>
</body>

and see if that helps.
 
G

Guest

Haven't tried it yet, but you've been so helpful! I'll let you know if it
works......

Simona
 
G

Guest

Bad news..... that code moves the logo + name and all the menus on the right
but it doesn't fix the issue.....
 
G

Guest

Bad news..... The code moves the logo + name and all the menus on the right,
but it doesn't fix the issue....
 
G

Guest

Bad news....it didn't work. The code moves the logo + name and the menus to
the right of the page. Any other ideas?

Tks
Simona
 
M

Murray

It is possible you didn't implement it correctly - it should work. Can you
post a link to your page with the changes?
 
M

Murray

You layout is substantially complicated by the ancestry of this page -
coming from Word with its WordArt is a problem. For example, <span> tags
are used as if they were block tags - they are not. While this is not a
tragic event, it is a fundamental mistake in the layout design of the page.
And it results in elements that cannot be seen in browsers other than IE.
Take a look at your page in FF, for example....

To really fix this for you, I'd have to start with valid HTML - sadly we are
a long way from that yet.
 
G

Guest

Don't worry about it, I think I will just build the page again. It shouldn't
take me that long.
You've been very helpful, thanks a lot

Simona
 
M

Murray

For what it's worth, adjusting the width of the #wrapper div to correspond
to the width of the inner content (704px) gives a nicely centered page.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Screen Resolution 2
Screen Size 3
How web site can be viewed in different screen resolutions? 6
View>Page Size? 4
View>Page Size? 2
fitting the content of page to screen resolution 1
Resolution problems 2
Page formatting 3

Top