Grow your CSS skills. Land your dream job.

Fixed Footer?

  • # May 21, 2010 at 4:29 am

    I’ve checked out the video about fixed header and read about the fixed footer. My problem here is that when I position:fixed the footer, it doesn’t follow the bottom of the browser and just stays fixed in the middle of the page. It is obvious that this will do it, but how can I make the footer automatically affix itself on the bottom of the site?

    Rob
    # May 21, 2010 at 4:53 am

    Have a lookie at this :)

    http://ryanfait.com/sticky-footer/

    # May 21, 2010 at 6:36 am

    Looks interesting and I tried it out. It doesn’t follow the browser’s scroller though which is the style that I’m looking for.

    # May 21, 2010 at 6:46 am

    http://limpid.nl/lab/css/fixed/footer

    This is exactly what I’m looking for but I’m confused on how this is supposed to be applied:

    Code:

    < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

    content

    Is the code above for CSS only? Where’s the html code? Also, am I required to add all of these to my existing site? I’m getting confused here.

    Rob
    # May 21, 2010 at 8:12 am

    Oh that fixed footer is easy. No the HTML code is just a div… what you would do is something like this:

    Code:

    Code:
    #footer {

    height:100px;
    width:100%;
    position:fixed;
    bottom:0px;
    left:0px;
    background:red;

    }

    background is red so it’s visible.

    Fixed position is relative to the browser window and nothing else. So if you set something as fixed it will look where it is in the browser window and stay there, not scrolling with the content.

    here is something I wrote on the subject… :)

    http://alteredaspect.info/the-art-of-css-positioning/

    You’re knowledge of HTML and CSS seems a little lacking, which isn’t a bad thing – but I would suggest spending a little more time learning and then you will be less confused :D

    # May 21, 2010 at 8:29 am

    I re-read what I wrote before. It’s grammar problems.

    I do want what you posted. I’m still figuring out how to insert it.

    Rob
    # May 21, 2010 at 8:31 am

    Oh sorry I thought you wanted the link that you posted :D

    # May 21, 2010 at 9:20 am

    I’ve googled a number of other tutorials and applied it for the fixed footer but none of them works. I have a guess on what’s causing this but I’m unsure.

    I’ve spent the past 6+ hours on this problem and this is driving me to the deep-end.

    Is it ok if I post the html and css files? Maybe you can check what’s wrong with it. I want to show you the site, but it’s Joomla. 000webhost doesn’t accept the amount of files from it.

    Here’s what happened:

    I used psd2cssonline to get a Joomla css template out of a photoshop layout that I made. Now with psd2css – when converting to css that can be placed easily on Joomla, it requires a position layer as well as the graphics layer. In a nutshell, there are two footers there. One has the _joomla suffix while the other one has none. The _joomla suffix is invisible and is just the placement guide for the graphics layer.

    My guess is that the two layers are causing this problem.

    HTML

    Code:
    < ?php defined( '_JEXEC' ) or die( 'Restricted access' );?>

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">










    < ![endif]-->




    CSS

    Code:
    /*
    * psd2css.css
    *
    * This is your external CSS style sheet. It defines all of the CSS styles that you
    * are using in your page. If you are going to create multiple pages from the same
    * PSD file (like a template), you will share this CSS style sheet between the various
    * pages.
    *
    * This file was originally generated at http://psd2cssonline.com
    * May 21, 2010, 9:21 am with psd2css Online version 1.78
    *
    */
    body {background-color:#000000;}

    /* You named this layer _center_empty */
    #Layer-1 {
    position: absolute;
    margin-left: -512px;
    left: 50%;
    top: -1px;
    width: 1024px;
    height: 870px;
    z-index: 1;
    background-color:000000;

    }

    /* You named this layer container_empty */
    #Layer-2 {
    position: absolute;
    left: -1px;
    top: +462px;
    width: 1025px;
    height: 406px;
    z-index: 2;
    }

    /* You named this layer bottom_relative */
    .Layer-3 {
    position: relative;
    left: 1px;

    width: 1024px;
    height: 98px;
    z-index: 3;
    margin: -50px auto 0 auto;
    }

    /* You named this layer footer_joomla_fixed */
    #Layer-4 {
    position: fixed;
    left: +0px;
    top: +767px;
    width: 1024px;
    height: 98px;
    z-index: 4;
    margin: -50px auto 0 auto;
    }

    /* You named this layer middle_relative_bkgnd */
    .Layer-5 {
    position: relative;
    left: 81px;
    top: 0px;
    width: 584px;

    z-index: 5;
    background-image: url(../Layer-5.png);
    }

    /* You named this layer upper_relative_bkgnd */
    .Layer-6 {
    position: relative;
    left: 81px;
    top: 0px;
    width: 584px;

    z-index: 6;
    background-image: url(../Layer-6.png);
    }

    /* You named this layer content_joomla_relative */
    .Layer-7 {
    position: relative;
    left: 0px;
    top: 45px;
    width: 584px;

    z-index: 7;
    overflow: auto;
    }

    /* You named this layer top */
    #Layer-8 {
    position: fixed;
    left: -1px;
    top: -1px;
    width: 1025px;
    height: 82px;
    z-index: 8;
    }

    /* You named this layer top_joomla_fixed */
    #Layer-9 {
    position: fixed;
    left: -1px;
    top: -1px;
    width: 1025px;
    height: 82px;
    z-index: 9;
    }

    /* You named this layer breadcrumb */
    #Layer-10 {
    position: absolute;
    left: -2px;
    top: +404px;
    width: 1025px;
    height: 58px;
    z-index: 10;
    }

    /* You named this layer breadcrumb_joomla */
    #Layer-11 {
    position: absolute;
    left: -2px;
    top: +404px;
    width: 1025px;
    height: 58px;
    z-index: 11;
    }

    /* You named this layer user3_joomla */
    #Layer-12 {
    position: absolute;
    left: 381px;
    top: 27px;
    width: 621px;
    height: 38px;
    z-index: 12;
    }

    /* The example data provided by Joomla uses region user3 for the top menu.
    * So here we add a couple of CSS rules to give you an idea as to how to
    * build your Joomla menu. Use FireBug (on Firefox) to customize the
    * settings in these rules live while you are viewing your site. */
    #Layer-12 li {
    display: inline-block;
    list-style-type: none;
    }

    #Layer-12 a {
    /* Try some other values here to changes the size of your menu items. */
    padding: 2px 10px;
    background-color: #FFF;
    }

    #Layer-12 li a:hover {
    background-color: #000;
    color: white;
    }

    /* You named this layer prototype */
    #Layer-13 {
    position: absolute;
    left: 109px;
    top: 23px;
    width: 251px;
    height: 38px;
    z-index: 13;
    }

    /* You named this layer showcase */
    #Layer-14 {
    position: absolute;
    left: -2px;
    top: +80px;
    width: 1025px;
    height: 325px;
    z-index: 14;
    }

    /* You named this layer showcase_joomla */
    #Layer-15 {
    position: absolute;
    left: -2px;
    top: +80px;
    width: 1025px;
    height: 325px;
    z-index: 15;
    }

    /* You named this layer breadcrumb */
    #Layer-16 {
    position: absolute;
    left: 1px;
    top: 2px;
    width: 1024px;
    height: 39px;
    z-index: 16;
    }

    /* You named this layer breadcrumb_joomla */
    #Layer-17 {
    position: absolute;
    left: 1px;
    top: 2px;
    width: 1024px;
    height: 39px;
    z-index: 17;
    }

    /* You named this layer container_empty */
    #Layer-18 {
    position: absolute;
    left: 733px;
    top: 0px;
    width: 292px;
    height: 277px;
    z-index: 18;
    }

    /* You named this layer middle_relative_bkgnd */
    .Layer-19 {
    position: relative;
    left: 11px;
    top: 0px;
    width: 234px;

    z-index: 19;
    background-image: url(../Layer-19.png);
    }

    /* You named this layer left_joomla_relative */
    .Layer-20 {
    position: relative;
    left: 0px;
    top: 23px;
    width: 234px;

    z-index: 20;
    }

    /* Here are some examples of how you might want to change the
    * look and behavior of the links on your page. Some examples for
    * further customization are included in comments. */
    a {
    cursor: pointer;
    outline: none;
    }
    a:link { color: #F88; }
    a:visited { color: #F88; }
    a:hover {
    color: #F00;
    /* text-decoration: underline; */
    /* font-weight: bold; */
    }

    /* Custom CSS examples/suggestions for Joomla -
    *
    * Here are some examples of some changes you can make to stylize the output
    * from Joomla. These are just suggestions, you can change them to whatever
    * you would like. There are many other classes and ids that you can modify
    * CSS for from Joomla too. I suggest using Firebug and the ‘Inspect’
    * feature there to find the name of the class or id of an element of the
    * page that you want to stylize, and add it to this section.
    *
    * If you plan on re-converting your design often, be careful – this page is
    * automatically regenerated every time. So if you don’t want to loose some
    * CSS you’ve added here, move all your custom CSS to your own external
    * stylesheet and reference it externally from the index.php file (make sure
    * your reference is _after_ the reference to psd2css.css).
    */

    body { color: #888; }
    img { border: 0 }
    ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    }
    .moduletable_menu h3 {
    margin-top: 0;
    }
    .componentheading { font-size: 2em; }
    .contentheading { font-size: 1.5em; }
    .small { font-size: 0.7em; }
    .createdate { font-size: 0.7em; }
    .pagination span, .pagination a { padding: 0 6px 0 6px; }

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".