Consistent pages on viewers' PC's

Peaceflows · #1 (**permalink**) 06-22-2009, 06:18 PM

I'm trying to find out how i can make the pages of my site appear of the same consistent size (relatively) on other viewers' PC's. I have noticed that they appear about right on one screen -- from left edge to right edge, but are shrunk somewhat towards the middle on another person's system, and are expanded well past the edges on someone else's. Is there a way to control this so that viewers don't have to scroll around to get to the edges? And for the image to be large enough that there isn't a lot of wasted space on both the left and right sides of the screen?

Thanks!
walt

Dee · #2 (**permalink**) 06-22-2009, 07:26 PM

I saw this answer on another forum:

One idea is to create a page with an absolute width in pixels instead of a relative width using percentages. The contents will appear in a page as you would scan a physical piece of paper. You would choose the most common resolution 1024x768 and make the page fit that width. Anyone using a smaller resolution would have some horizontal scrolling. Anyone using a higher resolution would see bigger margins on the right (if left justified) or both the right and left (if centered).

The second idea is to use JavaScript to detect what browser and screen resolution is being used. The CSS to use will depend on what the visitor is using. You would have to create a few CSS files and JavaScript must be enabled for this to work.

Using liquid or fluid design means you are filling the screen rather than have margins that vary. But the text may wrap differently and other contents will appear in a different location. And the bottom of the page may be empty since all of the contents appear on the top. Sometimes this works for website that are mostly text with a few images.

Peaceflows · #3 (**permalink**) 06-23-2009, 09:21 AM

Thank you very much, Dee.
I think i like the first suggestion better than the second one, so i'll have to look into how to put that idea into effect.
My second site (it links from the one named in my profile) is set to 850 pixels (for the container and header). So maybe i could start by changing that.

Regards,
walt

sequencehosting · #4 (**permalink**) 06-23-2009, 03:13 PM

There are 2 ways to get around this. Both of them I think are great. First of all you can centre your website. This works really well since it will look nice and clean with every screen resolution.

You could also use what’s known as a "liquid layout" this consists of a fixed left column a fixed right column (If its a 3 column layout) and the content being a %. This way the centre content will expand to the screen resolution.

Im working on a new design for one of my sites that uses this type of template and its working really well! Here it is so far:

http://www.conceptskateboarding.com/...rtal/index.php

If you change the size of your browser you will notice the centre content will change to match the width.

Hope I helped

Jack

Peaceflows · #5 (**permalink**) 06-26-2009, 01:44 PM

Jack, thank you very much for your helpful response. Sounds very good, and the layout of the linked site on Skateboarding appears to be a good example of that because the image filled the screen just right up to the edges.

Can you give any instructions as to how to centre a website? I have no idea how to apply that idea, but maybe that's all i need.

Or .. could i see an example of the HTML for specifying content as a % ? I'm not very literate in this area -- so i appreciate your patience.

In my CSS file, i've got this:

#content { width: 500px; padding: 10px; margin-right: 160px; margin-left: 160px}

Is that where i need to make the change for a liquid layout?

Thanks!
walt

sequencehosting · #6 (**permalink**) 06-26-2009, 02:18 PM

Quote:

Originally Posted by Peaceflows

Jack, thank you very much for your helpful response. Sounds very good, and the layout of the linked site on Skateboarding appears to be a good example of that because the image filled the screen just right up to the edges.

Can you give any instructions as to how to centre a website? I have no idea how to apply that idea, but maybe that's all i need.

Or .. could i see an example of the HTML for specifying content as a % ? I'm not very literate in this area -- so i appreciate your patience.

In my CSS file, i've got this:

#content { width: 500px; padding: 10px; margin-right: 160px; margin-left: 160px}

Is that where i need to make the change for a liquid layout?

Thanks!
walt

Not a problem. Yeah I always wanted a layout that does that otherwise I always end up re-sizing it.

Although im starting to get the hang of this im afraid my html/css isn't too great. So far I have used templates for my sites and learning. So im only familiar with editing CSS/HTML so changing a design from normal to centred I can't help you with too much. I think its not a huge change to make, the code you showed above could certainly be what needs editing.

First of all you will need to decide whether to go for centred or a liquid layout. You certainly can change your site now or you could search online for liquid templates.

There are many on this forum that are very knowledgeable with coding so im sure someone will be able to help you out with that.

Maybe you could do a Google search and see how you can achieve this.

Good Luck!

James · #7 (**permalink**) 06-26-2009, 05:28 PM

Centering the page is usually not too difficult although in some cases it does get challenging.

Here is the css for my body tag on one of my sites:

HTML Code:

body{
     width: 1028px;
     background-color: #F0FFDB;
     position: relative;
     margin: 0px auto 20px auto;
     padding: 0px 0px 0px 0px;
     }

The key part is the margin setting. Note that the right and left sides are set at "auto" while the top and bottom settings are in pixels. "auto" results in equal space in the margins on either side. In this case there would only be a margin on monitors wider that 1028 pixels.

Often people put a "container div" around the site contents inside the body tag and address this css to it. This is one point where it can produce issues, especially with ie.

Peaceflows · #8 (**permalink**) 06-29-2009, 07:47 PM

Thanks, James.
I don't think i'm doing this right, because i see no changes yet.
I've tried changing margins to those you indicated for "container", and for "content", and even added the whole chunk of "body" code you quoted to the CSS template i'm using - the one supplied freely to all by Lisa on her site a couple of months back (different from the one currently being offerred). But none of these variations made a noticeable difference. If you're using a "body" segment in the CSS, i guess you have to call it out on the page ... but wouldn't that be the same as the section called "content", possibly including "container"?

Regards,
walt

WB Sponsors