SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    637
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Sticky Footer Not Working

    Ok here is my site...

    http://modocom.ca/newsite/

    Now what I want to do is have the sticky footer of course down at the bottom as I plan on loading a swf into it which has the background image with the stars sparkling randomly but I cant seem to get the footer to stay at the bottom when there is less content. Could someone help me with this I am using this sticky footer example...

    http://ryanfait.com/resources/footer...ottom-of-page/

    Many Thanks,

    Mike

  2. #2
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    637
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Okay so I have my swf in there now, but still can't seem to get it at the bottom of the browser. Any idea where Im going wrong on this.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mbond5 View Post
    Okay so I have my swf in there now, but still can't seem to get it at the bottom of the browser. Any idea where Im going wrong on this.
    Yes you are using Ryan Faits footer which is broken in most browsers

    See the FAQ sticky thread as Sitepoint is the home of the sticky footer (because it was developed here with help from me back in 2003)


    Here is your page updated with my code and now working in all browsers.

    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>MODO COMMUNICATION INC.</title>
    <!-- Put the following two lines in the <head> section -->
    <script src="http://modocom.ca/newsite/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="http://modocom.ca/newsite/hover.js" type="text/javascript"></script>
    <!--<link rel="stylesheet" type="text/css" href="style.css" />-->
    <style type="text/css">
    @charset "UTF-8";
    /* CSS Document */
    /*Opera Fix*/
    body:before {
        content:"";
        height:100%;
        float:left;
        width:0;
        margin-top:-32767px;
    }
    /* ie8 fix*/
    #wrapper:after {
        clear:both;
        display:block;
        height:1%;
        content:" ";
    }
    html, body {
        height: 100%;
    }
    #wrapper {
        width: 960px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: -90px;
        min-height:100%;
    }
    * html #wrapper {
        height:100%
    }
    #header {
        width: 960px;
        height: 175px;
    }
    #header a img {
        border: none;
    }
    #nav-wrapper {
        float: left;
        width:180px;
        height: 150px;
        border-right: thin solid #666;
    }
    #what, #who, #where, #look, #studies {
        margin:0px auto;
        padding:0;
        position:relative;
        text-align:left;
        width:200px;
        height:30px;
        overflow:hidden;
    }
    #modo, #modo1, #modo2, #modo3, #modo4, #modo-on, #modo1-on, #modo2-on, #modo3-on, #modo4-on {
        float:left;
        height:60px;
        line-height:15px;
        font-size:11px;
        font-family:sans-serif;
        color:#666;
        border:0px solid white;
        position:relative;
    }
    #what p, #who p, #where p, #look p, #studies p {
        line-height:30px;
        font-size:11px;
        margin:0px;
        padding:0px;
    }
    .nav_top {
        height:30px;
        float:top;
    }
    .nav_bottom {
        height:30px;
        float:top;
        color:#C30;
    }
    a {
        color:#C30;
        text-decoration:none;
    }
    #content {
        float: right;
        width: 720px;
        line-height:18px;
        font-size:11px;
        font-family:sans-serif;
        color:#666;
    }
    #content p {
        margin: 0;
        padding: 0;
    }
    #spacer {
        width: 960px;
        height: 30px;
        clear: both;
    }
    .footer, .push {
        clear: both;
        padding: 0;
        margin: 0;
        height: 90px; /* .push must be the same height as .footer */
        width: 100%;
    }
    /* who is modo */
    #person {
        height:220px;
    }
    #who-image {
        float: left;
        width:130px;
        height:200px;
        background-color:#C30;
    }
    #who-text {
        float:right;
        width:570px;
    }
    /*where is modo */
    
    
    #where-map {
        float: left;
        width:500px;
        height:411px;/*background-color:#C30;*/
    }
    #where-text {
        float:right;
        width:200px;
    }
    /* what does modo look like */
    
    #content-folio {
        float: right;
        width: 700px;
        line-height:18px;
        font-size:11px;
        font-family:sans-serif;
        color:#666;
    }
    #content-folio p {
        padding-left: 40px;
    }
    #slider-wrapper {
        margin-left: -40px;
    }
    #portfolio-image {
        padding-top: 20px;
        padding-bottom: 40px;
    }
    /* dropdown menu */
    
    ul.dropmenu {
        float: left;
        position: relative;
        margin: -50px 0 0 0;
        padding: 0px;
        display: inline;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size: 11px;
        /*border: solid 1px #ccc;*/
        border-right: none;
        display: inline-block;
        z-index: 1;
    }
    .dropmenu li {
        position: relative;
        list-style: none;
        margin: 0px;
        padding: 0px;
        display: block;
        cursor: point;
        float: left;
    }
    .dropmenu li a {
        padding: 5px 30px 5px 0px;
        display: block;
        cursor: point;
        /*border-right: solid 1px #ccc;*/
        color: #c30;
        text-decoration: none;/*background-color: #f1f1f1;*/
    }
    .dropmenu li a:hover {
        background-color: #FFFFFF;
    }
    /* .dropmenu li span{
        display: block;
        height: 5px;
        width: 5px;
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: #666;
    }
    .dropmenu li a:hover span{
        background-color: #C30;
    } */
    
    .dropmenu li ul li a {
        padding-left: 15px;
    }
    .dropmenu li:hover ul, .dropmenu li:hover div {
        display: block;
    }
    .dropmenu ul, .dropmenu div {
        position: absolute;
        display: none;
        width: 250px;
        padding: 0px;
        background:url('http://modocom.ca/newsite/images/dropdown-1.png') repeat;
        /*background-color: #E8E8E8;*/
        border-bottom: solid 1px #CCC;
    }
    .dropmenu li div ul {
        border: none;
        background: none;
        position: relative;
        display: block;
        left: 0px;
    }
    .dropmenu ul li {
        border: 0;
        float: none;
    }
    .dropmenu ul a {
        border: 1px solid #CCC;
        border-bottom: 0;
        padding-right: 20px;
        display:block;
        color: #666;
    }
    .dropmenu ul a:hover {
        background-color: #FFF;
        color: #C30;
    }
    .dropmenu div ul {
        position: relative;
        display: block;
    }
    .dropmenu li div {
        border: 1px solid #CCC;
        background-color: #f1f1f1;
        padding: 5px;
        display: none;
        position: absolute;
    }
    /* topmenu */
    
    ul.topmenu {
        float: left;
        position: relative;
        margin: -50px 0 0 0;
        padding: 0px;
        display: inline;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size: 11px;
        /*border: solid 1px #ccc;*/
        border-right: none;
        display: inline-block;
        z-index: 1;
    }
    .topmenu li {
        position: relative;
        list-style: none;
        margin: 0px;
        padding: 0px;
        display: block;
        cursor: point;
        float: left;
    }
    .topmenu li a {
        padding: 5px 30px 5px 0px;
        display: block;
        cursor: point;
        /*border-right: solid 1px #ccc;*/
        color: #666;
        text-decoration: none;/*background-color: #f1f1f1;*/
    }
    #nav-two li p {
        padding: 5px 30px 5px 0px;
        display: block;
        color: #C30;
    }
    .topmenu li a:hover {
        color: #C30;
    }
    </style>
    <link rel="shortcut icon" type="image/png" href="http://modocom.ca/newsite/images/favicon.png" />
    <script language="javascript">AC_FL_RunContent = 0;</script>
    <script src="http://modocom.ca/newsite/AC_RunActiveContent.js" language="javascript"></script>
    </head>
    <body>
    <div id="wrapper">
        <div id="header"> <a href="http://www.modocom.ca" ><img src="http://modocom.ca/newsite/http://www.modocom.ca/newsite/images/logo.png" /></a> </div>
        <!-- end of header -->
        <!-- The menu -->
        <div id="nav-wrapper">
            <div id="what">
                <div id="modo-on">
                    <div class="nav_bottom">
                        <p>+ what is modo</p>
                    </div>
                </div>
            </div>
            <div id="who">
                <div id="modo1">
                    <div class="nav_top">
                        <p>- who is modo</p>
                    </div>
                    <div class="nav_bottom"><a href="http://modocom.ca/newsite/who.html">
                        <p>+ who is modo</p>
                        </a></div>
                </div>
            </div>
            <div id="where">
                <div id="modo2">
                    <div class="nav_top">
                        <p>- where is modo</p>
                    </div>
                    <div class="nav_bottom"><a href="http://modocom.ca/newsite/where.html">
                        <p>+ where is modo</p>
                        </a></div>
                </div>
            </div>
            <div id="look">
                <div id="modo3">
                    <div class="nav_top">
                        <p>- what does modo look like</p>
                    </div>
                    <div class="nav_bottom"><a href="http://modocom.ca/newsite/portfolio.html">
                        <p>+ what does modo look like</p>
                        </a></div>
                </div>
            </div>
            <div id="studies">
                <div id="modo4">
                    <div class="nav_top">
                        <p>- modo studies</p>
                    </div>
                    <div class="nav_bottom"><a href="http://modocom.ca/newsite/studies.html">
                        <p>+ modo studies</p>
                        </a></div>
                </div>
            </div>
        </div>
        <!-- end of menu -->
        <div id="content">
            <ul id="nav-two" class="topmenu">
                <li>
                    <p>brand</p>
                </li>
                <li> <a href="#">strategy</a> </li>
                <li> <a href="#">design</a> </li>
                <li> <a href="#">advertising</a> </li>
            </ul>
            <p><strong>Every organization is unique</strong><br/>
                The brand of an organization must be so clear that it becomes the yardstick which its products, behaviours and actions are measured.<br/>
                It's image and identity must spring from its roots, its personality, its strengths.<br/>
                We're big on brands. Building ideas that work.</p>
        </div>
        <!-- end of content -->
        <div class="push"></div>
    </div>
    <!-- end of wrapper -->
    <div class="footer">
        <script language="javascript">
        if (AC_FL_RunContent == 0) {
            alert("This page requires AC_RunActiveContent.js.");
        } else {
            AC_FL_RunContent(
            'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0',
            'width', '100%',
            'height', '100%',
            'src', 'StarFooter',
            'quality', 'high',
            'pluginspage', 'http://www.adobe.com/go/getflashplayer',
            'align', 'middle',
            'play', 'true',
            'loop', 'true',
            'scale', 'showall',
            'wmode', 'window',
            'devicefont', 'false',
            'id', 'StarFooter',
            'bgcolor', '#ffffff',
            'name', 'StarFooter',
            'menu', 'true',
            'allowFullScreen', 'false',
            'allowScriptAccess','sameDomain',
            'movie', 'StarFooter',
            'salign', 'lt'
            ); //end AC code
        }
    </script>
        <noscript>
        <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="100%" height="100%" id="StarFooter" align="middle">
            <param name="allowScriptAccess" value="sameDomain" />
            <param name="allowFullScreen" value="false" />
            <param name="movie" value="StarFooter.swf" />
            <param name="quality" value="high" />
            <param name="bgcolor" value="#ffffff" />
            <embed src="http://modocom.ca/newsite/StarFooter.swf" quality="high" salign="lt" bgcolor="#ffffff" width="100%" height="100%" name="StarFooter" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
        </object>
        </noscript>
    </div>
    <!-- end of footer -->
    </body>
    </html>

  4. #4
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    637
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    This works perfectly but one little thing, why is there a little bit of a scroll vertically since the content isnt long is there a way so the footer is right at bottom of the browser for those pages where there will be no scrolling?

  5. #5
    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)
    Quote Originally Posted by mbond5 View Post
    ...why is there a little bit of a scroll vertically ....
    Always remove the browser defaults when you don't need them.
    Code:
    body { margin:0; padding:0}

  6. #6
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    637
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Excellent!

    Thanks guys for the help on this, now only one other question is it possible to have my content go over the sticky footer so my sticky footer is behind some of the content for example on this page, maybe some of the last persons info/image will be infront of the sticky footer...

    http://modocom.ca/newsite/who.html

    Thanks,

    Mike

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Yes you can make the content overlap with a few changes.

    Code:
    #wrapper {
        width: 960px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0px;
        min-height:100&#37;;
            position:relative;
            z-index:2;
    }
    * html #wrapper {
        height:100%
    }
    
    .footer, .push {
        clear: both;
        padding: 0;
        margin: 0;
        height: 90px; /* .push must be the same height as .footer */
        width: 100%;
        float:left;
    }
    .push{height:50px}/* increase/reduce this to overlap more/less */
    .footer{
        float:left;
        margin-top:-90px;
        position:relative;
        z-index:1;
    }
    
    You will probably need to set the wmode="opaque" on the flash so that it can be z-indexed though (see sticky in flash forum).

  8. #8
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    637
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Excellent, thanks so much works perfectly I believe havent got a chance to check it out in IE yet.

    Now one other question how difficult is it to make a fixed footer from this so the repeated stars in flash will always be behind the content at the bottom of the browser so it will always be at bottom of browser even if you have to scroll through content.

    Thanks

    Mike

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    A fixed footer is in fact easier but you will need to drop support for Ie6 as it doesn't understand position: fixed (although there are hacks to make it work in Ie6 but I would advise against that) .

    All you need do for a fixed footer is set it to position:fixed and bottom:0;left:0;width:100&#37; and the height you need. Then set the z-index lower than the rest of the page content so that the stars stay underneath the content.

    You can see an example of a fixed footer in the latest quiz (although in the quiz the footer is of course on top of the content because that's where you usually want it).


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
  •