My first website, Issue - So I finished my first website and put it up online. Was pretty pleased with it. Then I realised a

fbmagik

So I finished my first website and put it up online. Was pretty pleased with it.

Then I realised a mistake which I didn't think of. I created the site in 1024x768, I think at the time I took those measurements off a tutorial I was following.

So all through the testing, I have not noticed any issues. But I have a 22" monitor at home, and the site works fine on mine. At work though, I work on a 17" monitor and noticed there is quite a bit of horizontal scrolling which sucks pretty much.

However, when the page is centred (manually), the content fits. To the side of the main content is just black. So it's not necessary for the viewer.

I was wondering if there was anyway to place in a bit of code which tells each browser to centre the content exactly and ignore the bit on the outside?

I will consider any way really. I just didn't want to re-size it slice it all in photoshop again and practically build it from scratch.

Any ideas?

Cheers. Tom

kozata-xakep

Can you give us a live example ?

fbmagik

Tom Howlett | Design Portfolio

Frinkky

The physical dimensions of a monitor have nothing to do with the resolution the monitor is set to (well, there are some limitations such as maximum resolution, but that really bears no relevance and I'm probably confusing issues by mentioning it. So I'll stop).

To use your example - if your is set to a resolution higher than 1024*768 (for instance 1280*1024 or 1680*1050) you will see the whole page width, plus extra.

If your work monitor is set at a lower resolution, say 800*600 or 640*480, then obviously there is not enough pixels to fit the whole of the page width, thus the need for horizontal scrolling.

Desktop users with screen resolutions lower than 1024*768 are few(er) and far(ther) between, so adopting the 1024 resolution as the minimum size supported without horizontal scrolling is generally regarded as acceptable. The actual width of your page should be slightly less than 1024, a lot of people use a 960px width (me for 1). The reason for this is it takes into account the right hand vertical scroll bar and any vertical browser borders that constrain the actual screen real estate.

__________________
Jon Warner
Web Pro Cafe :: The PixelForge :: Follow my Twits (or something) :: LinkedIn

fbmagik

So is there a way around this? I wasn't too keen when I saw it on this 17" monitor. I'm not sure what resolution it was at

shalom_m

Below you will see the stats for screen resolution of one of my UK websites.



Although there are 62 visitors with different screen resolutions, these 10 make up over 89% of the total in visits.

See #7. 320 x 396 px.? Those are visits from iphones, unless you want to specifically cater for ipones too it is best to ignore this statistic in the following discussion.

Not that 1024 x 768 is the lowest resolution as well as the highest ranking in visitors.

In the attachments below you will see partial screenshots of the slidebars of FF, IE and Chrome. Their width are 13px, 15px and 17px respectively. Add to that possible borders of the browsers (between 0 and 4px on each side) we now have a max viewing width of (1024 - 17 - 4 - 4) 999 px.

You want to leave some empty space on each side - say at least 15 px, that gets you down to 969px.

I usually use 960px as my max width.

This is not an arbitrary choice.
960 divides by 2, 3, 4, 5, 6, 8, 9, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48

Now why would this be important?

• It for instance will allow you to divide up the screen into 1/2 and 1/3 and 1/6;
• or into 5 columns @ 192 px;
• or 3 columns @ 192 px and the 4th exactly double @ 384 px;
• or working from the other end, divide 960 by 48 = 20, this constitutes the empty width between columns and edges, decide how many you need, the content columns will also be multiples of 20.
• You can do the same with 12, 15, 16 and 24.

So 960px is a good choice.

Attached Images

This post has an attachment which you could see if you were registered. Registering is quick and easy

This post has an attachment which you could see if you were registered. Registering is quick and easy

This post has an attachment which you could see if you were registered. Registering is quick and easy

WelshStew

Hi Tom,

I think this might need a slight rework. The layout you have is based on tables, and as such it is slightly harder to adjust the design easily.

You should be looking towards a table-less layout using CSS and Div's; tables should only be used to show tabular data, such as statistics, etc.

This will then allow you to separate design from content, and update your design quickly and easily. To see how powerful this separation is, please take a look at CSS Zen garden: http://www.mezzoblue.com/zengarden/alldesigns/ - all of these designs use the same HTML an djust the CSS to change the look and feel of the site - pretty impressive !

I would start by reading through a couple of tutorials on HTML Dog, which is a great resource: HTML and CSS Tutorials, References, and Articles | HTML Dog

After that, please come back to us and we will help you update your site.

__________________
WelshStew
follow me on twitter here | WelshStew - Web Design & Web Development | Motorhome hire uk

Tom

Hi, As welshstew has said you design needs a little reworking mainly due to the use of tables.

The issue you have is that you are using images to pad out your content by setting the width, ideally what you want to do is remove the 2 images at either side of the image.

Create a repeating background image, you are partly there with: http://www.thowlett.co.uk/images/left.jpg

Then you use some CSS magic such as:

body {
background: url(background-image.png) repeat-x;
}

Then for the actual content of your website, wrap it in a div such as

<div id="wrapper">
<--- all your content including navigation etc --->
</div>

Then some more CSS

#wrapper {
margin: 0 auto;
}

Which will centre the content in the middle of the page regardless of page resolution, and as the background image is repeated automatically it will cover the full page again regardless of resolution.

From my experience the only time you should be concerned with monitor resolutions is for the #wrapper div. This shouldn't be too large as for smaller monitors the content will be off the side of the monitor and you will need to scroll.

You will soon find the number 960 battered around a fair bit. This is the standard width people use for their content these days.

__________________
www.fusionservers.co.uk| Inexpensive Themes

fbmagik

Thanks,

When it comes to the depth, I know this varies depending on what you are doing exactly. How would I go about making it a good depth so there wouldn't be much or any downwards scrolling?

Michael

Looking at your source code I noticed this comment -
<!-- End Save for Web Slices -->

Perhaps code it from scratch after slicing as that is a really nice design :)

__________________
Forum & Message Boards Directory