Skip navigation
Currently Being Moderated

Ap Div help

Apr 18, 2012 10:23 AM

<body>

<div id="holder">Content for  id "holder" Goes Here</div>

<div id="apDiv1"></div>

</body>

 

I want the holder to be in front of the ap div but when I put the ap div on -1 z-index the ap div works fine in Explorer but not Firefox.

 
Replies
  • Currently Being Moderated
    Apr 18, 2012 12:59 PM   in reply to The Cruiser

    Best if you upload your (non-)working page to the web and post a link so we can view it in our browsers.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 18, 2012 6:10 PM   in reply to The Cruiser

    APDivs are removed from normal document flow.  As such they are disconnected from everything else around them.

    Frankly, I don't understand what you mean by "I want the holder to be in front of the ap div."   Backwards/forwards, left side/right side, top/botom??

     

    As John said, for best answers to layouts questions, please show us a link to your test page.  Briefly describe what you want to achieve.

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 18, 2012 6:22 PM   in reply to Nancy O.

    @ Nancy

     

    I hope you do not mind me using one of your phrases

    The proper procedure is DO NOT USE APDIVS for primary layouts.

    @ OP

     

    You can achieve a better result using statically positioned div's (default value) and applying widths, floats and margins. Although regarded by some as being a hack, there is nothing wrong with using negative margins to show one div over and above another div.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 19, 2012 10:23 AM   in reply to The Cruiser

    Looks the same to me in IE9 and FF11 - blue box on top of green BG box.

     

    baylor.png

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 19, 2012 11:49 AM   in reply to The Cruiser

    Some people will invariably be using "out of date browsers."  So the bigger question here is why complicate your layout with APDivs when you don't need to?    A simple repeating background image on the body selector will do what you want.

     

    http://alt-web.com/Images/BG/yellow-green-bg.jpg

    Live Example  (view source in browser to see the code):

    http://alt-web.com/TEST/background-test.html

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 20, 2012 10:51 AM   in reply to The Cruiser

    margin:0 auto is a shorter way of expressing the following CSS rules. The value of auto is browser default.

     

    margin-top:0;

    margin-right: auto;

    margin-bottom:0;

    margin-left: auto;

     

    When combined with width, a margin-right & margin-left of 'auto' centers the container in browsers.

     

    In web design, it's best to avoid using explicit height values on containers because this limits how much content the container can hold. Unlike height, min-height does not limit the containers capacity to hold more content when needed.

     

    CSS margins

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

     

    CSS min-height

    http://www.w3schools.com/cssref/pr_dim_min-height.asp

     

    CSS height

    http://www.w3schools.com/cssref/pr_dim_height.asp

     

    CSS Box Model

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

     

    CSS Backgrounds

    http://www.w3schools.com/cssref/css3_pr_background.asp

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

    http://alt-web.blogspot.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 24, 2012 10:39 AM   in reply to The Cruiser

    How would you do this?

    Not how I would do it because I don't believe you should be using APDivs for any of this. 

    However, based on what you have so far, change your #apDiv1 styles as follows:

     

    #apDiv1 {

        position:absolute;

        width:100%;

        min-height:500px;

        z-index:-1;

        left: 0px;

        top: 120px;  /**adjust as needed**/

        background-color: #CABA66;

    }

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

    http://alt-web.blogspot.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 26, 2012 1:22 PM   in reply to The Cruiser

    How would you do it without using ap divs?

     


    With default CSS positioning, margins, floats, classes, background-colors and borders. 

     

    To illustrate, Copy & Paste the following code into a new, blank HTML document.  Preview in browsers with increased/decreased text sizes.  You can't break this layout because it's cohesive.   Your APDiv layout falls apart when text size is increased in browsers.

     

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Example CSS Layout, no APDivs</title>
    
    <style type="text/css">
    
    /**add browser scroll to short pages**/
    html {overflow-y:scroll; font-size:65.25%;}
    
    body {
    margin:0;
    padding:0;
    font-size: 1em;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    background-color:#FFFFCC;
    color:#4F5972
    }
    
    #header {
    margin:0;
    padding:0;
    min-height: 100px;
    }
    
    #nav {
    margin:0;
    padding:0;
    min-height: 22px;
    background-color:#4F5972;
    color: #FFF;}
    
    #UpperContent {
    margin:0;
    padding:0;
    background-color:#CABA66; 
    min-height: 200px;}
    
    #LowerContent {
    margin:0;
    padding:0;
    background-color: #FFF; 
    min-height: 200px;}
    
    #footer {
    margin:0;
    padding:0;
    min-height:100px;
    border-top:4px solid silver;
    }
    
    /**RE-USABLE CLASSES**/
    
    .section {
    width:920px; 
    margin:0 auto; /**with width, this is centered on screen**/
    padding:0 12px 0 12px;
    }
    
    .right {text-align:right}
    .center {text-align:center}
    
    /**FLOATS AND CLEARING**/
    .floatLt {float:left; width:50%}
    .floatRt {float:right;width:50%;
    }
    .floatRt:after, .floatLt:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
    /**TEXT STYLES**/
    h1, h2, h3, h4, p {margin:0; padding:0}
    
    #header h1 {
    font-size:4.75em;
    font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-style: oblique; 
    color:#CABA66;
    text-shadow: 5px 2px 5px #000;
    /**shadows for IE**/
    filter: dropshadow(color=#000000, offx=5, offy=2);
    }
    
    #header h2 {
    margin-top:12px;
    font-size: 1.75em; 
    color:#000; 
    margin-right: 240px;}
    
    </style>
    </head>
    
    <body>
    <!--begin header -->
    <div id="header">
    <div class="section">
    header here...
    <h1 class="center">Lapel High School</h1>
    <h2 class="right">"Home of the Bulldogs!"</h2>
    </div>
    <!--end header --></div>
    
    <!--begin navigation -->
    <div id="nav">
    <div class="section">
    Navigation menu here
    </div>
    <!--end navigation --></div>
    
    <!--begin upper content -->
    <div id="UpperContent">
    <div class="section">
    
    <div class="floatRt">
    <p class="right">Float right - upper content</p>
    </div>
    
    <p>Upper content...</p>
    </div>
    <!--end upper content --></div>
    
    <!--begin lower content -->
    <div id="LowerContent">
    <div class="section">
    
    <div class="floatRt">
    <p class="right">Float right - lower content</p>
    </div>
    
    <p>Lower content...</p>
    </div>
    <!--end lower content --></div>
    
    <!--begin footer -->
    <div id="footer">
    <div class="section">
    
    <div class="floatLt">
    <p>Float left - &copy; 2012 footer text</div>
    
    <div class="floatRt">
    <p class="right">Float right - more footer text, blah, blah, blah, blah, blah...</p> 
    </div>
    
    </div>
    <!--end footer --></div>
    
    </body>
    </html>

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

    http://alt-web.blogspot.com/

     
    |
    Mark as:
  • Currently Being Moderated
    May 7, 2012 11:13 AM   in reply to The Cruiser

    Your CSS styles are commented out <-- STYLESHEET

     

    This is how mine looks.

    http://alt-web.com/TEST/LHS-test.html

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

    http://alt-web.blogspot.com/

     
    |
    Mark as:
  • Currently Being Moderated
    May 8, 2012 11:04 AM   in reply to The Cruiser

    Because your HTML is completely different from mine.  No shortcuts allowed for this type of layout.

     

    <div id="header">

    <div class="section">

    <p>Div id header, div class section goes here</p>

    </div>

    </div

     

    <div id="navbar">

    <div class="section">

    <p>Div id navbar, div section goes here</p>

    </div>

    <div>

     

    <div id="upper_content">

    <div class="section">

     

    <!--FLOATS COME FIRST-->

     

    <div class="float_right">

    <p class="right>Div id upper_content, div class section, div class float_right, p class right goes here</p>

    </div>

     

    <p>Upper_content goes here</p>

    </div>

    </div>

     

    I think you get the idea.  Good luck!

     

    PS. check your CSS again, you're missing a # on one of your background-color values.

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

    http://alt-web.blogspot.com/

     
    |
    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