19 Replies Latest reply: May 9, 2012 10:30 AM by The Cruiser RSS

    Ap Div help

    The Cruiser

      <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.

        • 1. Re: Ap Div help
          John Waller MVP

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

          • 2. Re: Ap Div help
            Nancy O. MVP

            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/

            • 3. Re: Ap Div help
              Ben Pleysier MVP

              @ 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

              • 4. Re: Ap Div help
                The Cruiser Community Member

                http://www.frankton-lapel.org/schools/lshs/baylor_jake_stfo/Baylor_jake_index.html

                 

                <!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>Untitled Document</title>

                <link href="css/baylor_jake.css" rel="stylesheet" type="text/css" />

                <style type="text/css">

                body {

                background-color: #f2f0d5;

                }

                #apDiv1 {

                width:100%;

                height:241px;

                left: 0px;

                top: 164px;

                background-color: #999900;

                position: absolute;

                z-index: -1;

                }

                #apDiv2 {

                width:1000px;

                height:960px;

                z-index:1;

                background-color: #30F;

                left: 137px;

                top: 11px;

                margin-right: auto;

                margin-left: auto;

                }

                </style>

                </head>

                <body>

                <div id="apDiv2"></div>

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

                </body>

                </html>

                 

                 

                 

                The green box in the background shows up the way I want it to but in Firefox the Green Box dissapears. The green box is an ap div with a -1 zindex and the main holder div would be ap Div2 but it is not actually an ap div.

                 

                If there is an easier layout would you please tell me how. Thanks.

                • 5. Re: Ap Div help
                  John Waller MVP

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

                   

                  baylor.png

                  • 6. Re: Ap Div help
                    The Cruiser Community Member

                    Thank you, I realized my Firefox version was out of date.

                    • 7. Re: Ap Div help
                      Nancy O. MVP

                      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/

                      • 8. Re: Ap Div help
                        The Cruiser Community Member

                        Thank you for your help, we are learning as we go and would like to know one more thing that we spotted in your source code.

                         

                        margin: 0 auto; /*

                        centered

                        */

                        min-height: 700px;

                         

                        We don't know what the centered or the min-height is for. Would you please explain this to us?

                         

                        Thanks.

                        • 9. Re: Ap Div help
                          The Cruiser Community Member

                          http://www.frankton-lapel.org/schools/lshs/caulin_stfo/ndex.html

                           

                           

                          Here is the page we are currently working on. We have two different sized monitors and the background (ap div) is aligned on one monitor but not aligned on the other. Any thoughts?

                          • 10. Re: Ap Div help
                            Nancy O. MVP

                            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/

                            • 11. Re: Ap Div help
                              The Cruiser Community Member

                              If you look here

                              http://www.frankton-lapel.org/schools/lshs/caulin_stfo/ndex.html

                              you can see that the gold background doesn't line up with the spry bar and the bottom of the div.

                              http://www.msn.com/ If you look on msn you can see the blue menu bar goes from the left of the screen all the way to the right with no space issues. We are wanting basicaly the same idea just to a bigger scale. How would you do this?

                              • 12. Re: Ap Div help
                                Nancy O. MVP

                                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/

                                • 13. Re: Ap Div help
                                  The Cruiser Community Member

                                  How would you do it without using ap divs?

                                  • 14. Re: Ap Div help
                                    Nancy O. MVP

                                    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/

                                    • 15. Re: Ap Div help
                                      The Cruiser Community Member

                                      We have tried to replicate your page... this is our code

                                       

                                      <!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>Untitled Document</title>
                                      <link href="nancy_style.css" rel="stylesheet" type="text/css" />
                                      <!--
                                      STYLE SHEET

                                      @charset "utf-8";
                                      body {
                                      font-family: Arial, Helvetica, sans-serif;
                                      font-size: 1em;
                                      background-color: #ffffcc;
                                      margin: 0px;
                                      padding: 0px;
                                      color: #4f5972;
                                      }
                                      #header {
                                      margin: 0px;
                                      padding: 0px;
                                      min-height: 100px;
                                      }
                                      #navbar {
                                      color: #FFFFFF;
                                      background-color: #0000CC;
                                      margin: 0px;
                                      padding: 0px;
                                      min-height: 22px;
                                      }
                                      #upper_content {
                                      background-color: caba66;
                                      margin: 0px;
                                      padding: 0px;
                                      min-height: 200px;
                                      }
                                      #lower_content {
                                      background-color: #FFFFFF;
                                      margin: 0px;
                                      padding: 0px;
                                      min_height: 200px;
                                      }
                                      #footer {
                                      margin: 0px;
                                      padding: 0px;
                                      min-height: 100px;
                                      border-top-width: 4px;
                                      border-top-style: solid;
                                      border-top-color: #CCCCCC;

                                      }
                                      .section {
                                      width: 920px;
                                      margin-top: 0px;
                                      margin-right: auto;
                                      margin-bottom: 0px;
                                      margin-left: auto;
                                      padding-top: 0px;
                                      padding-right: 12px;
                                      padding-bottom: 0px;
                                      padding-left: 12px;
                                      }
                                      .right {
                                      text-align: right;
                                      }
                                      .center {
                                      text-align: center;
                                      }
                                      .float_left {
                                      float: left;
                                      width: 50%;
                                      }
                                      .float_right {
                                      float: right;
                                      width: 50%;
                                      }
                                      .float_right:after {
                                      font-size: 0px;
                                      display: block;
                                      clear: both;
                                      height: 0px;
                                      visibility: hidden;
                                      }
                                      .float_left:after {
                                      font-size: 0px;
                                      display: block;
                                      clear: both;
                                      height: 0px;
                                      visibility: hidden;
                                      }
                                      #header_ h1 {
                                      font-family: Verdana, Arial, Helvetica, sans-serif;
                                      font-size: 4.75em;
                                      font-style: oblique;
                                      color: #caba66;
                                      }
                                      #header_h2 {
                                      font-size: 1.75em;
                                      color: #00000;
                                      margin-top: 12px;
                                      margin-right: 240px;
                                      }
                                      -->
                                      </head>

                                      <body>
                                      <div class="section" id="header">Content for  class "section" id "header" Goes Here</div>
                                      <div class="section" id="navbar">Content for  class "section" id "navbar" Goes Here</div>
                                      <div class="section" id="upper_content">Content for  class "section" id "upper_content" Goes Here
                                        <div class="right">Content for  class "float_right" Goes Here</div>
                                      </div>
                                      <div class="section" id="lower_content">Content for  class "section" id "lower_content" Goes Here
                                        <div class="right">Content for  class "float_right" Goes Here</div>
                                      </div>
                                      <div class="section" id="footer">Content for  class "section" id "footer" Goes Here
                                        <div class="float_left">Content for  class "float_left" Goes Here</div>
                                        <div class="right">Content for  class "float_right" Goes Here</div>
                                      </div>
                                      </body>
                                      </html>

                                       

                                      ...and this is what it comes out to look like http://www.frankton-lapel.org/schools/lshs/baylor/background.html

                                       

                                      Thanks

                                      • 16. Re: Ap Div help
                                        Nancy O. MVP

                                        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/

                                        • 17. Re: Ap Div help
                                          The Cruiser Community Member

                                          I took it out of the comment, here is the site that I tried to recreate using your css... http://www.frankton-lapel.org/schools/lshs/baylor/background.html

                                          Any ideas on why my page is not reacting to the css like yours?

                                           

                                           

                                          We really appreciate the help!

                                          Thanks

                                          • 18. Re: Ap Div help
                                            Nancy O. MVP

                                            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/

                                            • 19. Re: Ap Div help
                                              The Cruiser Community Member

                                              We have got it now, thanks a lot... It was dreamweaving not putting the code out correctly.

                                               

                                              Thanks a lot for all your help, Me and the web design kids in our class really appreciate it.

                                               

                                              Thakns