473,236 Members | 1,341 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,236 software developers and data experts.

overlapping layers relative to interior page content

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
2 11992
"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

"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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Lizzy | last post by:
I have an internet application which has a progress bar show whenever the customer is requesting data from the server. This progress bar is coded to work in both Netscape 4.75 and above and IE 5.0...
6
by: David List | last post by:
I'm having a problem using different properties of the document object in the example javascripts in my textbook with browsers that identify themselves as using the Mozilla engine. One example of...
3
by: Peter Jenkins | last post by:
I have some divs I am using to get a two column layout for a section of a page, like so; <div1> <div2> <div3> blah blah blah blah blah blah blah blah...
2
by: matthias tarasiewicz | last post by:
i have 2 problems with designing a rather big CSS driven site template: * how do i create absolute layers (DIV), that are positioned relative to each other? meaning: how can i create absolute...
2
by: Kalvin | last post by:
I am very new to CSS and am trying to set up 2 divs in the same space on the page. The idea is that div1 will be an informational message only displayed sometimes. When there isn't a message to...
1
by: Grimm | last post by:
I am developing an internalk inteface that integrates alot of seperate tools into one interface. The current version uses one Iframe inside a div layer for positioning. Currently the seperate web...
2
by: Liam Gibbs | last post by:
Hello everyone. I'm having a problem with a web page. What I have is one DIV (a header) overlapping the border around another DIV (a menu block). I want this, because I want to put this header...
0
by: richard12345 | last post by:
Hi Guys I have problem with site I am building. The sidebar with menu and other thinks is overlapping footer. The footer move with the content and but it dos it dos not move with the sidebar. ...
2
by: manugm1987 | last post by:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"><!--...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.