Grow your CSS skills. Land your dream job.

Critique my new website + Sticky Footer Problems

  • # November 1, 2012 at 7:39 pm

    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

    # November 1, 2012 at 7:46 pm

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

    # November 1, 2012 at 8:59 pm

    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 :/

    # November 1, 2012 at 9:35 pm

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

    # November 1, 2012 at 10:36 pm

    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…

    # November 2, 2012 at 2:57 am

    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.

    # November 2, 2012 at 4:33 am

    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…

    # November 2, 2012 at 5:37 am

    There you find the solution

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

    # November 2, 2012 at 6:03 am

    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

    # November 2, 2012 at 6:15 am

    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.

    # November 2, 2012 at 6:19 am

    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…

    # November 2, 2012 at 6:25 am

    Yep…that would work.

    # November 2, 2012 at 6:26 am

    The class you have on .inner would work.

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

    # November 2, 2012 at 6:31 am

    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?

    # November 2, 2012 at 6:31 am

    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.

Viewing 15 posts - 1 through 15 (of 21 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".