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.
