Forums

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

Home Forums CSS Footer help

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #27117
    david.coxsey
    Member

    Got a footer that just won’t go down to the bottom of the site. I’ve tried the Sticky Footer and I have tried other techniques that have worked for me in the past. If you have any ideas, here is what I have done so far:

    CSS:

    Code:
    @charset “utf-8”;
    /* Created by David Coxsey
    December 03, 2009 */

    *{
    margin: 0;
    padding: 0;
    }

    body {
    background: url(images/background_slice.png) repeat-x top #b8afb4;
    font: Arial, Helvetica, sans-serif;
    font-size: 62.5%;
    color: black;

    }

    .clear { clear: both; }

    #pageWrap {
    width: 825px;
    margin: 0 auto;
    }

    /* Header and Logo */
    #pageWrap #header{
    height: 196px;
    top: 0;
    left: 0;
    position:relative;
    }
    #pageWrap #header #logo {
    position: absolute;
    background: url(images/logo.png) no-repeat;
    top: 0px;
    left: 0px;
    height: 150px;
    width: 825px;
    }
    #pageWrap #header #menu {
    position:absolute;
    top: 150px;
    left: 0px;
    height: 48px;
    width: 825px;
    }
    #pageWrap #header #menu ul {
    list-style:none;
    top: 15px;
    left: 9px;
    margin-top: 15px;
    margin-left: 9px;
    font-size: 1.7em;
    font-weight: bold;
    }
    #pageWrap #header #menu li a{
    display: block;
    text-decoration:none;
    width: 90px;
    float: left;
    color: black;
    }
    #pageWrap #header #menu li a:hover, #header #menu li a:active {
    color:white;
    }

    /* Main Content Area */
    #mainContent {
    position:relative;
    width: 825px;
    top:0px;
    padding-bottom: 220px;
    height: auto;
    height: 100%;
    min-height: 500px;

    }
    /* contentLeft */
    #mainContent #contentLeft {
    width: 550px;
    float: left;
    position:absolute;
    }
    #mainContent #contentLeft h1 {
    font-size: 2em;
    padding-bottom: 10px;
    }

    #mainContent #contentLeft p {
    text-indent: 10px;
    color:black;
    padding-bottom: 5px;
    width: 400px;
    }
    /* contentRight */
    #mainContent #contentRight {
    width: 276px;
    left:650px;
    float: right;
    position:absolute;
    }

    #mainContent #contentRight a
    {
    text-decoration: none;
    }
    #mainContent #contentRight a:hover
    {
    font-style: italic;
    color: White;
    }
    #mainContent #contentRight img
    {
    border:0px;
    float:left;
    padding-right: 5px;
    }
    #mainContent #contentRight #movie
    {
    top: 0px;
    left: 0px;
    padding-bottom: 50px;
    }
    #mainContent #contentRight #movie h1
    {
    font-size: 1.7em;
    color: Black;
    padding-bottom: 3px;
    }
    #mainContent #contentRight #movie h2
    {
    font-size: 1.2em;
    color:Black;
    padding-bottom: 4px;
    }

    /* Footer */

    #footer {
    background:url(images/footer-slice.png) repeat-x;
    }
    #footer #footerWrap {
    width:825px;
    height: 220px;
    left: 275px;
    background:url(images/footer.png) no-repeat;
    position: relative;
    padding: 39px 0px 40px 335px;
    }
    #footer #footerWrap #twitter {
    position: absolute;
    top: 123px;
    left: 57px;
    height: 52px;
    width: 180px;
    font-weight: bold;
    text-indent: 5px;
    }
    #footer #footerWrap #twitter a{
    text-decoration: none;
    color:black;
    }
    #footer #footerWrap #twitter a:hover{
    color:white;
    }
    #footer #footWrap #twitter .time {
    font-style: italic;
    }
    #footer #footerWrap #follow {
    position: absolute;
    top: 195px;
    left: 12px;
    font-weight: bold;
    }
    #footer #footerWrap #follow a{
    text-decoration: none;
    color:black;
    }
    #footer #footerWrap #follow a:hover{
    color:white;
    }
    #footer #footerWrap #social {
    position: absolute;
    top: 139px;
    left: 487px;
    }
    #footer #footerWrap #social ul {

    list-style:none;
    width: 96px;
    height: 32px;
    float: right;
    }
    #footer #footerWrap #social li a{
    display:block;
    text-decoration:none;
    float:right;
    }
    #footer #footerWrap #social img {
    border:none;
    }

    And some html:

    Code:






    Pinto Power Hour

    This is a heading.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mattis est in eros posuere elementum. Morbi sed quam vitae sem rutrum consequat vulputate ut nisi. Sed pretium nibh a tellus mattis at fermentum dui consequat. Morbi scelerisque velit sapien, quis congue justo. In hac habitasse platea dictumst. Quisque at nisl nisi, quis posuere tortor. Cras eget libero enim, ut pretium risus. Nulla tempor commodo elit, vel sagittis diam sagittis sed. Nulla facilisi. Phasellus posuere egestas ultricies. Ut elementum vehicula tristique. Praesent suscipit ultricies libero, vitae imperdiet nunc iaculis ut. Suspendisse nibh purus, feugiat at consequat in, viverra euismod elit. Phasellus facilisis, urna ac adipiscing accumsan, nisi velit pharetra nisl, rhoncus interdum mi nisi vitae velit.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mattis est in eros posuere elementum. Morbi sed quam vitae sem rutrum consequat vulputate ut nisi. Sed pretium nibh a tellus mattis at fermentum dui consequat. Morbi scelerisque velit sapien, quis congue justo. In hac habitasse platea dictumst. Quisque at nisl nisi, quis posuere tortor. Cras eget libero enim, ut pretium risus. Nulla tempor commodo elit, vel sagittis diam sagittis sed. Nulla facilisi. Phasellus posuere egestas ultricies. Ut elementum vehicula tristique. Praesent suscipit ultricies libero, vitae imperdiet nunc iaculis ut. Suspendisse nibh purus, feugiat at consequat in, viverra euismod elit. Phasellus facilisis, urna ac adipiscing accumsan, nisi velit pharetra nisl, rhoncus interdum mi nisi vitae velit.


    #67768
    AshtonSanders
    Participant

    Hi David,

    Do you happen to have a live link? Or can you explain how the footer is supposed to stay at the bottom?

    I scanned through the code, and see no reason as to why the footer should go to the bottom of the page/screen.

    #67793
    david.coxsey
    Member

    No live link right now. What happens is that the footer doesn’t sit at the bottom of the page and when the main content area has a large about of information in it, the content area will overflow the footer.

    #67816
    AshtonSanders
    Participant

    I believe it. What do you want your footer to do?

    You said you tried using sticky footer. Did you not get it to work?

    #67895
    david.coxsey
    Member

    No, I didn’t. I’m going to try it again, but in the meantime I am going to upload the site to my server so you can take a gander.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.