Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member William Knight's Avatar
    Join Date
    Mar 2013
    Posts
    3
    Member #
    35509
    Hello all,

    I'm new here (obviously) and I was having some problems with the sticky footer for one of my pages on my portfolio website for school. It's due this wednesday, so I'm kind of in a bind.

    Anyways, I used the tutorial for the sticky footer from http://ryanfait.com/sticky-footer/

    I got it to work fine. No problems at all. That is until I went to my school and brought it up on the computers there. I didn't notice it at first, but after a while, I realized the footer wasn't sticking to the bottom. Even though I have all my CSS correct and the HTML looks fine to me. I may be wrong though. Actually, I know I'm wrong otherwise I wouldn't be having this problem. Anywho, Some help would be amazing.

    Here's my CSS

    @charset "utf-8";

    {
    margin: 0;
    }
    html, body {
    height: 100%;
    }
    .container {
    width: 978px;
    margin: 0 auto;
    }
    body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #42413C;
    margin: 0;
    padding: 0;
    color: #000;
    background-image: url(../images/hexellence.png);
    }
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
    padding: 0;
    margin: 0;
    }
    h1, h2, h3, h5, h6 {
    margin-top: 0;/* removing the top margin gets around an issue where margins can escape from their containing block. The remaining bottom margin will hold it away from any elements that follow. */
    padding-right: 15px;
    padding-left: 15px; /* adding the padding to the sides of the elements within the blocks, instead of the block elements themselves, gets rid of any box model math. A nested block with side padding can also be used as an alternate method. */
    color: #3CBDE3;
    border-bottom-width: thin;
    border-bottom-style: solid;
    border-bottom-color: #3CBDE3;
    text-align: justify;
    font-family: "Courier New", Courier, monospace;
    }
    a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
    border: none;
    }

    .signature {
    padding-left: 1500px;
    }

    /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
    a:link {
    color: #0033FF;
    text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
    }
    .logo {
    width: 326px;
    padding-left: 25px;
    padding-top: 25px;
    margin-right: auto;
    margin-left: auto;
    }

    a:visited {
    color: #990000;
    text-decoration: underline;
    }
    a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
    text-decoration: none;
    color: #3CBDE3;
    }
    /* ~~ This fixed width container surrounds all other blocks ~~ */
    .wrapper {
    min-height: 100%;
    height: auto;
    height: 100%;
    position: absolute;
    width: 960px;
    margin: 0 auto -142px;
    background-color: #FFFFFF; /* the auto value on the sides, coupled with the width, centers the layout */
    background-image: url(../images/hexellence.png);
    margin-right: auto;
    margin-bottom: -142px;
    margin-left: auto;
    min-height: 100%;
    height: auto;
    height: auto;
    top: -45px;
    }
    .articles {
    background-image: url(../images/diagmonds.png);
    width: 460px;
    border: medium solid #30BDE3;
    float: right;
    height: 350px;
    margin-bottom: 25px;

    }
    .Content {
    }

    /* ~~ The header is not given a width. It will extend the full width of your layout. ~~ */
    header {
    background-image: url(../images/diagmonds.png);
    border-bottom-width: thick;
    border-bottom-style: solid;
    border-bottom-color: #3CBDE3;
    padding-top: 5px;
    padding-right: 15px;
    padding-bottom: 5px;
    }
    .news {
    width: 460px;
    background-image: url(../images/diagmonds.png);
    border: medium solid #3CBDE3;
    float: left;
    height: 350px;
    margin-bottom: 25px;
    }
    #NEWS {
    width: 930px;
    padding-right: 25px;
    padding-left: 25px;
    padding-bottom: 45px;
    }
    .container #NEWS img {
    padding-left: 375px;
    }

    .container .news img {
    padding-left: 60px;
    }
    .container .articles img {
    padding-left: 140px;
    }

    #TextOnBlackHeader {
    color: #FFFFFF;
    text-align: right;
    }

    /* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
    ul.nav {
    list-style: none; /* this removes the list marker */
    border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
    margin-bottom: 15px; /* this creates the space between the navigation on the content below */
    }
    .Welcome {
    background-image: url(../images/diagmonds.png);
    margin-right: auto;
    margin-left: auto;
    width: 955px;
    border: thick solid #3CBDE3;
    }

    ul.nav li {
    border-bottom: 1px solid #666; /* this creates the button separation */
    }
    ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
    padding: 5px 5px 5px 15px;
    display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
    width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
    text-decoration: none;
    background-color: #C6D580;
    }
    #TextOnBlackFooter {
    color: #FFF;
    text-align: center;
    }
    .clearfloat {
    clear: both;
    }

    ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
    background-color: #ADB96E;
    color: #FFF;
    }
    footer , .push{
    background-image: url(../images/diagmonds.png);
    color: #FFF;
    padding-top: 10px;
    padding-right: 0;
    padding-bottom: 10px;
    padding-left: 0;
    border-top-style: solid;
    border-top-color: #3CBDE3;
    border-top-width: thick;
    width: 100%;
    left: 0px;
    bottom: 0px;
    height: 142px;
    clear: both;
    }
    header, footer, aside, article, figure {
    color: #000;
    }
    .HeaderNav {
    background-image: url(../images/diagmonds.png);
    border-bottom-width: thick;
    border-bottom-style: solid;
    border-bottom-color: #3CBDE3;
    font-family: "Courier New", Courier, monospace;
    color: #FFF;
    width: auto;
    text-align: right;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    }

    section {
    padding; 10px;
    padding-bottom: 80px;
    background-image: url(../images/diagmonds.png);
    color: #FFF;
    padding-left: 25px;
    padding-right: 25px;
    border: medium solid #3CBDE3;
    left: auto;
    top: 10px;
    right: auto;
    bottom: 5px;
    margin: -15px;
    }
    p {
    color: #FFF;
    text-align: justify;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    padding-top: 10px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 10px;
    }
    h4 {
    color: #36BDE3;
    }
    #p {
    text-align: center;
    }
    #PortfolioImages {
    text-align: center;
    }
    And here's my HTML. I'll remove the paragraphs from the HTML in order to make finding the problem a little easier.

    <!doctype html>
    <html><!-- InstanceBegin template="/Templates/Server Space Main Template.dwt" codeOutsideHTMLIsLocked="false" -->
    <head>
    <meta charset="utf-8">
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>William Knight - Featured</title>
    <!-- InstanceEndEditable -->
    <link rel="stylesheet" href="layout.css" ... />
    <link href="CSS/desktop.css" rel="stylesheet" type="text/css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- InstanceBeginEditable name="head" -->
    <!-- InstanceEndEditable -->
    </head>
    <body>
    <!-- InstanceBeginEditable name="Navigation" -->
    <div class="HeaderNav"></div>
    <!-- InstanceEndEditable -->
    <div class="logo"><img src="images/server space reflection.png" width="285" height="243"></div>
    <div class="container">
    <!-- To change the background image for the main content, open the "section" css rule.-->
    <!-- InstanceBeginEditable name="Welcome" -->
    <div class="Welcome">
    </div>
    <!-- InstanceEndEditable --><br>
    <!-- end .content -->
    <!-- InstanceBeginEditable name="News" -->

    <!-- InstanceEndEditable --><!-- InstanceBeginEditable name="Articles" -->

    <!-- InstanceEndEditable -->
    <div class="clearfloat"></div>

    <!-- end .container --></div>
    <!-- Don't put any content after this unless you're going to work on the footer. In which case, the footer can't be absolute because it will mess up the sticky footer feature. --><!-- InstanceBeginEditable name="Footer" -->
    <footer>
    <p id="TextOnBlackFooter">Copyright &copy; 2013 Server Space | All Rights Reserved</p>
    <p id="p"></p>
    </footer>
    <!-- InstanceEndEditable -->
    </body>
    <!-- InstanceEnd --></html>
    Now what confuses me is that on all the other pages, the footer is sticking to the bottom of the page. This leads me to believe it isn't a CSS problem at all but an HTML problem. I have no clue what could be wrong though because as I said, I think it looks fine. For the most part at least. I still need to clean up a bit.
    Please, if anyone could shed some light on this problem, that would be amazing.

  2.  

  3. #2
    Junior Member William Knight's Avatar
    Join Date
    Mar 2013
    Posts
    3
    Member #
    35509
    I've been doing some troubleshooting and I've found that when two divs in my code, that's when the footer goes weird. Anyways, Now I have to figure out an alternate work around. I'll post my solution if it works for anyone else having the same problem.

  4. #3
    Junior Member William Knight's Avatar
    Join Date
    Mar 2013
    Posts
    3
    Member #
    35509
    Okay, my work-around for this situation is to define a height for the clearfloat div until it pushes the footer into place. I should have figured that was the problem because if I'm not mistaken, that's what that div is there for in the first place. To push the footer down in place. Anyways, I'm happy I figured it out myself. It was a learning experience in troubleshooting for me and I'm happy I'm not a complete moron at this stuff.

  5. #4
    Member
    Join Date
    Aug 2011
    Posts
    64
    Member #
    28942
    Liked
    8 times
    I just did a sticky footer on my page today.

    Your container needs a negative margin set to the negative height of your footer.
    container, bottom margin -15
    footer height 15
    for example.
    and I believe the container had a MIN-height of 100%.

    I learned it from here and it worked for me perfectly.
    http://www.cssstickyfooter.com/


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:39 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com