Grow your CSS skills. Land your dream job.

Critique/help me with design

  • # January 21, 2013 at 3:13 pm

    Hi everyone,
    I’ve got a working version of a little project I’ve been working on. Thanks to many of you, your contributions have really spring-boarded me into designing this.

    I feel stuck at the moment. There are a few things going on that I don’t like.
    1) the left grid for the numbers is not lining up to the bottom of each header. Mainly due to the fact that each font header is not really the same size. Even though they are all specified as an h1 size.

    2) The jquery isn’t quite how I want it…

    3) Text alignment. again.

    4) the header logo

    Much thanks.

    http://jamilopitts.com/kirby/

    # January 21, 2013 at 6:11 pm

    @wragen I honestly like James’s script logo. Have you tried testing that for the logo or does he not want that?

    Hmm. Since the font-size does not produce the same cap height for each typeface, you might have to tweak each numeral to line up horizontally centered.

    I have noticed a slow loading time when visiting the page. I’m betting that’s due to the jQuery. Since I’m not familiar with jQuery that much, not sure I can help you here.

    # January 21, 2013 at 7:01 pm

    The reason each typeface isn’t lining up correctly is because they all share different characteristics. I noticed you set line-height:120px; on the class .numbers — You would have to set different line-heights or margins on each number, but giving the numbers properties of their own. So just chain the classes along like <span class="n1">01.</span>, <span class="n2">02.</span> and so on but apply different margins, line-height, whatever you need to align each number correctly.

    This is just the way custom fonts work. Not all, if any, are made to the same baseline.

    # January 21, 2013 at 7:08 pm

    @JamesMD Why would you use a div rather than a span?

    # January 21, 2013 at 7:11 pm

    @chrisburton – Sorry, was meant to use span. It’s 1AM and I’m working between projects. I have no idea what I’m writing as a type. Considering he’s already using span, I don’t get myself how div landed in my brain… Total misfortune.

    # January 21, 2013 at 7:13 pm

    Cool. Thanks for the feedback guys. @chrisburton has been a huge help in my learning process.

    Ya… still tweaking the jquery.

    # January 21, 2013 at 7:15 pm

    What are you trying to achieve with the jQuery that you’re not happy with?

    # January 21, 2013 at 7:20 pm

    Just a quick note:

    When I visited the page, I initially didn’t realise that clicking on the different fonts would expand that area and give more information. Perhaps you should have some sort of visual cue that clicking on the area will bring up more info? Maybe a subtle hover colour or even just ‘click for further information’.

    I really like the styling when you do click on them, though :)

    # January 21, 2013 at 8:37 pm

    @JamesMD currently the upon clicking you’ll see the right column of text does not animate synchronously with the left paragraph text.

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

You must be logged in to reply to this topic.

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