Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Fixed Footer?

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #29115
    Unregistered
    Member

    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?

    #76222
    Rob MacKay
    Participant

    Have a lookie at this :)

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

    #76230
    Unregistered
    Member

    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.

    #76231
    Unregistered
    Member

    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:


    Fixed footer

    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.

    #76232
    Rob MacKay
    Participant

    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

    #76234
    Unregistered
    Member

    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.

    #76235
    Rob MacKay
    Participant

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

    #76238
    Unregistered
    Member

    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:














    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)
  • The forum ‘CSS’ is closed to new topics and replies.