Forums

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

Home Forums CSS creating cool large footer

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #41010
    wragen22
    Member

    Hi There,
    I am new to css and looking to create a large footer on my site i’m working on. I’m currently using the foundation framework to work off of.

    I am looking to add a fairly large footer in width with a dark background color that extends the full width of the browser.

    Much appreciated.

    #115571
    Paulie_D
    Member

    I’m not sure what you are asking.

    What is difficult about creating the footer?

    If you mean that the ‘footer’ will have definite width in the center of the page but the color is to be the full browser width then you need a ‘wrapping div around the footer.

    Then just give them both the same bg and then set a width and appropriate margin **to the footer only.**

    #115573
    wragen22
    Member

    Hmm.. Might someone be able to give an example?

    Thinking

    .footer {

    Width: 100%
    background: black
    margin: 0 auto

    }

    #115575
    Paulie_D
    Member

    It depends on what your design is.

    All block level elements (such as divs, footer, header etc) are always 100% width unless you tell them differently so there is no need to set a width unless you want to.

    If you DO set a width then the margin settings will centre it.

    It won’t show up unless you put some content in it or give it a height.

    Frankly, until we see what it is you are trying to do, it’s hard to help further.

    #115600
    Chester
    Participant

    this would help, i think..

    //contents here

    then on your css..

    footer {
    height: 400px; /* depends on you */
    background: #444;
    }

    .wrapper {
    margin: 0 auto;
    width: 960px; /* depends on you also */

    }

    #115607
    Paulie_D
    Member

    I’d do it differently but the basics are there.

    #115622
    wragen22
    Member

    Thank you chester

    #115685
    Chester
    Participant

    @Paulie_D.. mind if you show us how you do it.. maybe its better and we could adopt it. tnx

    #115677
    Paulie_D
    Member

    It wouldn’t be too different.

    I’d put the wrapper outside of the ‘actual’ footer so it, you know, wraps and leaves the footer to actually hold the bottom content.

    I wouldn’t set a height on the wrapper itself (now that it’s on the outside) but rather let that be determined by the height of my footer….less complicated all round.

    As I said, not much difference, just personal choice.

    #116061
    wragen22
    Member

    Only thing i’m having trouble here is that it’s not sticking to the bottom..

    #116062
    Watson90
    Member

    You need a sticky footer. Search sticky footer on Google.

    #116063
    wragen22
    Member

    Ok..this is what I am trying

    * {
    margin: 0;
    }
    html, body {
    height: 100%;
    }
    .wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
    }
    .footer, .push {
    height: 4em;
    background: #444;
    height: 500px;
    }

    .footer, .push {
    clear: both;
    }

    #116066
    Chester
    Participant

    uhmm it’s hard to tell. Please include the HTML markup for the footer part. or even better do it in codepen.

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