SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Aug 2004
    Location
    canada
    Posts
    331
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    sticky footer code does not help here

    I am having trouble getting this sticky footer to work:

    http://www.search-this.com/2009/10/0...ticky-subject/


    My results are here:

    http://pi33rietlu.thelostmenu.com/


    The troube is that the border shadow should extend to the very bottom behind the footer. The background image for the main content area will not extend to the bottom either.

    Thanks

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The border shadow must go on the div that has the min-height:100% set on it which is your #main_bg div. You have it on the .container div instead.

    However that may not work with your image design, but any image you want to extend down to the footer must go on the min-height:100% div.

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    You really don't need all those inner containers with the IE5 box model hacks. It is just going to cause problems for you with this layout and IE5 is dead browser. It is not worth the trouble it is going to cause you.

    I had to clean out some of the box model hacks to get it to work but I did not clean them all up.

    Run this as test.html in your root folder and it should get you close to what you are after.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
      <title>Applying CSS Mini-site</title>
    
      <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    
      <style type="text/css" media="screen, projection">
      @import "css/basic.css";
      </style>
    
    
    
      <style type="text/css">
    
    /* ---------- self-clearing floats ----------- */
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    /* CSS rule for IE6 */
        * html .clearfix {
        height: 1%;
    }
    
    /* CSS rule for IE7 */
    *:first-child+html .clearfix {
        min-height: 1px;
    }
    
    /*  Default Styles  */
    a { color: #ffc50c; text-decoration: none; }
    a:hover { cursor: pointer; text-decoration: underline; }
    a img { border: 0; }
    .fl { float: left; display: inline; }
    .fr { float: right; display:inline; }
    .ac { text-align: center; }
    .ar { text-align: right; }
    .al { text-align: left; }
    .cl { clear: both; height: 0; line-height: 0; font-size: 0; text-indent: -4000px; }
    .hidden { display: none; }
    .notext { font-size: 0; line-height: 0; text-indent: -4000px; }
    
    /* ---------------- layout ----------------- */
    body
    {
        font-family:Arial, Helvetica, sans-serif;
        margin:0;
        padding:0;
        background:url(images_new/tile_bg.png) repeat;
    }
    
    #top /*main*/
    {
        position:absolute;
        left:0;
        width:100%;
        height:178px;
        position:absolute;
        background:url(images_new/bg.png) repeat-x;
        padding-bottom:0;
            
    }
    
    #header
    {
        background:url(images_new/header_bg.jpg) no-repeat;
        height:168px;
        margin-left:50px;
    }
    
    #logo
    {
        background:url(images_new/logo.png) no-repeat;
        margin-left:0;
        height:70px;
        width:406px;
        float:left;
        display:inline;
        position:relative;
        top:10px;
        left:0;
    }
    
    #logo h1
    {
        text-indent:-9999px;
    }
    
    #sidebar
    {
        float:right;
        display:inline;
        margin-top:20px;
        margin-right:50px;
        width:300px;
    }
    
    #content
    {
        float:left;
        display:inline;
        margin-top:20px;
        margin-left:70px;
        width:460px;
        padding:0 0 93px 0;
    
    }
    
    #content h1
    {
        font-family:arial. sans-serif;
        font-size:2em;
        color:#4BAEDC;
    }
    
    #footer
    {
        width:900px;
        margin:auto;
        margin-top:-93px;
        background:url(images_new/footer_bg.png) bottom center no-repeat;
        clear:both;
        position:relative;
    }
    
    #footer .container
    {
        background:url(images_new/footer_bg.png) bottom center no-repeat;
        height:93px;
        p/adding-bottom:0;
        p/adding-top:0;
        b/order-top:0 solid #000;
        m/argin-left:50px;
    }
    
    #footer .container p
    {
        text-align:center;
        margin:0;
    }
    
    
    /* --------------- sticky footer --------------- */
    html, body {
        height:100%;/* needed to base 100% height on something known*/
        text-align:center;
    }
    #outer {
        background:url(images_new/content_bg.png) repeat-y;
        width:900px;
        margin:0 auto;
        min-height:100%;
        /*margin-top:-93px;/*footer height - this drags the outer 40px up through the top of the monitor */
        text-align:left;
        position:relative;
    }
    #header {
        b/ackground:red;
        /*border-top:93px solid #fff; /* soak up negative margin and allows header to start at top of page*/
    }
    #footer {/* footer now sits at bottom of window*/
        b/ackground:red;
        w/idth:760px;
        m/argin:auto;
        height:93px;/* must match negative margin of #outer */
        clear:both;
    }
    /*Opera Fix*/
    body:before {/* thanks to Maleika (Kohoutec)*/
        content:"";
        height:100%;
        float:left;
        width:0;
        margin-top:-32767px;/* thank you Erik J - negate effect of float*/
    }
    h1,h2,p{padding:0 10px;}
    
    
    /* ----------------------- main navigation ------------------ */
    #menubar
    {
        height:36px;
        float:left;
        display:inline;
        margin-top:62px;
        margin-left:0;
        width:800px;
        position:relative;
        z-index:5;
    }
    
    #menu
    {
        border-top:0 solid #8088C6;
        border-bottom:0 solid #8088C6;
        text-align:left;
        list-style:none;
        margin:0 auto;
        padding:0;
    }
    
    #menu li
    {
        background:url(images_new/sep.png) top left no-repeat;
        height:36px;
        line-height:36px;
        display:inline-block;
        margin:0 -2px;
    }
    
    #menu li.home
    {
        background-image:none;
    }
    
    #menu li a
    {
        display:inline-block;
        font-size:1.1em;
        text-decoration:none;
        color:#fff;
        outline:none;
        font-family:arial,sans-serif;
        text-transform:uppercase;
        padding:0 0 0 57px;
    }
    
    #menu li a:hover
    {
        text-decoration:underline;
    }
    
    #menu li a b
    {
        float:left;
        display:block;
        font-weight:400;
        padding:0 20px 0 0;
    }
    
    #menu li a:hover b
    {
        color:#fff;
    }
    
    * html #menu li,*+html #menu li
    {
        display:inline;
    }
    
      </style>
      
      
    <!--   sticky footer  -->
    <!--[if (lte IE 6)|(gte IE 8)]>
    <style type="text/css">
    #outer {height:100%;display:table;}
    </style>
    <![endif]-->  
      
      
    </head>
    
    
    <body>
    <div id="top"></div>
      
      <div id="outer">
            <div id="header">
              <div id="logo">
                <h1>Logo</h1>
              </div>
    
              <div id="menubar">
                <ul id="menu">
                  <li class="home"><a href="#"><b>Home</b></a></li>
    
                  <li><a href="#"><b>About</b></a></li>
    
                  <li><a href="#"><b>Laminate</b></a></li>
    
                  <li><a href="#"><b>Contact</b></a></li>
                </ul>
              </div>
            </div><!-- /header-->
    
    
    
            <div id="content">
              <h1>Welcome to our website</h1>
    
              <p>This is 
              WordPress. Lorem ipsum</p>
            </div><!-- /content-->
    
            <div class="cl">
              &nbsp;
            </div>
      </div><!--/outer-->
    
      <div id="footer">
        <div class="container">
          <p>&copy; 2010 Company - All Rights Reserved</p>
        </div><!-- /container-->
      </div><!-- /footer-->
    </body>
    
    
    </html>

  4. #4
    SitePoint Addict
    Join Date
    Aug 2004
    Location
    canada
    Posts
    331
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much.

    I had hoped the shadow could be placed in an internal div but I suppose that is impossible. I forgot that anything outside the vertically uniform pattern has to be absolutely positioned.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,795
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Good work Ray.


    I had hoped the shadow could be placed in an internal div
    There is only ever one element that can stretch to the bottom (apart from the body) and is explained in the article you linked to. Everthing must be accomplished on that element unfortunately.

    In CSS you can't have multiple nested elements all stretching to the bottom because it doesn't work that way.

    As Ray mentioned your box model hacks are wrong and unnecessary anyway these days.

    In fact they could lead to problems as you have the backslash before the lettters a-f which means that they will be treated as hex instead. The backslash hack is only used before letters later in the alphabet (e.g. he\ight:100px).

    It seems you have used a forward slash anyway so remove them all.

    Code:
    m/argin:auto;

  6. #6
    SitePoint Addict
    Join Date
    Aug 2004
    Location
    canada
    Posts
    331
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,795
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Looks good


Bookmarks

Posting Permissions

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