Web Page Sizes and Absolute Positioning

D

Daniel

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
 
P

P@tty Ayers

Daniel said:
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?
Click to expand...

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.
 
M

Murray

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?
 
D

Daniel

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 said:
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?
Click to expand...
 
M

Murray

are you talking about the background problem i'm
having as well?
Click to expand...

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.
Click to expand...

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

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


Daniel said:
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?
Click to expand...
 
D

Daniel

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 said:
are you talking about the background problem i'm
having as well?
Click to expand...

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.
Click to expand...

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

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


Daniel said:
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?
Click to expand...
Click to expand...
 
T

Trevor Lawrence

Daniel said:
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
--
Click to expand...

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
 
D

Daniel

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 said:
Daniel said:
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
--
Click to expand...

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



Daniel R
Click to expand...
Click to expand...
 
K

kabrad

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 said:
Good luck, Daniel.

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


Daniel said:
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
Click to expand...
Click to expand...
 

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

Similar Threads

Problems with absolute positioning 5
Absolute positioning in FP 2002 3
Creating Labels Over 3-Up Image 2
Positioning Relative to window 5
Absolute Positon of <div>s 3
question about positioning (absolute/relative) 2
Working on birthday "book" for my wife and having layout/editing trouble 0
About absolute positioning 1

Top