AP Div positioning

@Eye_for_VideoApr 23.2011 — #That's because of the absolute positioning... it's absolute!

Using this type of declared positioning is really not a very good idea for general page layout.

http://apptools.com/examples/pagelayout101.php

In the long run it's much better to learn page layout using CSS.

http://www.w3schools.com/css/default.asp

Best wishes,

Eye for Video

www.cidigitalmedia.com

@aj_nscApr 23.2011 — #Gotta be careful, Eye for Video. Absolute positioning is a fantastic CSS technique, you just have to be careful about when/how you use it. It's rarely ever a good idea to use position: absolute to position elements relative to the body (I know that sounds contradictory, but it's not).

To the OP, take you time and read up to learn what the different methods of positioning actually are and what they each do. They all have their uses, but, especially newcomers to CSS, you have to be careful that you don't use them unnecessarily.

W3Schools tutorials are a great way to learn about them.

@Eye_for_VideoApr 23.2011 — #Oh I don't doubt that absolute positioning is a fantastic technique... it's just not a very good technique for general page layout... expecially for inexperienced developers.

To the OP, perhaps the most common mistake when using a declared position is failure to understand the "parent" rule. Assigning a declared position to a Web page element can result in 2 completely different displays depending on whether or not the parent of the element also has a declared position.

So for example, the 2 divs you show above could display completely differently inside a parent which also has a declared position, then if you just display as you have coded. What's missing from above is the CSS for the parent.

As a review... from an old post:
One more thing about positioning. z-indexing only works with elements that have a declare position like absolute or relative, and how that element reacts to a declare position will depend on whether or not it's parent element also has a declare position.

So

Code:

#flash {

z-index:5;

}

will not work without ALSO giving it a declare position.

But the actual display of #flash will very depending on whether or not it's parent container (<div>) also has a declared position.

That is, if it's parent container DOES NOT also have a declared position, the child <div> will do 1 of 2 things.

If position:relative, it will position as desired but space will be left as though that element was still in the natural flow. So you may move the 500 X 100 element down and over, but a 500 X 100 space will be left, as though it was still there.

If position:absolute, child is positioned relative to browser window and that position does not change even if window contracts or expands.

So be sure to give a declared position to both the parent and the child <div>.

Example page using declared positions and z-indexing to sandwich Flash between 2 layers of text:

http://www.cidigitalmedia.com/tutorials/flash_div.html

View the source code or copy it and practice by changing z-index and positions.

Maybe this will help clear up any misunderstanding you have about declared positioning as well as the use of z-indexing:

More info here:

http://www.w3schools.com/css/css_positioning.asp

http://www.w3schools.com/css/pr_pos_z-index.asp[/QUOTE]
Skip the z-index part if you want but notice how the "parent rule" works.

Best wishes,

Eye for Video

www.cidigitalmedia.com

AP Div positioning

3 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

AP Div positioning

3 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #HTML _↴