By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,767 Members | 1,198 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,767 IT Pros & Developers. It's quick & easy.

overlapping layers relative to interior page content

P: n/a
I need to know how to overlap DIV content within 'relative' associated
rendering. I am building div layers in the middle of a page and when I set
positioning to absolute in the CSS, it references back to 0,0 on the entire
page. If I set it to relative, the div layers will not overlap as needed.
I prefer to avoid javascripting an 'innerHTML' re-write of a single div and
would instead like to build two layers that can reside at the same position
and be of the same size that I could 'turn on and off' as needed. The other
content 'up' and 'left' of this item may change over time and I prefer not
to have maintenance nightmares in the future should this happen, as this is
not the only page that may require such a solution on what is to be a large
and growing site.

Another thing I noticed is that if I set absolute, the 'table' I built with
a pretty CSS border to go around this content does not 'fill' to the proper
size without my 'pushing' it with transparent spacer images of the
appropriate size. Is there any way to overlap content within a container in
the middle of the page and/or what is the best way to do this? The
information to follow provides additional information on this particular
solution should anyone be interested....

Kathy Lynn

PREFACE:
I tend to prefer to code my pages as modularized as possible - in
otherwords, using various forms of server side includes to build regions of
the page independently. Most of the pages I develop use what one company I
worked for referred to as a 'hockey stick' approach using tables to build a
header area with navigation buttons/items along the bottom, and a left
margin with further buttons/items and finally a footer at the bottom with
other links, etc. This leaves a content area on the middle right of the page
taking up the majority of the browser display area. It is my preference
whenever possible to avoid framesets to achieve this.

STATUS:
So now I want to build one content peice [that is, a content container to be
independant of the top, left (and bottom) navigation 'bars']. I am building
this particular item to work like a tab-topped menu (rolodex style?) with
different tabs containing mixtures of either image content or dropped in
html and asp content. The items are not particularly complex or bulky and
as of yet I only have one 'html' based tab, the rest being images. The way
I had to do it thus far was to create a table for the 'html tab'.
The content area itself resides within a parent table (<TD></TD> element)
that divides the above mentioned 'sections' of the page. The 'rolodex'
style gui is another table with the 'tabs' in the first row and the 'html
tab' table {mentioned above} in the second. Simple layout stuff.
My current method takes the table and sets it visible or invisible based on
whether that 'tab' is selected, and uses either a transparent gif or one of
a selection of dynamically assigned gif files associated with the additional
tabs as the 'background' of the cell/TD holding the 'html tab' table. It
works great on screen - but will not print properly unless the user's
browser is configured to print background colors and images.
Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
"Catherine Lynn Wood" <kw***@accuemail.com> wrote in
news:3f********@news.splitrock.net:
I need to know how to overlap DIV content within 'relative' associated
rendering. I am building div layers in the middle of a page and when
I set positioning to absolute in the CSS, it references back to 0,0 on
the entire page. If I set it to relative, the div layers will not
overlap as needed. I prefer to avoid javascripting an 'innerHTML'


Common misunderstanding of the difference between absolute and relative
positioning. Absolute positioning is actually relative to either a) the
entire viewport or b) the nearest containing block with a position set to
anything other than (the default) static. In both cases the positioned
element is taken out of the flow and repositioned.

Relative positioning, OTOH, always positions the element relative to the
position it would have had if it were statically positioned, and does *not*
take it out of the flow for layout purposes; the space it would have taken
if it were statically positioned will still be taken.

So if you need to position an element relative to a container element, you
have to give the container element a position: value (usually just
"relative" without specifying an offset) and then set position: absolute
for the element being positioned, with offsets relative to the edges of the
container.

Confusing, ain't it?
Jul 20 '05 #2

P: n/a

"Eric Bohlman" <eb******@earthlink.net> wrote in message
news:Xn*******************************@130.133.1.4 ...
"Catherine Lynn Wood" <kw***@accuemail.com> wrote in
news:3f********@news.splitrock.net:
I need to know how to overlap DIV content within 'relative' associated
rendering.
if you need to position an element relative to a container element, you
have to give the container element a position: value (usually just
"relative" without specifying an offset) and then set position: absolute
for the element being positioned, with offsets relative to the edges of the container.

Confusing, ain't it?


No - not actually - I was actually assuming it might be something like that
as I have gotten it to work before. But wasn't sure just what in my layout
caused it to 'work' in those instances. I would have likely arrived at that
conclusion eventually anyway but was more frustrated with the fact the
current attempt was not working as the previous one had. Thanks for the
information - I will give it a try.

But I still ponder the other question - if I add the 'relative' positioning
to the parent cell then use absolute for both the Table (HTML layout) filled
div and the Image (IMG tag) filled div, will the parent cell render to the
right height and width? Lemme go check before I click send here...

Nope - it didn't - but that was remedied with creating a 'div' instead to
take the 'relative' css and then fixing the width and height to the size I
needed. Granted the 'height' option is sticky sometimes, but it did appear
to work in this instance. I also had to make sure to include a left column
in my HTML to force the height as well or the table would not center
vertically. (just for the record)

Once again - thanks!

KL
Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.