What resolution do I create my page around?

[Bob]

I have a very confusing problem which from what I hear takes a pro to
figure out and it's something difficult to fix which is why you need a
degree to build a webpage.

First of all I'm trying to design all my pages to have a green
background for the header with the company name/logo, then on the left
side is the same green background with the hyperlinks. To the right will
be each individual page with a white background. As you click on the
hyperlink on the left, the middle will change accordingly. To do this,
I'm using one big cell then using smaller ones inside of them. I learned
this from you guys from a past messages.


Now when I create the page in FrontPage, it looks one way. For purposes
of discussion (and to make it easier to explain) the end of the
hyperlink is under a certain part of the logo above. When I look at it
through IE, the hyperlink is way past the logo. Why am I formatting it
one way in FrontPage to have it look totally different (with the same
resolution I used when creating it) through IE??? When I change
resolutions, it moves it all around as well.


My first question is:

I thought the cells would take care of this and wouldn't allow things to
"move around" on their own. So if I went to 800x600, it would look
normal (if that's the resolution I created the page in), then 1200x1024
(or whatever the resolution is) it would look exactly the same, only
everything within the cells I created would be all on the left while the
remaining part of the screen is filled with blank area.

My second question is:

When I hold down ctrl and move the scroll on my mouse up/down, it
changes the font size. Not thinking about this, I went to work today and
looked up my webpage using 800x600 and found the hyperlink was beyond
the border on the left cutting off part of the name. So now I have to
worry about all the different resolutions and who has what font size???
Someone said I may be able to set something in FrontPage so everyone who
looks at the webpage will all see the same thing regardless??? As in
some check box that will allow it to be viewed as a default or something
like that?? He wasn't sure himself,but thought it may have it.

Any help would be appreciated.

 

[Ronx]

The FrontPage design mode is not a browser, and Preview is not a full
browser - it will be different to what you see in other browsers. If
you compare IE, Opera and FireFox you will see differences - WYSIWYG
should be WhatYouSeeIsNotWhatYouGet

You cannot control the font size used by your users. You cannot even
control the font face seen by your users - these can be overwritten by
their browser settings, which *you* cannot control. All you, the page
designer, can do is *suggest* (through CSS or font tags) which font
and which size to display. So yes, you do have to worry about
different viewing scenarios.
But you do not have to worry about different screen resolutions. The
screen resolution only sets the maximum size the browser is opened at;
many users with high resolution monitors open their browsers in a
small window - that's another problem for you, and do not forget those
users with the browser sidebars (such as Favourites in Internet
Explorer) opened.

To solve your left column problem, make the hyperlink column a fixed
width, leaving enough space for the text to grow as font sizes grow.
and either make the overall page a fixed width, centred table (760px
will suit most situations) or 100% wide. The left column will be
fixed (fixed width column, say 150px depending on your hyperlinks) and
do not give the right column any dimensions, allowing this to grow or
shrink with the browser.

A link to the page will help to produce more specific solutions.
Also see http://www.thepattysite.com/window_sizes1.cfm for more
advice.

 

[Murray]

Here's an interesting essay on this issue -

http://www.thepattysite.com/window_sizes1.cfm

 

[Bob]

In a previous message, it said a link to the webpage would produce more
specific answers.

I'm assuming a link to the page I'm working on. It's not completed yet and
my goal is to make all the pages look like this one but everything in the
white section will have the new page info. Any input would be appreciated.

Here is the link: https://home.comcast.net/~bostonpeter73/

 

[Ronx]

Remove the height attributes from the <table> tags: this is invalid
HTML, and tends to be ignored by browsers anyway.

There is one table with a width of 110%. Change this to 100%. This
table contains the hyperlinks in the left column, and when the page
shrinks down the hyperlinks are cut off, rather than stretching the
table as they should.

This cell:
<td width="100%" height="1">
</td>
will never have a height of 1 pixel. It will either be about 19px
(the height of a space character in the font being used) or totally
collapsed, depending on the browser's interpretation of the mark-up.
IMO remove the cell completely, or place a transparent .gif with
height set to 1px, and make sure that <td><img ></td> are all on
the same line with no stray spaces. Setting the width of this image
to match that of the logo will also line up the left column with the
logo.

Set the vertical alignment of the table cells that contain tables -
this will move the content to the top of the page, looks better in my
opinion. Removing the cell height attributes will also have a similar
affect.

The space bar is not a placement tool - use the Left-Right-Center
buttons to align text, not the space bar - spaces will take up
different amounts of room in different browsers.

 

[Murray]

and tends to be ignored by browsers anyway.

Actually, it'll work pretty well on that page since it doesn't have a
doctype, and is therefore being rendered in quirks mode. Most browsers in
quirks mode do a pretty good job with table height. It's the other stuff
they have trouble with! 8)

This cell:
<td width="100%" height="1">
</td>
will never have a height of 1 pixel.

Actually, this is the context of that cell -

<tr>
<td width="100%" height="1">
</td>
</tr>

and it will, indeed, have a height of 1px since there is no space character
within the cell, and no other cells on that row. Check it by giving the
table a border, or by giving that row a background color. If there were a
space character in there, then you would, of course, be right.

I agree with your other recommendations, though....

 

[Bob]

I am not sure if I implemented everyone's suggestions. My problem is that I
do not know HTML programming and all the suggestions have been in HTML
talk. I only know to add a cell on the main page and stretch it out with
the arrow key(s). I know, I'm new at this hahahha

My goal was to make the page so no matter how high the resolution gets, the
page is always either centered or all on the left. The way it is now, if
you increase the resolution on the monitor, the page stretches out as far
as the screen will allow it. I used cells and blank pictures to try and
avoid any resizing. But the top border will stretch out regardless along
with the rest of the page. I thought it would look better if I made it
remain centered or all on the left no matter how high the viewers
resolution is at. Any ideas for this problem?

The other slight problem (not as important) is these cells are killing me.
If I change font size by using ctrl/scroll on mouse while viewing the
entire page (through IE and NOT the FrontPage viewer), the pictures will
move a little. I figured I could avoid this by stretching out the cell(s)
they are in, but when I do that, I put a space between the logo on the top
left and the border on the left side of the screen. When I try to increase
that, I accidently increase the other cells, then I go back and forth.
Since I am getting mixed up on which cell is which, I can't even manually
type in what I want. What a pain in the butt. I think I have the issue
fixed though I'm not sure if I just put a bandaid on it or if my main page
actually looks decent enough.

If someone would like to view the main page and give me some input, I'd
appreciate it. The other pages are not completeted yet. But I plan on using
the main page as a template and placing everything I have in the page so
only the inside information looks like it's changing while the border on
the top and left hyperlinks all stay intact.

The link is:

http://home.comcast.net/~bostonpeter73