Sticky Footer and Nav Hover

HTML & CSS
1

Hey Guys,

Just need help figuring out how I can make my footer a sticky footer so its always after all the content and my background doesnt show up after the footer like it does on larger screens for some pages.

Also, on my Nav say on the homepage when your on the homepage I have orange bar underneath the page you are on but when I rollover other pages it shows up which I want but if your on home and roll over Home it shows up twice the border and nudges the slider down, any way I can edit my CSS to fix this issue.

Heres the link to the site…

http://184.154.226.19/~bobswoo6/

Thanks guys,

Mike

2

Sticky footers are tricky, so you have to get the code right. Try to follow this tutorial carefully:

However, my preferred option is just to set the body background to the color of the footer, so if there’s space at the bottom, the footer color extends right down (in your case, orange). Then you have to put a white bg color on the main area, though.

The double line on the nav is caused by this:

.selected {
  color: black !important;
  [COLOR="#FF0000"]border-bottom: 5px solid #D9531E !important;[/COLOR]
}

It would be better to have the .selected class on the <a> rather than the <li>, and then you wouldn’t get this conflict.

Maybe change it to

.selected [COLOR="#FF0000"]a[/COLOR] {
  color: black !important;
  border-bottom: 5px solid #D9531E;
}
3

Thanks Ralph that worked well the double line on the nav.

Now just to add the sticky footer, really want to solve it as it being a sticky footer.

I’ve done it before in the past just seem to be having more issues with this site for some reason.

Thanks,

Mike

4

This is probably a naive question, but why do you want to put a sticky footer on this site? The pages that I’ve looked at seem to be taller than most monitor windows, so the behavior of a sticky footer would never come into play. “Tips and Resources” and “Wood Fireplaces” might fit on a vertically oriented screen, maybe, depending on rez. Just curious.

5

That is the reason on my screen it doesnt go to the bottom cause I’m on a large monitor.

6

Try the following:

On the index page, add the following new div below the <body> tag:


<div id="outer">

The new div is closed by a stray “close wrapper” tag.

On your css sheet, make the following changes:


below line 19:

body:before {    /* Opera and IE8 "redraw" bug fix */
    content:"";
    float:left;
    height:100%;
    width:0;
    margin-top:-32767px;
}

#outer {
    min-height:100%;
    margin:-70px auto 0px;    /* negative of footer height */
}

Line 126:

#header {
    height: 122px;
    background: #FFF;
    margin: 0 auto;
    border-top:70px solid #fff;    /* same value as footer height */
}

Line 285:

.copyright {
    width:285px;
    margin:0px 0px 0px 650px;    /* this probably fixes the original culprit */
}
7

I gave you lins above for a sticky footer, and also suggested an alternative. Did you not see the comments?

8

EDIT…

Thanks for the help, solved the issue it was issue with my helpful tips page I missed a div causing it to mess up.

Thanks guys!

9

i tried many css sticky footers and they dont render correctly when resizing the window quickly, try this sticky footer worked perfectly for me,

hope this helps.

10