Webpage to fit all monitors

C

Chas D

Is there an html code that will size a web page to fit all monitors?

Thanks in advance,

Chas D
 
O

odyssey

Hi! monitors no. screen resolutions YES.

In general using 100% page width will automaticcaly adjust the page to the
users screen size.

But in the case of a picture background that is not a static you will notice
that when you load the page in different screen resolutions that it will not
fit the entire screen or it will be to big and the user will have to scroll
left to right to see the whole image.

I don't no if FP 2003 has a auto stretch feature but doing this to a picture
of a person or of the sort would make the picture blurry or distorted.

One answer to this specific situation is to make 3 or more picture
backgrounds in different screen resolutions, eg one pic at 640x480 another
800x600 and another at 1024x768 for instance then use the script below to
detect the users screen rez..

----------------------Put this part in the head section of your
page-------------------------

<script LANGUAGE="JavaScript">
var Wvalue=(0)
var Hvalue=(0)
Wvalue=screen.width
Hvalue=screen.height
var image="";

if (Wvalue==640&&Hvalue==480) {
image="../../../../../website_images/odyssey/erise640.jpg";

if (Wvalue==800&&Hvalue==600) {
image="../../../../../website_images/odyssey/erise800.jpg";
}
if (Wvalue==1024&&Hvalue==768) {
image="../../../../../website_images/odyssey/erise1024.jpg";
}
if(navigator.appName.indexOf("WebTV") != -1){
image="../../../../../website_images/garden/erisewebtv.jpg";
}
</script>
--------Put this next part at the bottom of your page right before the last
line "</html>"------------

<script LANGUAGE="JavaScript">
<!-- Begin
document.open();
document.write("<BODY BACKGROUND='"+image+"'>");
document.write("<CENTER></CENTER>");
// End -->
</script>
----------------------------------------------------------------------------
----------------

You will probably want to hae th image watermarked if so add this right
after your head section "</head>"

<body bgcolor="#000000" bgproperties="fixed">

----------------------------------------------------------------------

That's it. if you have any problems with this let me know. just in case that
I might have forgotten something.

I have to modify this script here to simplify it as I used it not only for
one image but 2. one for the main page and another for other pages
then set it to go into other subsites.

I had wanted a way to set the script once and then use the var not only in
the rest of the pages in my site but also across other subwebs.
a guy on the javascript showed me a way of doing this, this guy figured out
a way using session variables along with local variables and the
very need JavaScript code ( he called it a "bridge") that he created as a
challenge ( to see if he could make it work for me ).

I wish that I could remember his name to give credit where due.

anyways let me know how it goes and if you need other info like the above
mentioned I will try to help you like he helped me. :)

odyssey

(e-mail address removed)
 
T

Thomas A. Rowe

No. You have to learn to use tables.

--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WEBMASTER Resources(tm)

FrontPage Resources, WebCircle, MS KB Quick Links, etc.
==============================================
 
C

Chas D

Thanks i'll give this a try.

Chas D.

odyssey said:
Hi! monitors no. screen resolutions YES.

In general using 100% page width will automaticcaly adjust the page to the
users screen size.

But in the case of a picture background that is not a static you will notice
that when you load the page in different screen resolutions that it will not
fit the entire screen or it will be to big and the user will have to scroll
left to right to see the whole image.

I don't no if FP 2003 has a auto stretch feature but doing this to a picture
of a person or of the sort would make the picture blurry or distorted.

One answer to this specific situation is to make 3 or more picture
backgrounds in different screen resolutions, eg one pic at 640x480 another
800x600 and another at 1024x768 for instance then use the script below to
detect the users screen rez..

----------------------Put this part in the head section of your
page-------------------------

<script LANGUAGE="JavaScript">
var Wvalue=(0)
var Hvalue=(0)
Wvalue=screen.width
Hvalue=screen.height
var image="";

if (Wvalue==640&&Hvalue==480) {
image="../../../../../website_images/odyssey/erise640.jpg";

if (Wvalue==800&&Hvalue==600) {
image="../../../../../website_images/odyssey/erise800.jpg";
}
if (Wvalue==1024&&Hvalue==768) {
image="../../../../../website_images/odyssey/erise1024.jpg";
}
if(navigator.appName.indexOf("WebTV") != -1){
image="../../../../../website_images/garden/erisewebtv.jpg";
}
</script>
--------Put this next part at the bottom of your page right before the last
line "</html>"------------

<script LANGUAGE="JavaScript">
<!-- Begin
document.open();
document.write("<BODY BACKGROUND='"+image+"'>");
document.write("<CENTER></CENTER>");
// End -->
</script>
-------------------------------------------------------------------------- --
----------------

You will probably want to hae th image watermarked if so add this right
after your head section "</head>"

<body bgcolor="#000000" bgproperties="fixed">

----------------------------------------------------------------------

That's it. if you have any problems with this let me know. just in case that
I might have forgotten something.

I have to modify this script here to simplify it as I used it not only for
one image but 2. one for the main page and another for other pages
then set it to go into other subsites.

I had wanted a way to set the script once and then use the var not only in
the rest of the pages in my site but also across other subwebs.
a guy on the javascript showed me a way of doing this, this guy figured out
a way using session variables along with local variables and the
very need JavaScript code ( he called it a "bridge") that he created as a
challenge ( to see if he could make it work for me ).

I wish that I could remember his name to give credit where due.

anyways let me know how it goes and if you need other info like the above
mentioned I will try to help you like he helped me. :)

odyssey

(e-mail address removed)
 
C

Chas D

I do use tables, it must be the background picture thats causing the
problem.

Chas D.
 
T

Thomas A. Rowe

Can you provide a URL to the site/page in question ?

--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WEBMASTER Resources(tm)

FrontPage Resources, WebCircle, MS KB Quick Links, etc.
==============================================
 
O

odyssey

The method I gave you will work for background images regardless of tables.
and like a said for solid images ( meaning solid color backgrounds or
backgrounds that you can tile together and look like a continuous image.)
you can use it with tables and just set the table width at 100% and no
matter what screen rez the user has it will pan out evenly to the users
screen width. I gave you the other mentioned script for specific images that
have a picture of something that you don't want to cut off a part off ( like
a picture the monolisa) sure you could just use a small picture ( 640x480)
then the user will never have to scroll from left to right. but it will not
complete the entire page at a 800x600 rez and even less if the users screen
def is at 1024x768 or above. in this case if you want to have the image fit
the entire background area you would have to use the script that I gave you
and create 3 or four different image of the picture resized to fit the above
mentioned screen def..

and another thing webtv will not accept just any king of background image.
if you use a jpg and its saved using the progressive scan option, it will
not work.( unless they recently corrected this issue). in this case using
the script that I gave you can detect if the user is webtv and use a
different image not scan with the progressive option.

here is an example that you can check out. Its a website that I did as a
gift to a animal rescue and shelter. although the background images is not
the best example of a complex image but it should give you an idea of what I
am talking about.

I took the largest grass background image that I could find then resized it
using a photo editing program to 3 different sizes and depending which
screen rez is detect it loads the appropriate image. I realize now that
there is something else I should have done and you should do in the script.
is to put an else statement to a default image if none of the defined rez
are detected.

http://www.secondchancerescue.info
 
?

=?Windows-1252?Q?Crash_Gordon=AE?=

molly,
you're almost there :)

If you're gonna do collapsing table type of design you need to get out your calculator...make sure you leave room on the left for your nav buttons (subtract that from 750px) and that will tell you how much room you have for content in the main area on the right.

Then becareful about image placement within your tables - you have to allow room for the table to contract.

That being said, yes create 100% table, then place your images in the cells.

Don't use spaces for positioning...you have many that should be removed.

Personally, I stay away from absolute positioning as well since I've had problems with it (this seems to be a minor controversy at the moment).


| Thomas:
|
| I have been following the tables and images problems closely that everyone seems to be having because I am having the same problem.
|
| From what I am gathering for different resolutions to be able to look at pages with images/tables.......Do I set the table width when I first create a table too a 100% or can I do this in an existing table with images? Take a look at my site www.nooksack-tribe.org...homepage....councilmembers, and you will see some of my images off from the text. Thanks
|
| --
| mollybigd
|
|
| "Thomas A. Rowe" wrote:
|
| > No. You have to learn to use tables.
| >
| > --
| > ==============================================
| > Thomas A. Rowe (Microsoft MVP - FrontPage)
| > WEBMASTER Resources(tm)
| >
| > FrontPage Resources, WebCircle, MS KB Quick Links, etc.
| > ==============================================
| > To assist you in getting the best answers for FrontPage support see:
| > http://www.net-sites.com/sitebuilder/newsgroups.asp
| >
| > > Is there an html code that will size a web page to fit all monitors?
| > >
| > > Thanks in advance,
| > >
| > > Chas D
| > >
| > >
| >
| >
| >
 
M

Murray

Personally, I stay away from absolute positioning as well since I've had
problems with it (this seems to be a
minor controversy at the moment).

Why? Absolute positioning is simple, once you understand the hard parts! 8)

--
Murray

molly,
you're almost there :)

If you're gonna do collapsing table type of design you need to get out your
calculator...make sure you leave room on the left for your nav buttons
(subtract that from 750px) and that will tell you how much room you have
for content in the main area on the right.

Then becareful about image placement within your tables - you have to allow
room for the table to contract.

That being said, yes create 100% table, then place your images in the cells.

Don't use spaces for positioning...you have many that should be removed.



| Thomas:
|
| I have been following the tables and images problems closely that everyone
seems to be having because I am having the same problem.
|
| From what I am gathering for different resolutions to be able to look at
pages with images/tables.......Do I set the table width when I first create
a table too a 100% or can I do this in an existing table with images? Take
a look at my site www.nooksack-tribe.org...homepage....councilmembers, and
you will see some of my images off from the text. Thanks
|
| --
| mollybigd
|
|
| "Thomas A. Rowe" wrote:
|
| > No. You have to learn to use tables.
| >
| > --
| > ==============================================
| > Thomas A. Rowe (Microsoft MVP - FrontPage)
| > WEBMASTER Resources(tm)
| >
| > FrontPage Resources, WebCircle, MS KB Quick Links, etc.
| > ==============================================
| > To assist you in getting the best answers for FrontPage support see:
| > http://www.net-sites.com/sitebuilder/newsgroups.asp
| >
| > > Is there an html code that will size a web page to fit all monitors?
| > >
| > > Thanks in advance,
| > >
| > > Chas D
| > >
| > >
| >
| >
| >
 
T

Thomas A. Rowe

Why? Tables are simple to use, once you understand them as well.

--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WEBMASTER Resources(tm)

FrontPage Resources, WebCircle, MS KB Quick Links, etc.
==============================================
 
M

Murray

But pages coded with tables are much more code-heavy than the corresponding
pages coded with AP elements. Further, I can do things with AP elements
that I cannot do with tables.

Notwithstanding this, I am not opposed to the use of tables or suggesting
that anyone stop using them. As web developers, we should all use the tools
that work best for us. I am simply saying that using absolutely positioned
elements is not really tricky or problematic at all, and should not be
avoided just on principle....
 
?

=?Windows-1252?Q?Crash_Gordon=AE?=

I've no real strong opinions on it other than almost every page I've viewed in IE6 with misplaced images or overlapping text has been due to absolute positions. There were a couple listed here on the ng the past week that were like that.

I think it's a great idea...someday I'll give it a shot :)


| > Personally, I stay away from absolute positioning as well since I've had
| problems with it (this seems to be a
| > minor controversy at the moment).
|
| Why? Absolute positioning is simple, once you understand the hard parts! 8)
|
| --
| Murray
|
| | molly,
| you're almost there :)
|
| If you're gonna do collapsing table type of design you need to get out your
| calculator...make sure you leave room on the left for your nav buttons
| (subtract that from 750px) and that will tell you how much room you have
| for content in the main area on the right.
|
| Then becareful about image placement within your tables - you have to allow
| room for the table to contract.
|
| That being said, yes create 100% table, then place your images in the cells.
|
| Don't use spaces for positioning...you have many that should be removed.
|
|
|
| | | Thomas:
| |
| | I have been following the tables and images problems closely that everyone
| seems to be having because I am having the same problem.
| |
| | From what I am gathering for different resolutions to be able to look at
| pages with images/tables.......Do I set the table width when I first create
| a table too a 100% or can I do this in an existing table with images? Take
| a look at my site www.nooksack-tribe.org...homepage....councilmembers, and
| you will see some of my images off from the text. Thanks
| |
| | --
| | mollybigd
| |
| |
| | "Thomas A. Rowe" wrote:
| |
| | > No. You have to learn to use tables.
| | >
| | > --
| | > ==============================================
| | > Thomas A. Rowe (Microsoft MVP - FrontPage)
| | > WEBMASTER Resources(tm)
| | >
| | > FrontPage Resources, WebCircle, MS KB Quick Links, etc.
| | > ==============================================
| | > To assist you in getting the best answers for FrontPage support see:
| | > http://www.net-sites.com/sitebuilder/newsgroups.asp
| | >
| | | > > Is there an html code that will size a web page to fit all monitors?
| | > >
| | > > Thanks in advance,
| | > >
| | > > Chas D
| | > >
| | > >
| | >
| | >
| | >
|
|
 
M

Murray

That just means you have missed all the ones that don't have misplaced
images.

As with any other page element, there's a right way to use them and lots of
wrong ways to use them.

There's no better time than today to start! 8)

--
Murray

I've no real strong opinions on it other than almost every page I've viewed
in IE6 with misplaced images or overlapping text has been due to absolute
positions. There were a couple listed here on the ng the past week that were
like that.

I think it's a great idea...someday I'll give it a shot :)


| > Personally, I stay away from absolute positioning as well since I've had
| problems with it (this seems to be a
| > minor controversy at the moment).
|
| Why? Absolute positioning is simple, once you understand the hard parts!
8)
|
| --
| Murray
|
| | molly,
| you're almost there :)
|
| If you're gonna do collapsing table type of design you need to get out
your
| calculator...make sure you leave room on the left for your nav buttons
| (subtract that from 750px) and that will tell you how much room you have
| for content in the main area on the right.
|
| Then becareful about image placement within your tables - you have to
allow
| room for the table to contract.
|
| That being said, yes create 100% table, then place your images in the
cells.
|
| Don't use spaces for positioning...you have many that should be removed.
|
|
|
| | | Thomas:
| |
| | I have been following the tables and images problems closely that
everyone
| seems to be having because I am having the same problem.
| |
| | From what I am gathering for different resolutions to be able to look at
| pages with images/tables.......Do I set the table width when I first
create
| a table too a 100% or can I do this in an existing table with images?
Take
| a look at my site www.nooksack-tribe.org...homepage....councilmembers, and
| you will see some of my images off from the text. Thanks
| |
| | --
| | mollybigd
| |
| |
| | "Thomas A. Rowe" wrote:
| |
| | > No. You have to learn to use tables.
| | >
| | > --
| | > ==============================================
| | > Thomas A. Rowe (Microsoft MVP - FrontPage)
| | > WEBMASTER Resources(tm)
| | >
| | > FrontPage Resources, WebCircle, MS KB Quick Links, etc.
| | > ==============================================
| | > To assist you in getting the best answers for FrontPage support see:
| | > http://www.net-sites.com/sitebuilder/newsgroups.asp
| | >
| | | > > Is there an html code that will size a web page to fit all monitors?
| | > >
| | > > Thanks in advance,
| | > >
| | > > Chas D
| | > >
| | > >
| | >
| | >
| | >
|
|
 
S

Stefan B Rusynko

The reason most of us recommend not using absolute positioning and css, is that most users that ask about them (or have problems
with them) do not understand them, and how to create / check them for cross browser / platform compatibility using external css
- so tables are often easier to implement correctly
(especially for users that do not stop to learn html / dhtml / css or work only in design view)

If a user indicates a knowledge of css and absolute positioning they are not discouraged from using them
- and they are more flexible than tables (see http://www.csszengarden.com/)

--




| But pages coded with tables are much more code-heavy than the corresponding
| pages coded with AP elements. Further, I can do things with AP elements
| that I cannot do with tables.
|
| Notwithstanding this, I am not opposed to the use of tables or suggesting
| that anyone stop using them. As web developers, we should all use the tools
| that work best for us. I am simply saying that using absolutely positioned
| elements is not really tricky or problematic at all, and should not be
| avoided just on principle....
|
| --
| Murray
|
| | > Why? Tables are simple to use, once you understand them as well.
| >
| > --
| > ==============================================
| > Thomas A. Rowe (Microsoft MVP - FrontPage)
| > WEBMASTER Resources(tm)
| >
| > FrontPage Resources, WebCircle, MS KB Quick Links, etc.
| > ==============================================
| > To assist you in getting the best answers for FrontPage support see:
| > http://www.net-sites.com/sitebuilder/newsgroups.asp
| >
| > | > > > Personally, I stay away from absolute positioning as well since I've
| had
| > > problems with it (this seems to be a
| > > > minor controversy at the moment).
| > >
| > > Why? Absolute positioning is simple, once you understand the hard
| parts! 8)
| > >
| > > --
| > > Murray
| > >
| > > | > > molly,
| > > you're almost there :)
| > >
| > > If you're gonna do collapsing table type of design you need to get out
| your
| > > calculator...make sure you leave room on the left for your nav buttons
| > > (subtract that from 750px) and that will tell you how much room you
| have
| > > for content in the main area on the right.
| > >
| > > Then becareful about image placement within your tables - you have to
| allow
| > > room for the table to contract.
| > >
| > > That being said, yes create 100% table, then place your images in the
| cells.
| > >
| > > Don't use spaces for positioning...you have many that should be removed.
| > >
| > >
| > >
| > > | > > | Thomas:
| > > |
| > > | I have been following the tables and images problems closely that
| everyone
| > > seems to be having because I am having the same problem.
| > > |
| > > | From what I am gathering for different resolutions to be able to look
| at
| > > pages with images/tables.......Do I set the table width when I first
| create
| > > a table too a 100% or can I do this in an existing table with images?
| Take
| > > a look at my site www.nooksack-tribe.org...homepage....councilmembers,
| and
| > > you will see some of my images off from the text. Thanks
| > > |
| > > | --
| > > | mollybigd
| > > |
| > > |
| > > | "Thomas A. Rowe" wrote:
| > > |
| > > | > No. You have to learn to use tables.
| > > | >
| > > | > --
| > > | > ==============================================
| > > | > Thomas A. Rowe (Microsoft MVP - FrontPage)
| > > | > WEBMASTER Resources(tm)
| > > | >
| > > | > FrontPage Resources, WebCircle, MS KB Quick Links, etc.
| > > | > ==============================================
| > > | > To assist you in getting the best answers for FrontPage support see:
| > > | > http://www.net-sites.com/sitebuilder/newsgroups.asp
| > > | >
| > > | > > | > > Is there an html code that will size a web page to fit all
| monitors?
| > > | > >
| > > | > > Thanks in advance,
| > > | > >
| > > | > > Chas D
| > > | > >
| > > | > >
| > > | >
| > > | >
| > > | >
| > >
| > >
| >
| >
|
|
 
M

Murray

Stefan:

Thanks - that's a candid answer.

--
Murray

Stefan B Rusynko said:
The reason most of us recommend not using absolute positioning and css, is
that most users that ask about them (or have problems
with them) do not understand them, and how to create / check them for
cross browser / platform compatibility using external css
- so tables are often easier to implement correctly
(especially for users that do not stop to learn html / dhtml / css or work only in design view)

If a user indicates a knowledge of css and absolute positioning they are
not discouraged from using them
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top