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.
@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.
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.
@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.
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 :)
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/
@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.
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.
@JamesMD Why would you use a div rather than a span?
@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.
Cool. Thanks for the feedback guys. @chrisburton has been a huge help in my learning process.
Ya... still tweaking the jquery.
What are you trying to achieve with the jQuery that you're not happy with?
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 :)
@JamesMD currently the upon clicking you'll see the right column of text does not animate synchronously with the left paragraph text.