ADOBE DREAMWEAVER:

Home

Dreamweaver Forum

Dreamweaver Tutorials

FAQ

Adobe Flash

Web Design

Multiple Div Relatives - Div Absolutes ?


	Cow Forums : Adobe Dreamweaver << PREVIOUS THREAD • VIEW ALL THREADS • PRINT • NEXT THREAD >>

Multiple Div Relatives - Div Absolutes ?
by Michael Stancato on Mar 30, 2009 at 4:00:36 pm

Is there only one opportunity per page to create the relationship between one div relative and multiple div absolutes?

Or can I create multiple hierarchies such as this:

--------------------------------------
Home page

div-relative1
div-absolute1a
div-absolute1b

div-relative2
div-absolute2a
div-absolute2b
div-absolute3b
--------------------------------------

Respond to this post • Return to posts index

Re: Multiple Div Relatives - Div Absolutes ?
by Abraham Chaffin on Mar 30, 2009 at 6:06:25 pm

Yes this is absolutely correct.

Abraham

Respond to this post • Return to posts index

Re: Multiple Div Relatives - Div Absolutes ?
by Michael Stancato on Mar 31, 2009 at 12:00:42 am

Sorry to be pedantic but you mean yes there is only one opportunity right?

Respond to this post • Return to posts index

Re: Multiple Div Relatives - Div Absolutes ?
by Abraham Chaffin on Mar 31, 2009 at 12:53:54 am

Yes to
Or can I create multiple hierarchies such as this:

You can have multiple relative parents of absolutely located divs

Abraham

Respond to this post • Return to posts index

Re: Multiple Div Relatives - Div Absolutes ?
by Michael Stancato on Mar 31, 2009 at 3:24:37 am

Do I need to learn more about selectors to do this? What keywords or kind of tutorial do I look up to write the proper code to separate the hierarchies?

Respond to this post • Return to posts index

Re: Multiple Div Relatives - Div Absolutes ?
by Abraham Chaffin on Mar 31, 2009 at 3:15:41 pm

The proper code is rather simple. It's just logic. A container (divs) with relative positioning becomes the parent of containers (divs) with absolute positioning. (I say containers because they could be spans or tables or other containers as well.) So when you set the position using the top, left, bottom or right parameters of the child containers the position will be relative to the position of the parent's location. If the child container that has absolute positioning doesn't have a parent, the parent becomes the main body tag which most people are use to when they layout their entire page with absolute positioned divs.

Abraham

Respond to this post • Return to posts index

Re: Multiple Div Relatives - Div Absolutes ?
by Michael Stancato on Mar 31, 2009 at 5:51:00 pm

I understand what you said. Do you have a code example?
The code I know won't refer to multiple hierarchies. There must be additional types of selectors but I don't know what keywords to google to find examples.

Respond to this post • Return to posts index

Re: Multiple Div Relatives - Div Absolutes ?
by Abraham Chaffin on Mar 31, 2009 at 6:42:47 pm

Here's some example code - first the result visible in browser and below it the code visible in browser:

Yellow Background Relative Positioned Div Parent

Teal Background Absolute Positioned Div Child

Green Background Absolute Positioned Div Child

Grey Background Relative Positioned Div Parent

Blue Background Absolute Positioned Div Child

Pink Background Absolute Positioned Div Child

<div style="position:relative; width:500px; height:500px; background-color:#FFFF00;">Yellow Background Relative Positioned Div Parent



	<div style="position:absolute; top: 100px; left:100px; width:150px; height:150px; background-color:#00FFFF;">



	Teal Background Absolute Positioned Div Child



	</div>



	<div style="position:absolute; bottom: 100px; right:100px; width:150px; height:150px; background-color:#339900;">



	Green Background Absolute Positioned Div Child



	</div>



</div>



<div style="position:relative; width:500px; height:500px; background-color:#999999;">Grey Background Relative Positioned Div Parent



	<div style="position:absolute; top: 100px; left:100px; width:150px; height:150px; background-color:#0000CC;">



	Blue Background Absolute Positioned Div Child



	</div>



	<div style="position:absolute; bottom: 100px; right:100px; width:150px; height:150px; background-color:#FF6699;">



	Pink Background Absolute Positioned Div Child



	</div>



</div>

Abraham

Respond to this post • Return to posts index

Re: Multiple Div Relatives - Div Absolutes ?
by Michael Stancato on Apr 4, 2009 at 3:15:56 am

What you're demonstrating here is that there doesn't need to be a different ID for each hierarchy. What separates the hierarchy is the order in which the divs are written into the code. Correct?

Respond to this post • Return to posts index

Re: Multiple Div Relatives - Div Absolutes ?
by Abraham Chaffin on Apr 4, 2009 at 1:26:55 pm

What's being demonstrated is that setting a div's position to relative essentially sets it up to be a parent of absolute divs that are placed inside of it.

Setting up the layout of your divs as shown in the previous posts makes the positioning of the absolute divs relative to the parent divs.

Abraham

Respond to this post • Return to posts index


	<< PREVIOUS THREAD • VIEW ALL THREADS • PRINT • NEXT THREAD >>