Hi folks,
I'm trying to figure out grids and baseline. Can someone help me understand why the h2 is positioned at the top and the h1 is on the bottom? I'm trying to get this down.
Yea, line-height will only really take effect on the 2nd line. You could padding top the div maybe? Though that's probably not a very robust solution :/
You could put the 01. in a <span> to change the font size, then stick some padding right on it to kick the Title away if you wanted to keep the space?
Then there's no need for the extra div and you'd get them on the same line. Depends what you want to achieve with it though, was there a reason for the 2 divs?
I would like the left number to just serve as a left margin. And the title to server as the paragraph column in which text will be aligned directly under.
thinking this might be my solution -
div class="heading"
h1>first words h2>Second words/h2>
/div>
@wragen22 I'm not sure if that's "semantically" correct. Your H1 should come before the H2. I wouldn't consider a numeric value that important in this case. Throw it in a span.
Unfortunately (as explained in the line-height article), you can't get what you want without the use of a 'magic number', and even then, it will be slightly different depending on the typeface and browser.
@chrisburton Nothing wrong with that! Nice solution by the way, that's how I would do it (now that I've seen it).
Also, looking at @wolfcry911's version made me think of a way to handle it without relying on a 'magic number'; use inline-block for both headings as that way you can take advantage of the vertical-align property (which aligns to the baseline by default). The only downside of that is that you would need to have the h2 appear before the h1 in the markup. With all that being said, I'd still use @chrisburton's solution.
Alright guys.. I went back to a whole separate div grid container for the number. Not ideal. The reason being is I couldn't get the jquery to work correctly for the ol with the text below each title. Maybe i missed something.
When you click on each section (Duke, Mission Script, etc), they all expand.
What I mean is, if I intially click on Duke but then want to see what Mission Script offers, I prefer that Duke collapses and Mission Script expands when I click on a different section.
@joshuanhibbert Took a look at your blogs. Would you recommend applying your methods to my site? I've applied css normalize so thinking I would be overriding some things there.
@wragen22 If you like. The way I've explained it on my website is a fairly easy way to keep everything nice and aligned vertically. There are other ways, but I find that technique the most consistent.
@wragen22 Any reason that you're hiding the information in the first place? It's generally considered bad UX to do so without a good reason. I would recommend you simply show everything.
Hi folks, I'm trying to figure out grids and baseline. Can someone help me understand why the h2 is positioned at the top and the h1 is on the bottom? I'm trying to get this down.
http://codepen.io/wragen22/pen/hqFHn
What exactly are you trying to do here?
The h2 appears higher because it is smaller and has a different line height to the h1.
hm, are you trying to get the h1 and h2 onto the same baseline?
Grid Lover might be a good tool to have a look at if you want to learn about Baselines :)
Yes, I am trying to get them both on the same baseline. Adjusting the line-height still does not get that fixed though... :-/
Yea, line-height will only really take effect on the 2nd line. You could padding top the div maybe? Though that's probably not a very robust solution :/
Is the solution to just ditch two different columns and go for a one line "01. title"
You could put the 01. in a
<span>to change the font size, then stick some padding right on it to kick the Title away if you wanted to keep the space?Then there's no need for the extra div and you'd get them on the same line. Depends what you want to achieve with it though, was there a reason for the 2 divs?
I would like the left number to just serve as a left margin. And the title to server as the paragraph column in which text will be aligned directly under.
thinking this might be my solution -
div class="heading" h1>first words h2>Second words/h2> /div>
.heading h1, h2 { display: inline; }
@lucas572
Not true. It effects the top and bottom of the text.
@wragen22 I'm not sure if that's "semantically" correct. Your H1 should come before the H2. I wouldn't consider a numeric value that important in this case. Throw it in a span.
I talked to Brad in GChat and we came up with an alternate solution to just use an
<ol>.http://codepen.io/chrisburton/pen/gpmtn
Edit: After further discussion, the above might not be feasible since there will be content following the title.
@wragen22 I've written a couple of articles on
line-heightand baseline grids. Feel free to have a read:http://joshnh.com/2011/08/03/how-to-set-up-a-baseline-grid/
http://joshnh.com/2012/10/12/how-does-line-height-actually-work/
Unfortunately (as explained in the
line-heightarticle), you can't get what you want without the use of a 'magic number', and even then, it will be slightly different depending on the typeface and browser.Here's a fork of chrisburton's pen. If you're using numbers, I like the ol
Here's another version using the two headers you originally had.
@wolfcry911 I wasn't sure if using an
<ol>would be okay since he needed to have content (<p>tags) inside it.@chrisburton Nothing wrong with that! Nice solution by the way, that's how I would do it (now that I've seen it).
Also, looking at @wolfcry911's version made me think of a way to handle it without relying on a 'magic number'; use
inline-blockfor both headings as that way you can take advantage of thevertical-alignproperty (which aligns to the baseline by default). The only downside of that is that you would need to have theh2appear before theh1in the markup. With all that being said, I'd still use @chrisburton's solution.@joshuanhibbert Thanks, Josh.
Alright guys.. I went back to a whole separate div grid container for the number. Not ideal. The reason being is I couldn't get the jquery to work correctly for the ol with the text below each title. Maybe i missed something.
http://jamilopitts.com/kirby
@wragen22 Personally, I prefer that each section collapses when I click on another.
@chrisburton what do you mean?
When you click on each section (Duke, Mission Script, etc), they all expand.
What I mean is, if I intially click on Duke but then want to see what Mission Script offers, I prefer that Duke collapses and Mission Script expands when I click on a different section.
@joshuanhibbert Took a look at your blogs. Would you recommend applying your methods to my site? I've applied css normalize so thinking I would be overriding some things there.
Ooh. I didn't even think about
vertical-align:middle;. That might be a solution for you.@wragen22 If you like. The way I've explained it on my website is a fairly easy way to keep everything nice and aligned vertically. There are other ways, but I find that technique the most consistent.
@chrisburton hmmm.. not seeing a solution in trying vertical-align:middle
Ah yes.. I was planning on getting that in the jquery at some point.
@wragen22 Any reason that you're hiding the information in the first place? It's generally considered bad UX to do so without a good reason. I would recommend you simply show everything.
Yes, listen to Joshua. He got very good article on his blog about setting baseline grid. Link: http://joshnh.com/2011/08/03/how-to-set-up-a-baseline-grid/
Cheers :)