dcsimg
www.webdeveloper.com
Results 1 to 4 of 4

Thread: AP Div positioning

  1. #1
    Join Date
    Apr 2011
    Posts
    19

    AP Div positioning

    hi i'm new enough to web design and have made a site with 2 ap divs for positioning images on my header. it all looked lovely on my laptop but when i checked it out on a 24 inch monitor the positioning was all over the place , heres my css

    #apDiv1 {

    position:absolute;
    width:308px;
    height:174px;
    z-index:1;
    margin-top: 15px;
    margin-right: 15px;
    margin-bottom: 15px;
    margin-left: 30px;
    left: 179px;
    top: -14px;
    }
    #apDiv2 {
    position:absolute;
    z-index:1;
    left: 727px;
    top: -190px;
    width: 385px;
    height: 220px;
    }

  2. #2
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    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

  3. #3
    Join Date
    Dec 2005
    Posts
    2,984
    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.

  4. #4
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    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
    Skip the z-index part if you want but notice how the "parent rule" works.
    Best wishes,
    Eye for Video
    www.cidigitalmedia.com

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles