Label & Input Display

[00:00:00]
>> Jen Kramer: How about those legends, do you like the legends?
>> Jen Kramer: They're a little bit hard to see, aren't they? They kinda blend in with everything else that's there. Maybe we need to make our legends a little bit more prominent? Okay, so we can do that. Let's write a style for that, legend

[00:00:23]
>> Jen Kramer: So what I did was I said font-weight,
>> Jen Kramer: bold, that'll help right there. font-size, I said 1.3rems, just to make it a little bit bigger. I gave it some room on the top. If you notice, right now, it's kinda smashed into the text on the top here.

[00:00:45]
So we need a little bit more room on the top. So I said margin-top of 1.5rem, margin-bottom of 1rem.
>> Jen Kramer: So all of that is all about making it pretty.
>> Jen Kramer: And if you go ahead and save your CSS and take a look at your webpage,
>> Jen Kramer: That's a little nicer?

[00:01:21]
>> Jen Kramer: Little bit.
>> Jen Kramer: Do you think legend is a block level element or an inline element?
>> Speaker 3: Inline.
>> Jen Kramer: You think it's in line cuz it's inline with the border? Okay, anyone think it's a block level element?
>> Jen Kramer: How would we find out for sure?
>> Cassie: Put a border on it.

[00:01:43]
>> Jen Kramer: Stick a border on it. Let's put a border on it. So let's just put a border on a legend for a moment. border: 1 pixel solid blue.
>> Jen Kramer: So what does that tell you? Is it a block level element or is it an inline element? It is an inline element, why?

[00:02:11]
>> Speaker 4: Doesn't go all the way across.
>> Jen Kramer: It doesn't go all the way across, and it is as big as its content, right? So that is an inline element. What would happen if we turn legend it into a block level element?
>> Jen Kramer: Let's just see what happens, let's put in a display: block here and see what happens.

[00:02:41]
>> Jen Kramer: Not a lot.
>> Jen Kramer: Still in the same place.
>> Jen Kramer: Okay?
>> Jen Kramer: How are we doing so far? It's already looking better, we still can't read the form itself, but the page looks great. Okay, let's start working on the legibility of the form itself. Let's style up those labels.

[00:03:11]
Are labels inline or are they block?
>> Jen Kramer: Is the label tag inline or block?
>> Cassie: Inline.
>> Jen Kramer: Cassie says it's inline. How many say it's totally inline? Okay, we have one for inline, and one for block, and eight I have no ideas.
>> Speaker 5: I think it depends.
>> Jen Kramer: [COUGH] It depends?

[00:03:33]
>> Speaker 5: Yeah.
>> Jen Kramer: Okay, why do you say it depends?
>> Speaker 5: Cuz for some of the things, the label has been around a whole thing. And for some of them it's only been, I think its label, maybe its legend that I'm thinking of.
>> Jen Kramer: Mm-hm, okay. Yeah, that is true, label wrapped around some things entirely.

[00:03:50]
And in other cases, it was kind of a standalone kind of thing. But take a look at our radio buttons, for example. Our radio buttons are all next to each other in a row. What does that imply? Maybe it's inline? So always we can figure it out. All we have to do is say border: 1 pixel solid blue.

[00:04:13]
>> Jen Kramer: Stick a border on it, take a look.
>> Jen Kramer: What does that tell you? They're inline, Cassie's right, okay? What happens if we change them to block?
>> Jen Kramer: Anything gonna change if we change them to block? What will change in terms of the way the page looks, Cassie?

[00:04:38]
>> Cassie: They will probably be in a column, other than-
>> Jen Kramer: Maybe they'll be in a column, why is that, why do you think that?
>> Cassie: Because.
>> Jen Kramer: They're as wide as their containing element, maybe?
>> Cassie: [LAUGH]
>> Jen Kramer: And what's their containing element, Cassie?
>> Cassie: The line.
>> Jen Kramer: Close, it's the fieldset, right?

[00:05:01]
>> Cassie: Yeah.
>> Jen Kramer: Yeah, so let's make them as wide as the fieldset and that should kinda push some stuff down the page? Let's give it a shot. So let's change this border to display,
>> Jen Kramer: block. [COUGH]
>> Jen Kramer: Whoa, pretty cool?
>> Jen Kramer: That really helped a lot. Already it's much more readable.

[00:05:38]
>> Jen Kramer: Okay, so sometimes it's just those little things that will help make these things work a little bit better?