Jump to content


Photo

Footer not repeating properly


  • Please log in to reply
9 replies to this topic

#1 virtual

virtual

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 883 posts
  • LocationLa Jolla, California

Posted 02 December 2011 - 08:39 PM

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
  • 0
Lynne
180virtual

#2 Ben

Ben

    Administrator

  • Administrators
  • 5,638 posts
  • LocationChico, CA

Posted 02 December 2011 - 09:36 PM

Both #wrap and #header have 1400px widths, which is causing the scroll bar.
  • 0
Benjamin Falk
Falken Creative : Twitter

#3 virtual

virtual

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 883 posts
  • LocationLa Jolla, California

Posted 02 December 2011 - 11:19 PM

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, 02 December 2011 - 11:20 PM.

  • 0
Lynne
180virtual

#4 Wickham

Wickham

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 1,732 posts
  • LocationSalisbury UK

Posted 03 December 2011 - 06:42 AM

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

#5 virtual

virtual

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 883 posts
  • LocationLa Jolla, California

Posted 03 December 2011 - 11:05 AM

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.

Posted Image

Edited by virtual, 03 December 2011 - 11:06 AM.

  • 0
Lynne
180virtual

#6 Wickham

Wickham

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 1,732 posts
  • LocationSalisbury UK

Posted 03 December 2011 - 01:02 PM

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

#7 virtual

virtual

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 883 posts
  • LocationLa Jolla, California

Posted 03 December 2011 - 02:16 PM

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.
  • 0
Lynne
180virtual

#8 sbsmith

sbsmith

    New member

  • Member
  • 13 posts

Posted 03 December 2011 - 03:00 PM

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://webdesignerwa...arge-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.
  • 0

#9 virtual

virtual

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 883 posts
  • LocationLa Jolla, California

Posted 03 December 2011 - 03:39 PM

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.
  • 0
Lynne
180virtual

#10 virtual

virtual

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 883 posts
  • LocationLa Jolla, California

Posted 03 December 2011 - 04:04 PM

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.
  • 0
Lynne
180virtual




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users