Skip navigation
Currently Being Moderated

Help! Making Ap DIVs relative so they move with the rest of the page.

Jan 3, 2013 3:09 PM

Tags: #content #dreamweaver #ap #divs

Help!  I'm stuck.  I know that I used AP DIVs wrong and now I need to correct it.  Here is a link to one of the pages that is messed up.  http://www.thectkgroup.com/termsofuse.html

As you can see, the page moves when resizing the window, but the box of content in the middle does not.

 

Is there any way to fix this?  I'm a beginner.

 

Thank you.

Blake

 
Replies
  • Currently Being Moderated
    Jan 3, 2013 3:13 PM   in reply to bls201314

    Short of re-designing your layout without positioning, your could wrap your APDivs inside a relative positioned parent container.

     

    body {

        background-attachment: scroll;

        background-color: #000;

        background-repeat: repeat;

        background-position: center top;

        position:relative;

    }

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 3, 2013 3:24 PM   in reply to bls201314

    The <body> tag is the parent container of ALL containers in your page. 

     

    Open your CSS code and add position:relative to what you now have in your body selector.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 3, 2013 3:59 PM   in reply to bls201314

    Once I do that, then do I need to place my APDiv content box code somewhere?

    Nope. Your content is already inside the <body> tag, right?

     

    You should test your site in browsers with increased text sizes to make sure it's accessible though.

     

    In Firefox, go to View > Zoom > Text only.  Hit Ctrl++++ to see what happens.

    More often than not, APDivs cause text to get cut off because they are removed from the normal document flow.   This is one reason APDivs are such a poor layout method.

     

    Finally, be sure to validate your code & fix reported errors.

    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.thectkgro up.com%2Ftermsofuse.html

     

    Ampersands in code should be changed to & amp ; (without the spaces).

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 4, 2013 9:05 AM   in reply to bls201314

    Try replacing this:

     

    #apDiv32 {

    position: absolute;

    width: 1278px;

    height: 1988px;

    z-index: -5;

    background-color: #000000;

    left: -3px;

    top: -2px;

    }

     

    with this:

     

    #apDiv32 {

    width:1278px;

    margin-top:-15px;

    }

     

    You might want to add a CSS background-gradient to your body selector so the page doesn't have that blank white region under the form:

    http://www.colorzilla.com/gradient-editor/

     

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points