Layer Centerting on Page

P

punkkid

Hello everyone first time posting here, had a one quick question that I hope
I can explain and get answered. I am new to Frontpage 2003, but love it so
far. So here it goes.

I insert a table and center it so that it is in the center of the broweser
no matter the page size. Then I insert layers and use absolute positioning.
I have a very detailed site so there are a lot of layer, roughly 25ish. The
site is www.punkkidracing.com/elleby.htm. I insert the layer and want to
line them with the image I have inserted in the table. But when I preview
them the Layer are all to the left of the table. How do I go about getting
the layers centered in the browser. I hope that makes since.

Thanks,
Michael Deppa
 
S

Stefan B Rusynko

Read http://www.great-web-sights.com/g_layerlaws.asp

--

_____________________________________________
SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
"Warning - Using the F1 Key will not break anything!" (-;
To find the best Newsgroup for FrontPage support see:
http://www.frontpagemvps.com/FrontPageNewsGroups/tabid/53/Default.aspx
_____________________________________________


| Hello everyone first time posting here, had a one quick question that I hope
| I can explain and get answered. I am new to Frontpage 2003, but love it so
| far. So here it goes.
|
| I insert a table and center it so that it is in the center of the broweser
| no matter the page size. Then I insert layers and use absolute positioning.
| I have a very detailed site so there are a lot of layer, roughly 25ish. The
| site is www.punkkidracing.com/elleby.htm. I insert the layer and want to
| line them with the image I have inserted in the table. But when I preview
| them the Layer are all to the left of the table. How do I go about getting
| the layers centered in the browser. I hope that makes since.
|
| Thanks,
| Michael Deppa
 
M

Murray

You need to know the good and the bad of layers. The link Stefan has given
you will show you some of the "bad".

Layers are nothing more than page containers that have been styled with CSS,
using position:absolute. When a page element is given a position:absolute
style, it is placed on the page in a location determined by the location of
the nearest positioned ancestor container. In the following case (and only
in the following case) -

<body>
<div style="position:absolute">...</div>
</body>

there is no positioned ancestor container, and so the body tag is the
default. Since the body tag is always located starting from the upper,
left-hand corner of the viewport, layers appear to be fixed in position with
respect to that location. But they are not necessarily....

In the following case -

<body>
<div style="position:relative">
<div style="position:absolute">...</div>
</div>

there IS a positioned ancestor (the outer div tag), and its location on the
page will be determined by factors associated with the difference between
relative and absolute positioning. Suffice it to say that elements that are
relatively positioned CAN move around, depending on what else is happening
in the code.

To make "layers" center, you would wrap the whole page in a centering,
relatively positioned div, like this -

<body>
<div style="position:relative;width:760px;margin:0 auto;">
<div style="position:absolute">...</div>
</div>

The outer div has been given an explicit width, and auto margins left and
right. This causes it to center within its container (the body). When it
centers, the inner divs position themselves relative to the outer div's
position. Thus, they also center.

There are a few details to clean up, but this is the gist of the story.....
 
P

punkkid

Thanks for the quick replies. Murray I am just a littl econfused, am i
making a new div layer and centering it then placing all the layers I have
created in it?

Sorry I am a rookie at this : )

Mcihael Deppa
 
M

Murray

The many layers on that page are going to cause you a big headache,
honestly. Go back to the links I posted and read again. Not only do you
have one in a table cell, but you also have tons of them for page elements.
Notwithstanding that, you would do the following -

Change this -

</head>

<body bgcolor="#868686" topmargin="0" onload="dynAnimation()"
language="Javascript1.2">

<div align="center">
<div align="left">


to this -

<style type="text/css">
body { text-align:center; }
#wrapper { text-align:left; width:822px; margin:0 auto; position:relative; }
/* 822px will drop horizontal scrollbars on any 800px wide screen */
</style>
</head>

<body bgcolor="#868686" topmargin="0" onload="dynAnimation()">
<div id="wrapper">

From your code, I cannot tell where the closing tag is for these divs. Can
you post a link to the actual page?
 
P

punkkid

Thanks. The link to the page is www.punkkidracing.com/elleby.htm

Would I be better off starting from scratch again and getting it all set up
just right. I used photoshop do design the page and sliced it and placed all
the images into frontpage, that is why there is so many layers. Because some
of the layers have to be over the large picture in the back etc. Kind of
hard to explain.

I really appreciate you being patient with me, I am just trying to get the
jest of all this.

Thanks,
Michael Deppa
 
R

Rob Giordano \(Crash\)

It's really purty..really nice. BUT..you may want to start with some basics
or you're gonna get flustered.

One major thing;; your graphics load is incredibly huge...almost 2.2 meg on
the motorcycle banner alone.


| Thanks. The link to the page is www.punkkidracing.com/elleby.htm
|
| Would I be better off starting from scratch again and getting it all set
up
| just right. I used photoshop do design the page and sliced it and placed
all
| the images into frontpage, that is why there is so many layers. Because
some
| of the layers have to be over the large picture in the back etc. Kind of
| hard to explain.
|
| I really appreciate you being patient with me, I am just trying to get the
| jest of all this.
|
| Thanks,
| Michael Deppa
 
P

punkkid

The graphic at the top is a animated gif. I don't have flash so I can't do
the fancy banners. What would you recommend to change that just make that
banner have fewer images?

The animated gif is part of the reason I am using so many layers. I wanted
it to be behind the menu bars etc.

After reading some of the info on murrays link I think I am starting to see
that my whole thing is messed up. Not in a bad way, I just did not set it up
right from the start. Is it a matter of making one main correct, such as
making it center, and placing the others layers in it?

I apologize for being a pain. I wish I had a book or tutrial that could
show this step by step.

Thanks,
Michael Deppa
 
M

Murray

You do yourself a disservice by going from Photoshop directly into FP
without passage through your brain.

Photoshop is attempting to build your page EXACTLY like the graphic. While
this is a good thing in a graphics program, it's a terrible thing to do to a
web page.

You must think of your web page like this -

1. Decide the width of the page.
2. Visualize your page in terms of stacked rectangles, none of which is
wider than the width determined in #1.
3. Begin to build your page *IN FP* by using the graphic elements you have
exported from PS, and your HTML tools in FP. Do this from the top down by
building each individual rectangle completely, and then stacking a new one
underneath it. This will require a) some knowledge of HTML and CSS (this is
REALLY indispensible), and b) some knowledge of FP's tools. There is really
no substitute for the basic understandings needed here - otherwise you will
be doomed to the hobby site, composed of one massive page after another,
with sound, and animated GIF images galore. Clearly, your design skills
will not be satisfied with that.

With specific reference to your page, I can see the use of 4 or 5 stacked
rectangles:

a) masthead (containing the banner - 2.2 MB is WAY too much, as is even 10%
that big)
b) menu
c) middle content
d) bottom content
e) footer

(d and e could be combined)

You can use tables, or CSS layout methods (yeah, I'm joking - stick to
tables or else you're likely to hurt yourself!) to do this.

This approach means you *won't* be using a separate layer for each
individual menu button, for example.

Does that help at all?
 
R

Rob Giordano \(Crash\)

baby steps first - read Murray's post.
maybe even experiment with a few basic webs first...don't go for the big
enchilada on the first try.

you have the beginnings of a nice web though!


| The graphic at the top is a animated gif. I don't have flash so I can't
do
| the fancy banners. What would you recommend to change that just make that
| banner have fewer images?
|
| The animated gif is part of the reason I am using so many layers. I
wanted
| it to be behind the menu bars etc.
|
| After reading some of the info on murrays link I think I am starting to
see
| that my whole thing is messed up. Not in a bad way, I just did not set it
up
| right from the start. Is it a matter of making one main correct, such as
| making it center, and placing the others layers in it?
|
| I apologize for being a pain. I wish I had a book or tutrial that could
| show this step by step.
|
| Thanks,
| Michael Deppa
|
| "Rob Giordano (Crash)" wrote:
|
| > It's really purty..really nice. BUT..you may want to start with some
basics
| > or you're gonna get flustered.
| >
| > One major thing;; your graphics load is incredibly huge...almost 2.2 meg
on
| > the motorcycle banner alone.
| >
| >
| > | > | Thanks. The link to the page is www.punkkidracing.com/elleby.htm
| > |
| > | Would I be better off starting from scratch again and getting it all
set
| > up
| > | just right. I used photoshop do design the page and sliced it and
placed
| > all
| > | the images into frontpage, that is why there is so many layers.
Because
| > some
| > | of the layers have to be over the large picture in the back etc. Kind
of
| > | hard to explain.
| > |
| > | I really appreciate you being patient with me, I am just trying to get
the
| > | jest of all this.
| > |
| > | Thanks,
| > | Michael Deppa
| >
| >
| >
 
P

punkkid

Rob and Murray, that all makes since. I will do some reading and more
practicing to get the hang of it. I appreciate everyone's help and if I have
any furture question I will certianly let you all know.

Another quick question though, what is some good FP and CSS materials that I
can gain a greater understanding of these tools.

Thanks,
Michael Deppa
 

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

Layer to stay on the page as you scroll down 4
bring a Layer to the Front ?? 2
How can I lock a layer box in place? 1
Front Page 2003. Layer Function Has Gone Dead. How Fix? 1
Use "Next Page Break" instead of "Page Break" on the cover page. 0
layers and FP 2003 3
Centering a layer w/image behind table 7
Layers and FP 2003 0

Top