- This topic is empty.
-
AuthorPosts
-
November 27, 2012 at 1:04 am #41010wragen22Member
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.
November 27, 2012 at 1:10 am #115571Paulie_DMemberI’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.**
November 27, 2012 at 1:33 am #115573wragen22MemberHmm.. Might someone be able to give an example?
Thinking
.footer {
Width: 100%
background: black
margin: 0 auto}
November 27, 2012 at 4:52 am #115575Paulie_DMemberIt 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.
November 27, 2012 at 8:42 am #115600ChesterParticipantthis would help, i think..
then on your css..
footer {
height: 400px; /* depends on you */
background: #444;
}.wrapper {
margin: 0 auto;
width: 960px; /* depends on you also */}
November 27, 2012 at 9:56 am #115607Paulie_DMemberI’d do it differently but the basics are there.
November 27, 2012 at 11:18 am #115622wragen22MemberThank you chester
November 27, 2012 at 7:15 pm #115685ChesterParticipant@Paulie_D.. mind if you show us how you do it.. maybe its better and we could adopt it. tnx
November 28, 2012 at 1:03 am #115677Paulie_DMemberIt 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.
November 30, 2012 at 6:48 pm #116061wragen22MemberOnly thing i’m having trouble here is that it’s not sticking to the bottom..
November 30, 2012 at 7:06 pm #116062Watson90MemberYou need a sticky footer. Search sticky footer on Google.
November 30, 2012 at 7:22 pm #116063wragen22MemberOk..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;
}November 30, 2012 at 11:48 pm #116066 -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.