Forums

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

Home Forums CSS What would all the possible reasons be why your footer wont show up?

  • This topic is empty.
Viewing 8 posts - 16 through 23 (of 23 total)
  • Author
    Posts
  • #49365
    jesb
    Participant

    html

    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    <br /> website<br />






































    • twitter






    sign







    • facebook







    About Me


    about me

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.





    My Services


    services i offer

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.





    My Tools


    tools

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.


































    css

    /* CSS Reset */
    * { margin: 0 auto; padding: 0;
    outline: 0;
    border:none;
    list-style-type: none;



    }

    body {
    background:url(images/bg.jpg) repeat-x;
    font-family: Arial, Helvetica, sans-serif;



    }

    #container {
    width: 960px;
    margin: 0 auto;
    }

    #header {
    position:relative;
    width: 100%;
    bottom: 6px;

    }

    #header h1 {

    float:left;
    width:365px;
    height:115px;
    margin-top: 35px;
    }

    #header h1 a {

    height: 100%;
    width: 100%;
    }
    #header ul li h6 {
    font-size: 11px;
    }

    #nav {
    clear: both;
    height: 30px;
    width: 100%;
    }
    #nav ul {

    position: absolute;
    right: 180px;
    top: 20px;

    }

    #nav ul li {
    display: inline;
    float: left;
    }


    #nav ul li a {
    color: white;
    display: inline;
    text-decoration: none;
    font-size: 16px;
    font-weight: normal;
    font-family: calibri, georgia, garamond, arial;
    text-transform: uppercase;
    text-align: right;
    float: left;
    padding: 10px;


    }

    #nav li a span {


    line-height: 28px;
    height: 100%;

    }

    #nav li a:hover, #nav li {

    color: #ffc000;
    cursor: pointer;
    text-decoration: none;
    }

    #featured {

    padding: 10px;
    height: 340px;
    width: 940px;
    border:1px dashed;
    color: #ffe5c4;
    background-color: #562e00;


    }
    #featured ul {

    }

    #featured ul li {
    float: left;
    display:block;
    width: 630px;
    }

    #featured ul li a {
    display: block;
    height: 350px;
    }


    #featured ul li.ss1 img a {
    background: url(/images/featured.jpg)

    }





    form#quote {
    background: #ce9426;

    padding: 20px;
    float: right;
    width: 260px;
    height: 300px;
    }

    form#quote h2 {
    font-family: Trebuchet, Arial, Helvetica, sans-serif;
    color: black;
    font-size: 12px;

    }



    form#quote input, form#quote textarea {
    background: url(images/noise.jpg);
    color: white;
    font: 12px Arial, Helvetica, sans-serif;
    margin: 1px 10px 8px 2px;
    padding: 10px;
    width: 240px;
    line-height:3px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-box-shadow: 0px 4px 0 -6px #c4c4c4;
    -moz-box-shadow:inset 0 0 6px #7a7a7a;
    -webkit-box-shadow:inset 0 0 6px #7a7a7a;
    box-shadow:inset 0 0 6px #7a7a7a;
    resize: none;

    }




    form#quote textarea {



    }

    form#quote input.btn {
    width: auto;
    border: none;
    padding: 1px;
    margin-top: 0px;
    }

    #content {


    font-size: 12px;

    list-style: none;

    }
    #content .col {
    float: right;
    width: 258px;
    background: url(./images/col-bg.jpg) repeat-x;
    height: 193px;
    border: 1px solid #CCC;
    padding: 10px;
    margin-right: 830px;
    margin-top: -225px;


    }
    #content .col h2 {
    font: normal 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #b47825;
    text-decoration: none;

    }
    #content .col h2 span {
    color: #2f2f2f;

    }


    #content .col img {
    border: none;
    padding: 2px;
    float: right;

    }




    #content .col p {

    line-height: 17px;
    }

    #content .col.noMargin {

    margin-right: 510px;


    }

    #content .col.fr {


    margin-right: 190px;
    margin-top: -225px;

    }

    #twitter {

    float:right;
    position: absolute;

    }




    #facebook {

    float:right;
    position: relative;
    margin-right: 184px;
    margin-top: -597px;
    }



    textarea {
    width: 200px;
    max-width: 240px;
    min-width: 240px;
    height: 200px;
    min-height: 45px;
    max-height: 45px;
    }


    #footer {
    clear: both;
    background: url(images/footer.jpg);
    height: 100px;
    width: 100%;
    margin-top: 40px;
    }

    #footerContainer {
    margin: 0px auto 0;
    width: 960px;
    font-size: 12px;
    color: #ddd;
    padding-top: 20px;
    position: relative;
    }

    #footerContainer p {
    margin: 8px 0 8px;
    }
    #footerContainer a {
    color: #ddd;
    text-decoration: none;
    }
    #footerContainer a:hover {
    text-decoration: underline;
    }



    form#newsletter {
    position: absolute;
    right: 0;
    top: 20px;
    width: 300px;
    }
    form#newsletter label {
    font-weight: bold;
    color: #fff;
    }
    form#newsletter input {
    background-color: #ffebd5;
    border:1px solid #ddd;
    color: black;
    float: left;
    font: 12px Arial, Helvetica, sans-serif;
    margin: 5px 0 0;
    padding: 8px;
    width: 190px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    }

    form#newsletter input.btn {
    width: auto;
    border: none;
    padding: 0;
    margin-left: 3px;
    }











    #49314
    jesb
    Participant

    Anybody have any idea?

    #49315
    yashar
    Participant

    Hello,
    footer is the last div and box on the bottom of the website, also the div id footer should be outside and container should be inside the div id footer and everything should be inside the container,as well as take out clear both from div footer, and check your html page and css page for any issues or mistakes.

    #49318
    jesb
    Participant

    Taking out clear both; from footer eliminates my footer all together creating more problems pushing my footer content into the main background. And everything is in my main container div which is the main container of the css. Shouldn’t all my other divs stay within my container and not move when you zoom or zoom out the window?

    #49322
    chrisburton
    Participant

    The last I checked, I think I saw the container div closed after the header. Could be wrong.

    #49323
    jesb
    Participant

    Well I managed to fix my nav and my columns from moving when you zoom in and out by changing my footer container to relative instead of absolute. But now my footer is keeping the same pixels of the container. I want my footer to extend across the screen just as my main background does. I tried the repeat-x like my background image but that’s not working.

    Any ideas?

    #49324
    jesb
    Participant

    Nevermind, figured it all out. I just have to get my head around some of the basic principles of html and css and I’ll avoid these issues.

    Basically other div elements were not closed within my container which was being ignored and not staying in my container.

    Consider this solved.

    Thanks again guys. :)

    #49326
    chrisburton
    Participant

    Remember whenever you have issues that you can’t figure out, validating is a great resource for troubleshooting itself.

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