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 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #32444
    jesb
    Participant

    I’m really new with webdesign so it’s expected that I’m lost. I am nearing close to the end of my design, this of course doesn’t count debugging or anything like that. But I am now trying to put in my footer, but nothing is coming in. The only thing coming in is my text from the footer, and even that is not in the right place.

    I made sure to do the clear: both; command in my footer. But it’s still not showing up. I tried adding the float:bottom option but that does nothing either.

    The file name and file format is correct as well for my footer, checked it many times over.

    Here is my html

    div id="footer">

    Copyright © 2010 company name | Privacy Policy



    Home /
    About /
    Our Services /
    Portfolio /
    Blog /
    Contact Us








    And than here is some of the css for this specific div.

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

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


    #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: #fff;
    border:1px solid #ddd;
    color: #666;
    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;
    }

    Any ideas on what the issue could be?

    #50080
    chrisburton
    Participant

    One issue is your code isn’t semantic and pieces of it are certainly not correct. Float:bottom? Do you have a link?

    #50090
    jesb
    Participant

    Yeah I realize it isn’t, I intend to go through it all to see what is needed and what isn’t. But like I said I’m pretty new, and just pretty much trying a few things to see if I could get something to do something.

    I don’t have any link, no.

    #50091
    chrisburton
    Participant

    I would take a few days to do a crash course with CSS and HTML. Video tutorials might also help so here is one…

    https://css-tricks.com/video-screencasts/1-converting-a-photoshop-mockup-part-1-of-3/

    #50092
    jesb
    Participant

    I was actually following a tutorial from net tuts to build this site. And came this far, all I need is the footer, add in links and my site will be pretty much done. I need to know what the issue is with this code and why I cant get the footer in.

    #50046
    chrisburton
    Participant

    If you got this from nettuts, why would you have improper CSS? Especially like a bottom float? Also, not sure if you forgot an opening tag when you copied or not but make sure to have that at the beginning of your div.

    div id="footer">

    HTML
    You need to have an unordered list and list items before your anchor tags.
    e.g.

    CSS
    Get rid of the bottom float as it does not exist.

    float:bottom;

    Add these prefixes to border-radius

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;

    I would really need a link to check for any visual errors beyond this.

    #50015
    jesb
    Participant

    The only reason I messed around with the code, when I did exactly what the tut said to do the footer still wasn’t there. I cant help but think that this has something to do with some other code that messed something else up.

    link to a screenshot.

    #49982
    Eclipse
    Member

    First of all clean up the code:




    HTML:

    div id="footer"> change to

    Now see if it works better!

    #49873
    jesb
    Participant

    Nothing at all changed from making those changes, still looks the same.

    #49818
    jesb
    Participant

    I’m in the process of going through all my code, just to clean up what I don’t need. Once I’m done doing that I’ll post all my html and css on here. Hopefully I can figure out the problem in the mean time and the issue resolves itself after some cleaning.

    #49821
    jesb
    Participant

    Well I cant seem to figure out what the problem is. Here is all my code. Hope you guys can figure this one out.

    HTML code

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

































  • twitter




  • 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.
















  • Now here is the 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;
    background-image: -webkit gradient(
    linear,
    left top, left bottom,
    from(#b37725), to (#e4ac27)
    );
    padding: 20px;
    float: right;
    width: 260px;
    height: 300px;
    }

    form#quote h2 {
    font: normal; "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #fff;
    }

    form#quote label {
    color: #ffffff;
    font-size: 12px;
    font-family: arial, verdana, georgia;
    float: left;
    width: 100%;
    padding:5px;


    }

    form#quote input, form#quote textarea {
    background-color: #303030;
    color: white;
    font: 12px Arial, Helvetica, sans-serif;
    margin: 5px 7px 8px;
    padding: 10px;
    width: 240px;
    -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 {
    height: 50px;


    }

    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:1px opacity: 0.5; dashed; #d8d8d8;
    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;
    margin: -508 60 50 1025;
    }

    #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: 140px;

    }

    #footerContainer {
    margin: 0 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: #fff;
    border:1px solid #ddd;
    color: #666;
    float: left;
    font: 12px Arial, Helvetica, sans-serif;
    margin: 5px 0 0;
    padding: 8px;
    width: 190px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;

    }








    #49707
    jesb
    Participant

    O.k, so I managed to finally see the footer take place. Still having a problem with getting the image to appear though. I’ve tested it by using color instead and that comes up fine and I can clearly see a footer now, so that’s good. But still no image will appear that I saved.

    I’m guessing this has something to do with this error.

    Parse Error (images/footer.jpg);

    I don’t know what the issue is with this. The error is kind of vague for a noob like me.

    I’m going through the validator and cleaning it up like you suggest. But there some things I’m a little confused about that brings up errors.

    I’m told that ul does not belong possibly because I have inline elements with block elements. But if a UL is a block element, and anchor tag is a inline element, than how do we make lists into links? I guess I’m confused on why I cant have lists with an a tag, putting a tags with lists seem to be a common thing on the web, so what exactly do they mean by the error.

    Error: element ul not allowed here; possible cause is an inline element containing a block-level element

    Also I get a lot of errors for webkit radius, shadow box, ect. Are these newer properties that come out as errors and should they be ignored?

    You mentioned eliminating margins, but it’s those margins I used that allowed me to put my layout together where I want certain things. I tried many different properties and this seemed to of what worked. Taking out all these will surely mess it all up. But if there is an easier way of doing it perhaps I should.

    Thanks to those who have helped.

    #49605
    jesb
    Participant

    Thanks so much for all your help. :) Everything is working great, and fully validated other than 8 errors coming from css due to some stuff like webkit radius and box shadow that I assume is just not being recognized?

    #49587
    jesb
    Participant

    Yeah that’s fine, as long as it doesn’t break up the look of my page in IE I don’t mind.

    #49458
    jesb
    Participant

    Well so much from being free and clear. It seems my navigation and 3 columns move as you minimize the page via the ctrl and -. It’s doesn’t stay within my container. What do you think would cause that to happen with the code that I provided?

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