Treehouse: Grow your CSS skills. Land your dream job.

CSS Help Please

  • # September 19, 2011 at 9:16 am

    Hey Guys,

    Cutting a long story short, I would like the left hand side navigation directly underneath the blue gradient box going across. I have got it in the right position before, but I am so confused at the moment and where it is now make the site look messy.

    The site in question is

    To be honest I think there is some conflict with CSS going on somewhere but no idea where it is sorry.

    I have got a JSfiddle if you would like to play around and try and solve this for me it is:

    Once again what I would like to achieve:

    The left hand side navigation with the grey box to be directly beneath the blue gradient box with no gap.

    Thanks in advance :)

    # September 19, 2011 at 9:31 am

    Firstly the width of ‘main-content’ and ‘columns’ are different which is why the nav ‘box’ is not aligned to the left side of the gradient box.

    ‘main-content’ also has 50px of ‘margin-bottom’. Adjust those and see where you are.

    # September 19, 2011 at 9:52 am

    Thanks Pailie_D for the quick response, removing the 50px ‘margin-bottom’ did not do anything and changing the widths did not do anything either.

    Thanks again for your quick reply,

    # September 19, 2011 at 10:01 am

    Odd…it did when I used ‘Web Inspect’…

    You could play with the ‘top’ style you have in there to at least get this lined up.

    # September 19, 2011 at 10:26 am

    Thanks again for your help but I have solved and fixed it now, I would like it if you could take a look at the first link and critique the design please :)


    # September 19, 2011 at 10:37 am

    Looks fine but a couple of things which are entirely subjective.
    Firstly, your top menu items should have a ‘hover’ state so one can tell that you are, in fact, hovering.
    Secondly, you need to have more than two images in your slider.
    Thirdly, the Customer Helpline needs a little bit of top-margin to push it way from the top of the viewport.
    Finally, without seeming to over-do it…your logo should look as though it’s actually engraved…sort of emphasize what your all about.

    Otherwise, for what it is, a site for a SME it looks perfectly acceptable…functional without being too flashy.

    # September 19, 2011 at 10:50 am

    how about some more breathing room in the lists?

    .tick li { height: 2em; }
    # September 19, 2011 at 11:16 am

    While we’re on the subject of lists…if you’re gonna offer everything…what purpose do the ticks serve?

    I get it’s a ‘design’ feature but if you tick them all, the tick itself is meaningless.

    Not to keep piling on…and it’s not a ‘design’ thing…I hate that a lot of the ‘catalogue’ links are to domains external to the site.

    # September 19, 2011 at 12:57 pm

    To be honest the external catalogs bug me to, I am putting them on there own internal pages as we speak now, they are there just there for the time being.

    I understand what you are saying about the ticks, that they are meaningless if I tick them all, But as you stated its a design feature and that why I used ticks.

    I used ticks and not just bullets because bullets did not stand out enough and made the design a little boring. (well the way I styled them anyway)

    I may be wrong about using ticks for them.

    Thanks guys and galls for all the comments and are open for more, as you are making me a better designer.


    # September 22, 2011 at 6:28 am

    Admin: Created a new thread –

    Thanks :)

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.