tables and layers

This, then, makes it seem that the bullet container is relative
to the end of the text inside the main container "bodyMain", and not
relative
to the upper-left of the gray box (bodyMain).

That is correct. Relative positioning is always done from the point where
the element would have been if it were position:static. Furthermore,
relatively positioned elements are *NOT* removed from the normal flow, and
therefore occupy space on the page. This can be confusing since you could
have something like this -

<p>here is a paragraph</p>
<p style="position:relative;top:-100px; left:450px;">here is another
paragraph</p>
<p>here is a third paragraph</p>

What you will see on the page is -

--------------------
here is a paragraph

here is a third paragraph
---------------------

and the paragraph that is relatively positioned will be 100px up and 450px
to the right of the space between the two paragraphcs - but that space will
still be there between the two paragraphs as if there were a third paragraph
in that location!

Doesn't Top = 10 mean the element is 10 px down from whatever; kind of
like a
margin?

Yes.

Doesn't this then make it relative to the
bottom of the bulleted container and not the top-left?

Yes. Is the light bulb on yet?


--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================


"NewellScott" <webforumsuser (AT) macromedia (DOT) com> wrote

Thanks Murray, very helpful.

The thread below brings me to another question regarding relative
positioning.
I have put images inside containers to help position them in text, but
have had
trouble understanding where that "upper-left" position is.

On the following page
(http://homepage.mac.com/nshoffner/EEC/Services/Substation.htm) the gray
box
with "Substation Design and Construction Management" at the top is a
"Relative"
positioned div (called "bodyMain"). Inside the gray box, the bold title is
h3
styled, the first paragraph is a inline <p> styled and the bulleted list
("listContainer") is in a Relative div which positions at Top = 10px (all
are
px) Left = 8. This, then, makes it seem that the bullet container is
relative
to the end of the text inside the main container "bodyMain", and not
relative
to the upper-left of the gray box (bodyMain).

Doesn't Top = 10 mean the element is 10 px down from whatever; kind of
like a
margin?

I had trouble positioning the two images also, so I put them into Relative
div's, right under the div for the bulleted list. To get the pictures to
position where they are in the page you see, the position is, get this,
top =
-100 left = 250 (or right = -250)! Doesn't this then make it relative to
the
bottom of the bulleted container and not the top-left?

BTY, the picture I am talking (the top one) of is in a container class
called
"pickInLineRight"

Thanks


In
other words, the absolute position of the layer is not positioned
relative
to
the upper-left of the browser window, but relative to the bottom-left of
the
first "relative" element (or maybe it is in relation to the upper-left
of
the
element...can't remember).

Yes - upper left.

It's still a little dim, but it is certainly turned on now!

Thanks, a lot!

This may help you understand positioning a bit -

There are 4 different types of positioning:
Absolute
Relative
Fixed
Static

Here is a brief explanation of each kind....

Position:absolute
-----------------------
This does several things -
1. It 'removes' the element from the flow of the code on the* page so that
it can no longer influence the size or position of any other pa*ge element
(except for those contained within it, of course).

2. The absolutely positioned element takes its position from the position of
its closest PA*RENT *positioned*
element - in the absence of any explicitly positioned parent, this will
default to the <body> tag, which is always positioned *at 0,0 in the browser
viewport.

This means that it doesn't matter where in the HTML code the laye*r's code
appears (between <body> and </body>), its location on the screen will not
change. Furthe*rmore, the
space in which this element would have appeared were it not positi*oned is
not
preserved on the screen. In other words, absolutely positioned elements
don't take up any space on the page. In fact, they FLOAT over the page.

Position:relative
----------------------
In contrast to absolute positioning, a relatively positioned page element is
*not* removed from t*he flow of the
code on the page, so it will use the spot where it would have* appeared
based
on its position in the code as its zero point reference. If* you then
supply top, right, bottom, or left positions to the style for this *element,
those
values will be used as offsets from its zero point.

This means that it DOES matter where in the code the relativ*ely positioned
element appears, as it will be positioned in that location (*factoring in
the offsets) on the screen. Furthermore, the space where this e*lement
would
have appeared is preserved in the display, and can therefore* affect the
placement of succeeding elements. This means that the taller a relatively
positioned element is, the more space it forces on the page.

Position:static
-------------------
As with relative position, static positions also "go with *the flow". An
element with a static position cannot have values for offset*s (top, right,
left, bottom) or if it has them, they will be ignored. Unless explicitly
positioned, all div elements default to static positioning.

Position:fixed
------------------
A page element with this style will not scroll as the page c*ontent scrolls.
Support for this in elements other than page backgrounds is *quirky

There are two other things you need to know:

1. ANY page element can be positioned - paragraphs, tables, images, lists,
etc.
2. The <div> tag is a BLOCK level tag. This means that if it is not
positioned or explicitly styled otherwise, a) it will always begin on a new
line on the screen, and b) it will always force content to a new line below
it, and c) it will always take up the entire width of its container (i.e.,
width:100%).

You can see a good example of the essential difference between absolute and
relative positioning here -

http://www.great-web-sights.com/g_layersdemo.asp


--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================


"NewellScott" <webforumsuser (AT) macromedia (DOT) com> wrote

It's still a little dim, but it is certainly turned on now!

Thanks, a lot!

Murray, Great info!

Question. How do you have a sidebar fill down (background color) for the whole
browser height, no matter what the height is. I have the color repeat-y, but,
as you know it only goes as far as the box dictates.

Also, I tried to make my side bar TOC relative with an auto height and a large
padding (I also tried to just make the height a large amount (3000px). Both of
these to eliminate the need for a scroll bar in the grey area to the right (as
it has an auto height too and is positioned relative to the sidebar). But then,
since it and the other elements are relative to the Bottom of the TOC, I
couldnt get it to work. I just went back to an absolute positioning for the
sidebar to get it to work.

Question. How do you have a sidebar fill down (background color) for the
whole
browser height, no matter what the height is. I have the color repeat-y,
but,
as you know it only goes as far as the box dictates.

The simplest way is to do a faux column. It's a page background image that
tiles vertically with a colored area the same color as the column
background.

I'm not following your second paragraph, though.

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================


"NewellScott" <webforumsuser (AT) macromedia (DOT) com> wrote

Murray, Great info!

Question. How do you have a sidebar fill down (background color) for the
whole
browser height, no matter what the height is. I have the color repeat-y,
but,
as you know it only goes as far as the box dictates.

Also, I tried to make my side bar TOC relative with an auto height and a
large
padding (I also tried to just make the height a large amount (3000px).
Both of
these to eliminate the need for a scroll bar in the grey area to the right
(as
it has an auto height too and is positioned relative to the sidebar). But
then,
since it and the other elements are relative to the Bottom of the TOC, I
couldnt get it to work. I just went back to an absolute positioning for
the
sidebar to get it to work.