Build Your Own Business Website header image

Using a Definition List to Line Up Related Text

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session we demonstrate how to use a definition list to line up related text. We show how to use the HTML <dl>, <dt> and <dd> tags in the HTML view of the text editor to set up the structure. Then we use a single element style package to add styling so the list displays the way we want.

Video Transcript

Member:  Well, the third one, it’s kind of hard to explain exactly. But it has to do with text aligning on different lines. And there’s actually two parts to it. I…

Rick:  If I make you the presenter and… can you… is it easier to explain? Show me what you’re talking about?

Member:  Well, I have it how I want it… yeah, I have it on Illustrator so if you want to make me a presenter, I’ll just show you what I’m looking to make it look like.

Rick:  Yeah, that’s perfect.

Member:  Okay so the content, the main content where it says who we are and the name is shuttle blah blah… well, I want to make the who we are in like an h4 tag and then the following content in like a paragraph. But I want it to stay on the same line and I also want it to be aligned and I can’t get that to happen.

Rick:  Okay well the way to… I think probably the easiest way to do that is to wrap each pair in a div and then wrap each segment in a div and then just repeat that. So essentially what you’re going to do is you’re going to have a wrapping div and then you’re going to have 2 divs inside. So I’m going to make myself a presenter again and I’ll show you what I mean.

Member:  Great.

Rick:  Let’s see, okay we’ll just pretend these things are like that, that this heading needs to sit beside the text and the text needs to be in a box like that. So we’ll just create… we’ll just do that with this section here. And somebody suggests using a datalist. You know, I never ever use that and that actually might be a better idea. That might be a better idea. And we just look here for a second or a definition list, you mean or a DL, right.

I don’t know, I guess that’s pretty close but not quite. It doesn’t really get these things lining up she wants them though which I think is probably a little easier to do with divs than it is with that. Richard says it definitely would work. Let’s see, he is suggesting a… just a second here. He’s a suggesting a URL that he’s used. I’ve never done this before but it looks right, doesn’t it?

Member:  It does. So if it was to say… if the sentence was to extend on to the next line…

Rick:  Well, let’s try it. So we’ll do it that way instead of the way I suggested it. So we’ll have a DL with a DT and a DD, just like that. Let’s just go in there and give that a try with this page. And let’s see, let’s just do it in the full screen and in the html view. Okay so then we’re saying DL and then… oh pardon me. We’re going to do it above the… that’s fine like it is. And then this is a DT, is that what that is? DT and DD, yeah. Okay, let’s see how that works.

DL, DT and DT. And then DD and DD. Okay so it’s opening and closing and then we just come down here to our DT again and do our DT there and our DT there. Oh, I screwed up the closing DT and the closing DT. And then an opening DD and then a closing DD and then a closing DL. Let’s try it, let’s see what it looks like.

That didn’t do anything. Let’s just try it again. Maybe it didn’t do anything because it doesn’t have a style for DD and DL. Let’s inspect that element. Yeah, Richard says, “Well, duh. You do have to format it.” Okay so we’re going to make DTs. We’re going to make 300 pixels wide and DDs, we’ll make… let’s just try that.

So let’s come back over now to our Thesis Skin Editor and then go over to CSS. And then we’re going to create a single element style. Add the package and I think in this case, we’re just going to call these definitions and definitions. And I’m not going to put anything as a selector. I’ll leave it alone.

And actually, what I’m really going to do is just come over here and do it. And so we’ll say DD and… or actually, DT and we’ll say width: 300 px and then float: left. And then I think also, we’ll clear both. See how that works? I’ve never done this so this is going to be completely out of the blue here. And which means the DD should just… you know, I think that the DD will just do it just like this. Let’s just try that. Save the CSS, come back over and look at this.

Let’s try it again.

Member:  No, is there… is that H2 heading supposed to be in there?

Rick:  Well, I don’t know. You’re right, the H2 heading may actually be causing a problem. So let’s just get rid of the H2. Okay obviously… oh, I didn’t put the reference in here. No definitions. Okay so we could have actually left the H2. The thing is that the H2 in this case has a top margin that is projecting up above it. I think also we would want to set a width for this. So our total overall width is 934 so we want to make it 600 and then give it a little bit of left margin or something.

So if we come back over to the package, go back to definitions, additional and say DD and then width… let’s see, 610 and then margin left: 24 px. I bet you that does the trick. At which point, all you have to do is you know, style some of these… I guess I have to float it right as well or display block. I might be able to do it. Well, just float it right, what the heck.

We’re learning this together as we go along here. I can honestly say I’ve never used that html element in my life.

Okay so the only reason why this is sitting down instead of sitting beside is because our H2 has this… or H3 has that great big margin. And I think I could get rid of that top margin and now they you know, sit up there beside it.

Member:  That’s great. So my other question along… I mean, that’s perfect. So like say one of those…

Rick:  Way to go, Richard.

Member:  One of the headings like let’s say the ‘although heading should not be used for styling text’, like let’s say you wanted to break that and say… you want it to say ‘although heading should’ and then the ‘not’ be on the next line… is that when you do the shift enter or I… could you do a break?

Rick:  Because you want it… you want it to stop at ‘not’?

Member:  Yeah, just for example.

Rick:  Yeah so you could do a shift enter there.

Member:  Okay.

Rick:  I mean, let’s see. Okay yeah, it worked although it jumped, didn’t it? I must have done something else besides just shift enter or I lost something here. I did, I got some… I completely messed that up when I did that. DD, DT… I got a closing DL in there someplace. Richard says, “Use a br tag instead.” I think that’s probably right because we don’t need a closing DL tag and we don’t need an opening… well, we need an opening DT but we don’t need a closing DT.

Yeah so obviously, WordPress will mangle this if you give it half a chance because it did just do that. DT… closing DT so caveat there. It didn’t know how to interpret… yeah, look at that. It just screwed all that stuff up. So it doesn’t know how to interpret this very well. There we go. Yeah and then you just have to get rid of the top margin for that heading.

You could easily do that again, with the style. So in this section, definitions you know, you could come over here and say DL H3 margin top: none semi-colon. Save, compile, refresh… refresh it again. Okay, why didn’t that work? Because I’m still more specific. So in that case, you’d add post box so .postbox DL H3.

So do you get a little less in specificity and inheritance in this. Apparently, I’m still getting that lesson.

Member:  Is that margin top, is it none? Does none work or does it need to be 0?

Rick:  Oh no, none doesn’t work. It does need to be 0. That’s the problem, it was an error. That was the problem, you’re right. So that’s a much better solution than what I was going to propose because…. I mean, it’s less code and you can obviously decide to go use it again. It clearly responds well to sort of minimum amount of styling. So there you go. Learn something new everyday. I like that.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 comments… add one

Leave a Comment