FrontPage Programming - Web Page Sizes and Absolute Positioning

Author

Web Page Sizes and Absolute Positioning

Daniel

2007-06-14, 6:17 pm

Our current website text spans from the absolute left side of any screen it
shows up on all the way to the right side. I want to contain the text and
images in a box that will always be centered in the middle of any computer
screen it may show up on, so that it is always the same. For example, the
msn.com and microsoft.com websites. How do you accomplish this?

Also, on the sides of the proposed text box, how do you create a background
with designs, rather than one with just a solid color that frontpage 2003
allows you to do?

I would greatly appreciate any help and feedback on these questions. Thank
you
--
Daniel R

P@tty Ayers

2007-06-14, 10:17 pm

"Daniel" <danielr@quickcap.net> wrote in message
news:CDB8DE29-2343-4756-8FD6-FCCC6CAF0D53@microsoft.com...
> Our current website text spans from the absolute left side of any screen
> it
> shows up on all the way to the right side. I want to contain the text and
> images in a box that will always be centered in the middle of any computer
> screen it may show up on, so that it is always the same. For example, the
> msn.com and microsoft.com websites. How do you accomplish this?
>
> Also, on the sides of the proposed text box, how do you create a
> background
> with designs, rather than one with just a solid color that frontpage 2003
> allows you to do?

The simplest way is probably to place a one-cell table on the page, set to
your chosen pixel width, and place all of the page's content into the table.

For the background, you can use CSS to specify that the <body> tag have a
certain background image, or use the HTML 'background' property to specify
the image. Using CSS allows you to have the background not repeat, to
position it wherever you want, and other options.

--
Patty Ayers | www.WebDevBiz.com
Free Articles on the Business of Web Development
Web Design Contract, Estimate Request Form, Estimate Worksheet
--

Murray

2007-06-15, 6:16 pm

Be aware that if you will be using "Layers" on the page, Patty's suggestion
will likely not produce the desired results, unless you take some additional
steps. Might you be doing that?

--
Murray
--------------
MVP FrontPage

"P@tty Ayers" <pattyayersTAKETHISOUT@REMOVEXXXXXXXXXX> wrote in message
news:eRLg77trHHA.1172@TK2MSFTNGP03.phx.gbl...
>
> "Daniel" <danielr@quickcap.net> wrote in message
> news:CDB8DE29-2343-4756-8FD6-FCCC6CAF0D53@microsoft.com...
>
> The simplest way is probably to place a one-cell table on the page, set to
> your chosen pixel width, and place all of the page's content into the
> table.
>
> For the background, you can use CSS to specify that the <body> tag have a
> certain background image, or use the HTML 'background' property to specify
> the image. Using CSS allows you to have the background not repeat, to
> position it wherever you want, and other options.
>
>
> --
> Patty Ayers | www.WebDevBiz.com
> Free Articles on the Business of Web Development
> Web Design Contract, Estimate Request Form, Estimate Worksheet
> --
>
>

Daniel

2007-06-15, 6:16 pm

The one-celled table did the trick for the first part. Thank you for that,
but I feel that getting into css for the background will complicate things
more and it is difficult to produce the results i want. Is there an easier
way to produce a 'gradient' background than by using css? (once again, like
the msn.com or microsoft web sites). Murray, i'm not sure what you meant by
additional steps though; are you talking about the background problem i'm
having as well?
--
Daniel R

"Murray" wrote:

> Be aware that if you will be using "Layers" on the page, Patty's suggestion
> will likely not produce the desired results, unless you take some additional
> steps. Might you be doing that?
>
> --
> Murray
> --------------
> MVP FrontPage
>
>
> "P@tty Ayers" <pattyayersTAKETHISOUT@REMOVEXXXXXXXXXX> wrote in message
> news:eRLg77trHHA.1172@TK2MSFTNGP03.phx.gbl...
>
>
>

Murray

2007-06-16, 6:17 pm

> are you talking about the background problem i'm
> having as well?

No.

A gradient background is easy to do, but it does require using CSS to
specify the properties of the background image.

To make a gradient that starts at one color, and slowly fades to another
color vertically, create a 20px wide (this number is arbitrary) image that
runs the entire course of the gradient change from top to bottom. Make the
page background color be the color at which the gradient ENDS. Use this
20px wide image as the background image, and use CSS to limit the background
to a horizontal tile, i.e., across the page. The rule for this would be -

body { background-repeat:repeat-x; }

That would be all there is to do.

> but I feel that getting into css for the background will complicate things
> more and it is difficult to produce the results i want.

Perhaps, but it's the only way to do it.

--
Murray
--------------
MVP FrontPage

"Daniel" <danielr@quickcap.net> wrote in message
news:CFAF339B-FD6E-4669-B6CD-AB1D39047B2C@microsoft.com...[color=darkred]
> The one-celled table did the trick for the first part. Thank you for that,
> but I feel that getting into css for the background will complicate things
> more and it is difficult to produce the results i want. Is there an
> easier
> way to produce a 'gradient' background than by using css? (once again,
> like
> the msn.com or microsoft web sites). Murray, i'm not sure what you meant
> by
> additional steps though; are you talking about the background problem i'm
> having as well?
> --
> Daniel R
>
>
> "Murray" wrote:
>

Daniel

2007-06-18, 3:16 am

I understand what you are trying to tell me, but I am still having some
difficulty in accomplishing this. I apologize, as I am completely new to the
idea of using css and am not nearly on the same level of expertise as you are
with this software, so please bear with me as I have to ask for more
assistance. I attempted several times to do what you stated, but kept
running into more problems.

When you say "create a 20 px wide image", where do you do this and how? Do
you have to save the image as a gif or just as an htm? Do you also add the
gradient background into this image then, or is that accomplished afterwards?
Also, in the css text, do you add anything other than the (body {
background-repeat:repeat-x; }) tags?

Please be specific and i sincerely thank you once again
--
Daniel R

"Murray" wrote:

>
> No.
>
> A gradient background is easy to do, but it does require using CSS to
> specify the properties of the background image.
>
> To make a gradient that starts at one color, and slowly fades to another
> color vertically, create a 20px wide (this number is arbitrary) image that
> runs the entire course of the gradient change from top to bottom. Make the
> page background color be the color at which the gradient ENDS. Use this
> 20px wide image as the background image, and use CSS to limit the background
> to a horizontal tile, i.e., across the page. The rule for this would be -
>
> body { background-repeat:repeat-x; }
>
> That would be all there is to do.
>
>
> Perhaps, but it's the only way to do it.
>
> --
> Murray
> --------------
> MVP FrontPage
>
>
> "Daniel" <danielr@quickcap.net> wrote in message
> news:CFAF339B-FD6E-4669-B6CD-AB1D39047B2C@microsoft.com...
>
>
>

Trevor Lawrence

2007-06-18, 3:16 am

"Daniel" <danielr@quickcap.net> wrote in message
news:68CC42C9-3882-42E4-87C8-332DEC11F976@microsoft.com...
>I understand what you are trying to tell me, but I am still having some
> difficulty in accomplishing this. I apologize, as I am completely new to
> the
> idea of using css and am not nearly on the same level of expertise as you
> are
> with this software, so please bear with me as I have to ask for more
> assistance. I attempted several times to do what you stated, but kept
> running into more problems.
>
> When you say "create a 20 px wide image", where do you do this and how? Do
> you have to save the image as a gif or just as an htm? Do you also add
> the
> gradient background into this image then, or is that accomplished
> afterwards?
> Also, in the css text, do you add anything other than the (body {
> background-repeat:repeat-x; }) tags?
>
> Please be specific and i sincerely thank you once again
> --

I didn't read this from the start, but I will try to help

The 20px image has to be created in an image editor. This should be one that
allows gradient colours.

The image file should be saved as .jpg, although there are other
possibilities. Don't save as a .gif as this will not have enough colours,
and an .htm is not an image file.

The gradient is added into the image by the image editor.

The CSS can appear between <head> and </head>. In this case you would code:
<head>
...................
<style type="text/css">
body { background-repeat:repeat-x; }
</style>
.................
</head>

Alternatively, the CSS can be in an external file, say "style.css"
In this case you code:
<head>
...................
<link rel="stylesheet" type="text/css" href="style.css" />
.................
</head>

The file "style.css" should be added (in this case) to the same directory as
the html file and contains:
body { background-repeat:repeat-x; }

--
Trevor Lawrence
Canberra
Microsoft MVP - FrontPage
MVP Web Site http://trevorl.mvps.org

[color=darkred]
> Daniel R
>
>
> "Murray" wrote:
>

Trevor Lawrence

2007-06-18, 3:16 am

In my previous post I wrote that the CSS should be
body { background-repeat:repeat-x; }

I forgot to add that you have to name the background image as well

So I would try
body { background: url(mybackground.jpg) fixed top repeat-x; }

This
1. names the background image
2. Specifies that the background image is fixed (does not scroll with the
rest of the page)
3. specifies its position at the top
4. directs that it is to be repeated in the x direction

--
Trevor Lawrence
Canberra
Microsoft MVP - FrontPage
MVP Web Site http://trevorl.mvps.org

Murray

2007-06-18, 6:17 pm

The use of the background:fixed is unnecessary in this case, and actually
makes the page visually annoying (in my opinion). Use it or not - it's your
choice. But it's not required to make the whole thing work....

--
Murray
--------------
MVP FrontPage

"Trevor Lawrence" <Trevor L.@Canberra> wrote in message
news:O6CRlqWsHHA.4500@TK2MSFTNGP04.phx.gbl...
>
> In my previous post I wrote that the CSS should be
> body { background-repeat:repeat-x; }
>
> I forgot to add that you have to name the background image as well
>
> So I would try
> body { background: url(mybackground.jpg) fixed top repeat-x; }
>
> This
> 1. names the background image
> 2. Specifies that the background image is fixed (does not scroll with the
> rest of the page)
> 3. specifies its position at the top
> 4. directs that it is to be repeated in the x direction
>
> --
> Trevor Lawrence
> Canberra
> Microsoft MVP - FrontPage
> MVP Web Site http://trevorl.mvps.org
>
>
>

Daniel

2007-06-20, 6:18 pm

Yes! I finally have it working and the website will soon look great. The
last post really helped a lot with explaining how to accomplish the task.
Thank you very much Trevor, Murray and P@tty Ayers for all your help. It was
much appreciated and you have helped us out a lot. Thank you once again
--
Daniel R

"Trevor Lawrence" wrote:

>
> "Daniel" <danielr@quickcap.net> wrote in message
> news:68CC42C9-3882-42E4-87C8-332DEC11F976@microsoft.com...
>
> I didn't read this from the start, but I will try to help
>
> The 20px image has to be created in an image editor. This should be one that
> allows gradient colours.
>
> The image file should be saved as .jpg, although there are other
> possibilities. Don't save as a .gif as this will not have enough colours,
> and an .htm is not an image file.
>
> The gradient is added into the image by the image editor.
>
> The CSS can appear between <head> and </head>. In this case you would code:
> <head>
> ...................
> <style type="text/css">
> body { background-repeat:repeat-x; }
> </style>
> .................
> </head>
>
> Alternatively, the CSS can be in an external file, say "style.css"
> In this case you code:
> <head>
> ...................
> <link rel="stylesheet" type="text/css" href="style.css" />
> .................
> </head>
>
> The file "style.css" should be added (in this case) to the same directory as
> the html file and contains:
> body { background-repeat:repeat-x; }
>
> --
> Trevor Lawrence
> Canberra
> Microsoft MVP - FrontPage
> MVP Web Site http://trevorl.mvps.org
>
>
>
>
>
>
>

Murray

2007-06-20, 6:18 pm

Good luck, Daniel.

--
Murray
--------------
MVP FrontPage

"Daniel" <danielr@quickcap.net> wrote in message
news:68448A38-8A72-4DC5-8462-0C636CB0F777@microsoft.com...[color=darkred]
> Yes! I finally have it working and the website will soon look great. The
> last post really helped a lot with explaining how to accomplish the task.
> Thank you very much Trevor, Murray and P@tty Ayers for all your help. It
> was
> much appreciated and you have helped us out a lot. Thank you once again
> --
> Daniel R
>
>
> "Trevor Lawrence" wrote:
>

kabrad

2007-06-22, 6:19 pm

Another way to create a gradient without having to create a graphic is to use
a DHTML gradient filter. Add it as a style to the html tag of your choice or
create a class and refer to it when you need it. There a wide variety of
gradient filters and they can be used for other things as well.

1. something like this in the header section
<style type ="text/css">
..blacktowhite {
filter:progid:DXImageTransform.Microsoft.Gradient
(startColorstr='#000000',endColorstr='#ffffff', gradientType='0');
}
</style>

2: and then in the body of your page add a reference to the class to
whatever tag you want to apply it to, like this for example:
<td class="blacktowhite">

or add it directly to the tag like this:

<td width="584" valign="top"
style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr='#000000',endColorstr='#ffffff', gradientType='0');">
--
kabrad

"Murray" wrote:

> Good luck, Daniel.
>
> --
> Murray
> --------------
> MVP FrontPage
>
>
> "Daniel" <danielr@quickcap.net> wrote in message
> news:68448A38-8A72-4DC5-8462-0C636CB0F777@microsoft.com...
>
>
>

Murray

2007-06-22, 6:19 pm

Assuming you don't want cross-browser reliability, that would be OK to use.

--
Murray
--------------
MVP FrontPage

"kabrad" <kabrad@discussions.microsoft.com> wrote in message
news:7E2407C8-2D15-4B06-A7E9-C5C348883AAA@microsoft.com...[color=darkred]
> Another way to create a gradient without having to create a graphic is to
> use
> a DHTML gradient filter. Add it as a style to the html tag of your choice
> or
> create a class and refer to it when you need it. There a wide variety of
> gradient filters and they can be used for other things as well.
>
> 1. something like this in the header section
> <style type ="text/css">
> .blacktowhite {
> filter:progid:DXImageTransform.Microsoft.Gradient
> (startColorstr='#000000',endColorstr='#ffffff', gradientType='0');
> }
> </style>
>
> 2: and then in the body of your page add a reference to the class to
> whatever tag you want to apply it to, like this for example:
> <td class="blacktowhite">
>
> or add it directly to the tag like this:
>
> <td width="584" valign="top"
> style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr='#000000',endColorstr='#ffffff',
> gradientType='0');">
> --
> kabrad
>
>
> "Murray" wrote:
>