Critique my new website + Sticky Footer Problems

[Watson90]

Hi everyone

Just got my new website up + running here. Im quite pleased with the outcome but I’d like to know if there are any improvements that could be made.

Anything welcome

Thanks

[JohnMotylJr]

Looks clean, have you ever thought about adding a sticky footer?

[Watson90]

I have a sticky footer don’t I? At least I thought I did.

I have done the code for it with the negative margin on the page wrap and the push div with the height of the footer etc.

I must have coded it wrong :/

[JohnMotylJr]

My appologies, when i browsed there seemed to be a lot of space below the #sidebar.

[kgscott284]

Hmm, I really like it, a couple things are a little iffy…The contact button, I don’t see why it isn’t inline with the other nav items, having it way to the right makes it a bit awkward. Also, the extra wide sidebar, doesn’t really fit as it should either, it would be better if it was a little thinner. Additionally, I would add some kind of hover state to the search button, that is a little bit of a pet peeve of mine…change the cursor to pointer at least?

Everything else, is absolutely solid. I love the colors , fonts, type, and design…

[Watson90]

Hmmm _John_ I haven’t tested it on a high resolution monitor yet. So is the sticky footer working or not?

@kgscott284 thanks for the reply. I could make it in with the main-nav I suppose :) yeah I agree about the search button, I’ll do the same rollovers with the form buttons, too! Yeah the sidebar is ~300px; I suppose that is quite a big area just for a sidebar, I’ll make my main-content area bigger and reduce my sidebar.

Thank you, man.

[Watson90]

Yeah, John I see what you mean now! It’s making the whole page scroll when it shouldn’t :/

What have I done wrong? Do I need to put my whole website in a container div? I have a div class of page-wrap but that is used obviously to keep the content inline whilst the background images stretch to the full width of the browser…

[Koopa]

There you find the solution

http://ryanfait.com/sticky-footer/

[Watson90]

Hi @Koopa

I have tried following that already, but obviously I have gone wrong somewhere down the line. I will try it again now.

Thanks

[Paulie_D]

You’d need to start by taking the class of .pagewrap off the div inside the footer and changing the height of the footer to , I think, 105px.

I see it’s also on a div inside the header…that’s probably not right too.

By the way, it’s not necessary to add width:100% to divs…they automatically are 100% wide.

[Watson90]

Hi @Paulie_D

So do I make a new class within my footer to give it the 960px wrapper, something like;

.footer-inside? And just apply a width to that…

[Paulie_D]

Yep…that would work.

[Paulie_D]

The class you have on .inner would work.

.inner {
width:960px;
margin:0 auto;
} etc…

[Watson90]

So rather than having a page-wrap on my index.php for the loop file I just use .inner? Or do I use none at all?

[Paulie_D]

Aha….I think it’s that div just before the end of the page wrap with a class of push….remove that div and I think you are there.

[Author]

Posts