Getting a page to show the same on different sized screens., It's me again!:) Options

[Psy]

Ok, as you know i've bin making that website and now there are no markup errors and it's pretty much how i like it.. I made it on a 19" monitor and then tried viewing it on a 15.4" monitor. I had to scroll lright to view the right hand side of the page. How can i get it so it will display on every monitor, the same as how i can see it on the 19" monitor?

Thanks.

Psy

[Darin McGrew]

Please see the FAQ entry For what screen size should I write?

[Psy]

i dont get those faq things.. they tell you about the problem but not how to solve them! do i have to redo it to certain width's to fit the standard monitor size of 15.4"?

[pandy]

Did you read the pages linked to from there? To simplify, basically don't use fixed widths and don't use too large images. Do not create the page for a certain resolution.

[Frederiek]

Go see if one of the links Elastic design or Liquid layouts are of help.

[Psy]

umm, so i need to put em tags everywhere i have text and pictures? to make them smaller?

man this stuff is confusing!

[Darin McGrew]

I suppose it is confusing.

In HTML, em is a phrase element for emphasis: <em>emphasized phrase</em>

In CSS, em is a unit for length, corresponding to the height of the current font.

They really aren't the same thing at all.

The main point is that browsers will automatically adjust your content to fit the available display area, unless you do something to prevent them from doing so. So don't do things that lock in a layout, preventing browsers from doing their job.

For more specific advice, please post the URL (address) of a sample document that you're having problems with.

[Psy]

It's not up at the moment, here's the css code:

CODE

/* CSS Document */
body {margin:0px; text-align:justify; font-family:Arial, Helvetica, sans-serif, Terminal; color:#000080; font-size:12px;}

a:link {color:#000080; text-decoration:none;}
a:visited {color:#000080; text-decoration:none;}
a:hover {color:#000080; text-decoration:none;}

.pagebg {background-image:url(pagebg.jpg); background-repeat:repeat-x;}

.topmenu {color:#000080; text-align:center; font-size:12px; vertical-align:middle;}
.topmenu a:link {color:#FFFFFF; margin-right:8px; margin-left:8px; text-decoration:none; font-weight:bold;}
.topmenu a:visited {color:#FFFFFF; margin-right:8px; margin-left:8px; text-decoration:none; font-weight:bold;}
.topmenu a:hover {color:#000080; margin-right:8px; margin-left:8px; text-decoration:underline; font-weight:bold;}

where would i put the em tags there?

[pandy]

You shouldn't put any tags in a style sheet. There's nothing there anyway that could cause the page to be too wide or too rigid.

[Darin McGrew]

Well, the "font-size:12px" might indicate a design that breaks in different environments (or when browsers enforce a minimum font size), but other than that, the CSS doesn't tell us much. The URL (address) of an actual HTML document that breaks would be much more useful.

[Psy]

Well, the "font-size:12px" might indicate a design that breaks in different environments (or when browsers enforce a minimum font size), but other than that, the CSS doesn't tell us much. The URL (address) of an actual HTML document that breaks would be much more useful.

LINK

There you go..

I'm also trying to get that picture on the left in the center of the lines for example: where it says "high quality service" i want the text there to go the next line and the picture to be there so the text is next to the picture inside the lines. Any ideas?

Many thanks and sorry for a delayed answer.

Psy

This post has been edited by Psy: Nov 25 2007, 12:43 PM

[Darin McGrew]

Our online validator reports markup errors, most of which indicate structural problems.

http://www.helping-the-world.co.uk/test.swf returns 404 Not Found.

You're mixing percentage widths with pixel widths. If 80% + 180px (or, depending on how the browser recovers from your broken markup, 80% + 180px + 180px) is greater than the width of the available display area, then you're going to get horizontal scrolling.

[Psy]

lol you love that validator don't you:) i could've sworn i fixed all those.. I'll take a look now.

[Psy]

ok i've fixed all but one. As I don't know how to lol..

<table>
^Error: element table not allowed here; possible cause is an inline element containing a block-level element

whatever that means!

[pandy]

lol you love that validator don't you:)

AND SO DO I! I love it the mostest.

[Psy]

haha! i must admit, it's a handy tool!

[pandy]

There you go. Mission accomplished.

[Psy]

ok i've fixed all but one. As I don't know how to lol..

<table>
^Error: element table not allowed here; possible cause is an inline element containing a block-level element

whatever that means!

all but that and the width problem.. my problem is that i don't have a small screen to check the site on lol

[Brian Chandler]

all but that and the width problem.. my problem is that i don't have a small screen to check the site on lol

Don't you have an operating system that allows you to change the size of the window? The total screen size has nothing to do with it.

[Darin McGrew]

<table>
^Error: element table not allowed here; possible cause is an inline element containing a block-level element

If you're going to nest tables, then the inner table must be inside a td element. You've got the inner table loose, where it isn't supposed to be.