Changing Webpage resolution

The key point is to use % (relative) than than px (absolute) amounts.

You'd then have one cell of a table (if you're using tables) which will have a repeating graphic in it to make it appear as though the page is extending and contracting with the width of the page.

I'm not very good at explaining stuff so maybe somebody can give a more in-depth answer.

Heres the thought, you can make widths % related as daveyboy said, meaning for example for an 800px width, make it 100%... The design you are aiming for is what we call a "fluid" design, it doesnt necessarily look the same in different resolutions text-wise, but the layout, scheme and design looks exactly the same... Also remember the text size, it will increase in lower resolutions...

So for example you redesign the whole site with %, doesnt ensure it will work immediately, you need to take time to lock some areas, and decide which area is fluid... The second solution is the one you wouldnt like, which is to lock the width of your site to 800px and make it float around the background so that it centers itself at higher resolutions...

My guess is your using tables so a lot of the above doesn't apply. Using width="100%" in the main table will do what you want but also depends on your content and layout.

Can you give us a url or page to look at, would help us to help you better.

Welcome to TWF

Yeah let's not go down that route again, it's so boring

But isn't float a CSS command? And as he seems new to the business it's probably right to assume he's using tables.

actually im not pertaining to the float command but yes its a css tag...
its also a form of icecream... LOL!

Ok I admit I only glanced over your post Demonhale and put 800px and float together to think you were talking about CSS, sorry

800px = CSS
800 = html

If you try float a table you can end up with big problems.

The first post indicated little knowledge of HTML and Javascript, no CSS

lets give options then, incase he replies on this thread, but I suggest he makes the site fluid though... BTW, html understands sizes with or w/o the px...

Ok, wow, that is a lot of information. Yeah, I have no idea what CSS Styles are for, but I'm learning as much as I can while I work. Right now I just centered the table (yes, I'm using tables, didn't realize there was another option) and put a gray background to offset the white a little bit.

The problem I got with trying to use 100% widths as opposed to 800px is that it always ended up being a little more wide than the actual browser window. Obviously I don't want the users to have to scroll left and right on the homepage, so I actually had to put the main table size down to about 780px to make it fit. So much for WYSIWYG with Frontpage and Dreamweaver.

I did read something about the % Relative command the other day, but have no idea really what to do with it.

The site I'm hosting it on for now is just my school site. I add/remove links on the homepage while I try new things so the co-workers and important people can overview it. I add descriptions for what I've done, and the top link is always the newest piece I'm working on. It's not too good I know, but I'll make it "pretty" as I learn. Any suggestions on style would be great too though!

One last thing. I just found a 'mathematically random' javascript code that someone placed in a forum for my fading pictures, but for some reason it really limits my buttons on the right. They have to be an exact heighth to prevent spaces between them, or between the bottom border and the pictures. That's probably a lot tougher thing to bother with so unless it's simple I'll stick to what I have for now.

Thanks again!

Are you using 0 body margins? (done within the body tag), if you are are you setting cellspacing and cellpadding to 0 ? (also border to 0).

....
That can sometime give a tiny scroll bar. You say it works if you fix it at 780 (dont use px), so it can't be the content if that works.
If you can give us a URL (web address) we would be able to pin point the problem.

As for the buttons are they in table (td) cells? if so are they like this:

if they are (which editors seem to do a lot) put it all on one line, like so:

But you also mention bottom border, so maybe the images are being replaced with javascript? if so are the images the same size (width and height), if not they need to be. Again a page would be handy.

Good on you for getting in there and learning

Oops. I meant to post the website last time. Sorry about that. I'll read the post and reply again later. I have to head to class now.

http://faculty.sga.edu/cisy2000/slowther/

Centering your table, and letting it come up middle screen, at higher resolutions is the best bet. % may work fairly well for a single table layout, if you dont have your text margined. But not for nested tables. I would rather my site come up in the middle of the screen, at 1024 x 768 than to have the text scewed all over the place.

I always build for 800 X 600 because I wear glasses, and I figure others that do, appreciate my decision. The folks that use the high resolutions can see well enough to read the text if you use a slightly larger text at 8 x 6 something like 13 pt.
Another problem with % is your background gif if you use one, it will not resize, and looks really strange. There is really no site that will look exactly the same at different resolutions, no matter how you build it. It's always a compramise.

The gif I am talking about here, is one that would occupy only one row in your design. A one size fits all gif does enlarge.

I just went a took a look at your site in 1024 X 768. Like I figured; all the text is small, and crowded to the left, with a yard of white space. Believe me it would look better at 8 x 6, and let it go. You can always use a background gif, which will resize, behind your page to fill in the gaps on the sides.

Here is an example of one, I am currently working on.

View Web-Page

Edit: Another question. A little hard to explain maybe. Using Frontpage, suppose I have a 4-cell square table. How can I move the verticle line of ONE box, and not the other as well? In other words moving the borders independently of one another. It causes an entire row or column to be forced at the same heighth or width.

I will post an example of this problem on the site's homepage:

http://faculty.sga.edu/cisy2000/slowther

Thanks for all the replies. I'm actually just rebuilding the homepage because the last one I didn't like the layout of. I don't really know what I did, but so far it appears to be "fluid" as I was trying to achieve before. It is weird how merging certain cells or placing things different can cause it to being unproportional at different pixel sizes.

I hope to have the new homepage finished today. It's still not great, but a little different look at least. The link will be:

http://faculty.sga.edu/cisy2000/slowther/ahcs6.htm

If anyone cares to take a look at it that might be helpful. Thanks

There are several ways you could do the width thing. Set a fixed width on your table. like say 750. then set each td dimension to the width you want, all equal to 750.

But since tables are not totaly fixed, if you put to much info in one it will crowd the others. You can also make some gif. images the same color as your background to fill 1 row in each table dimension, and make it stable.

Text is not to bad, as it will wrap to the table dimension, without pushing the edges. But large images will, unless you are carefull to keep the size down.

So you may, or may not need the gif. images to keep it fixed.

I used a three row setup once wirh one at 10 px. wide row for a spacer. I made a 10px gif. the color of the background, and never had any trouble with it.

Or as you are going to be told use CSS, not tables.

I looked at the tenative site. I see you are using percent, you can never get a multi row table to size uniformely when changing resolutions. You just have to build it at one or the other resolutions, and let it ride.

To answer your last question you cant unless you use rowspan or colspan.
The link in my signature has a couple pages on tables, one on layouts.

The problem you had with the random javascript causing the buttons to be spaced is because of the height of the random images. I watched them for a but and it seems Tina is the tallest one. Brian and Linda are right up there thou.
I don't get a horziontal scroll at 800x600 with either layout.

For a design like this I personally would use a set width (760-780) because of the content or lack of it. Seeing this on a wide screen would give to much white space.
I have several sites with fixed width and even the heights are limited (from the content) so they just sit in the middle top of the screen on big resolutions.

Your site could also be one that could be printd off (parts of it), so less images maybe the key. On the old/new pages you gave there is no text at all, search engines love text like the cookie monster loves cookies . The fade in and mouse over buttons makes for slow loading on dialup. Maybe add the fade in to it's own page, a 'who are we' page, that way the mouse over buttons would of already loaded from other pages.

You said you had dreamweaver and frontpage, do yourself a favor and only use dreamweaver, frontpage is bad

A couple of notes for you:
... is auto aligned center and bold (you dont need to use align center in p tags or anything else)
When using width in (and ) tags making them equal over 100% can have weird effects (can go smaller)
You only need to use width in (and ) tags in the first row, having different widths will sometimes take the first set, sometimes the last depending on your content width.
Height only needs to be used once per row but if border isn't set to 0 (and cellpadding, cellspacing to 0) the cell will be a couple of pixels taller has everything has a default margin (and they vary on different browsers)

Making a site 770px wide will allow for 800x600 and above but takes into account the scroll bar. Ideally you will want to have a fluid layout that expands but if you must use a fixed width then this is the width to aim for.

For more info on liquid layouts (non-table based, sorry) you could look at some of these:

http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
http://www.tjkdesign.com/articles/3cols/3cols/2.asp
http://www.tjkdesign.com/articles/3cols.asp
http://www.alistapart.com/articles/negativemargins/
http://css-discuss.incutio.com/?page=AnyColumnLongest
http://positioniseverything.net/articles/jello.html
http://www.positioniseverything.net/articles/onetruelayout/equalheight

Many of these are quite advanced techniques though and are not meant to work with table designs.

-Jim