Jump to content
Stef's Coding Community
Sign in to follow this  
virtual

Footer not repeating properly

Recommended Posts

Hi Guys,

 

I am tearing my hair out trying to figure out why my sticky footer does not go the full width of the browser window. It looks fine if you stretch the browser window, but there is a nasty horizontal scroll bar which I cannot seem to get rid of. What am I missing?

 

Here is the link http://bit.ly/teZxi6

Share this post


Link to post
Share on other sites

Hi Ben,

The #foot is outside the #wrap, so I don't understand why it is being limited by it? I don't mind about the scroll bar, but the footer cuts off.

Edited by virtual

Share this post


Link to post
Share on other sites

The #header is also 1400px wide, which is inside #wrap also 1400px; wide with margin: auto; so in my resolution there is space on the left, then 1400px of header and wrap causing the scrollbar.

 

I edited both #header and #wrap to 960px and it solved everything.

Share this post


Link to post
Share on other sites

The #header has to be that wide to accommodate the design. I guess I should try and get it outside the #wrap, I'm using Genesis and not too familiar with manipulating it.. But this is my problem more than the scroll bar, see where the footer get cut off.

 

Picture2.png

Edited by virtual

Share this post


Link to post
Share on other sites

If you keep your 1400px width for #header and #wrap, the make the footer divs 1400px too and then they will match what is above. Leave the 1400px widths and try this:-

#foot{
background: #c1b78e url(images/footer-bg.jpg) repeat-
x;
overflow: auto;          width: 1400px;
position: relative;
margin-top: -150px;
height: 150px;
clear: both;
}
.foot{
width: 1400px;             /*960px;*/
margin: 0 auto;
padding-top: 10px;
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
}

 

There is a horizontal scrollbar in my 1366px resolution, but I don't get the footer stopping when you scroll right, it continues. Hope that helps.

Share this post


Link to post
Share on other sites

Thanks for trying Wickham. Unfortunately that doesn't work. The design requires a full width sticky footer and the header image (unless I cut it) is 1400px and then fades into the body background. I guess if I manage to get the header outside the wrap it will work, then I could make the wrap 960px, but as I said before this is Genesis and I'm not too sure how to accomplish that.

Share this post


Link to post
Share on other sites

Never used genesis so not to sure what to look for off top of my head.

 

Instead of creating one big long header with background put that

header background image into the BODY. And leave header in wrapper and change width of header to 960px;

 

this may be helpfull post.

http://webdesignerwall.com/tutorials/how-to-css-large-background

 

and if you want to get rid of your horizontal scroll bar.

 

A Quick fix is to put..

 

overflow-x: hidden;

 

in HTML BODY tag.

 

But horizontal scrollbar will go when you change the 1400px widths.

 

Just trial and error.

Share this post


Link to post
Share on other sites

Thanks for the advice, I am just messing around with it at this point, and actually messing it up. I shall probably start all over again.

Share this post


Link to post
Share on other sites

Oh my I am so dumb, I had already tried using the html and body tags to display the gradient and the header, but stupid me had a typo in the image file so it was not showing up...duh!!! :bash:

 

Thanks all so far, I'll be back again I'm sure.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...