Styling Navigation Items & Links

[00:00:00]
>> Jen Kramer: Now what would happen if you're using this on a phone?
>> Jen Kramer: Anybody ever clicked on a link on a phone?
>> Speaker 2: Don't necessarily hit the correct one cuz they're so close together.
>> Jen Kramer: They're kind of close together for your fat finger, aren't they? [LAUGH] And everybody has fat fingers, all right?

[00:00:19]
So we need to put a little bit of space between these. How might we go about doing that?
>> Speaker 2: Margin? Add the bo-
>> Jen Kramer: Could be margin, could be padding.
>> Jen Kramer: And on which element? [SOUND] There's a lot of possibilities here.
>> [LAUGH]
>> Jen Kramer: Yeah.
>> Speaker 3: On the links themselves?

[00:00:42]
>> Jen Kramer: It could be on the links themselves, it could be on the li. Okay, most of the styling going forward now that we've gotten our ul all cleaned up here, most of the styling going forward is either gonna be the li or on the a, okay? And so I'll show you some examples of things that we can do here.

[00:01:01]
Let's say that we wanna make all of these buttons look like all, I'm sorry, all of these links look like a button, okay? In other words, we wanna have a nice looking box, all right? Let's say we wanna have a nice looking box and we want the whole box to be clickable.

[00:01:18]
Sound good? Okay, so let's start by saying that we're gonna assign a width to our li. Let's say that that width is, and you can make it whatever you want, let's say it's 100 or sorry, 10rems cuz that's a nice convenient size. And since it doesn't look like anything happened there, let's also give it a background color,

[00:01:48]
>> Jen Kramer: Of red, okay? So there's the start of our buttons.
>> Jen Kramer: What should we do next?
>> Speaker 2: Change the-
>> Jen Kramer: Emma?
>> Speaker 2: Change the border so it's visible.
>> Jen Kramer: You wanna change the border so it's visible?
>> Speaker 2: Around each of the-
>> Jen Kramer: You wanna see the li-
>> Speaker 2: Yeah.

[00:02:16]
>> Jen Kramer: And the a or?
>> Speaker 2: Under li.
>> Jen Kramer: You wanna see the li? Okay, I'm gonna change my green to something else, let's make it yellow. I try never to use green and red together online because there are a lot of color blind people out there, I'm also gonna make this solid.

[00:02:37]
>> Speaker 2: I guess that would make the whole thing a button though?
>> Jen Kramer: Okay, so that's what's going on there. And then just so you can see what's going on here let's go nav a and let's set up a border here as well, border: is 3 px solid, or dotted orange.

[00:03:01]
>> Jen Kramer: Okay, can you see that? Maybe white is better.
>> Jen Kramer: Okay? So you can see that those links are only as big as their text, right? Whereas the lis or nice block level elements, they're al lined up nice and neat. What might be something you wanna do next for these buttons?

[00:03:25]
Yeah?
>> Speaker 2: So you could add spacing. And what if you change the size of the text then with the spacing increase too-
>> Jen Kramer: We could change the size of the text. All right, so do we change the size of the text where?
>> Speaker 2: Will do nav a.
>> Jen Kramer: On, the a?

[00:03:46]
Okay, so let's change the size of the text on the a, font-size, let's say 1.5rem, okay? So we made them bigger, good. What else would people like to do? Are you happy with link color? You want green on a red background?
>> Speaker 2: You said-
>> Speaker 3: White.
>> Speaker 2: You like using red and green?

[00:04:11]
>> Jen Kramer: I don't like using red and green.
>> Speaker 3: [INAUDIBLE] White.
>> Speaker 2: Don't [LAUGH]
>> Jen Kramer: Yeah, there are a lot of color blind people out there. 10% of the population is color blind, we avoid red and green.
>> Speaker 3: I made them white.
>> Jen Kramer: White? White sounds like a lovely color, okay.

[00:04:25]
Color: white. Do we want them bold?
>> Speaker 2: No.
>> Jen Kramer: Sure. Sure, we want them bold.
>> [LAUGH]
>> Jen Kramer: Font weight: bold, great. Are you happy with the way they're lined up?
>> Jen Kramer: No?
>> Speaker 3: Centered.
>> Jen Kramer: You want them centered? How do we center them?
>> Speaker 3: Text-align.
>> Jen Kramer: Text-align.

[00:04:53]
>> Jen Kramer: Whoops, that didn't work. Why didn't that work?
>> Speaker 2: Is it because the margin is only around that part of the word and so there's no room to move?
>> Jen Kramer: Exactly. That's exactly it. So these are inline elements, they're only as big as their box, so by putting my text-align center on my a I centered them inside of their boxes, did exactly what we told them to do.

[00:05:16]
>> [LAUGH]
>> Jen Kramer: I hate it when that happens. So we need to move this somewhere else. Where might be a good place to put that?
>> Speaker 2: Li?
>> Jen Kramer: I'll bet on the LI, okay. So the nav li let's put our text-align center there.
>> Speaker 3: Is a reason not to do it in body just because it's lower down or?

[00:05:36]
>> Jen Kramer: Well, if you did it on body then everything on your web page would be-
>> Speaker 3: Okay.
>> Jen Kramer: Align center-
>> Speaker 3: Yeah-
>> Jen Kramer: Right?
>> Speaker 3: Yes so we're just working with [INAUDIBLE] right not.
>> Jen Kramer: Yeah, you probably don't want that, okay.
>> Jen Kramer: I hear a graphic designer online screaming that they really, really hate the underlines, am I right on that?

[00:05:53]
Okay. Nobody here in the classroom's screaming about it, but somebody out there is. So let's go on ahead and get rid of the underlines. How do we do that?
>> Jen Kramer: Yeah?
>> Speaker 2: We need to go to the a, or I suppose forward here.
>> Jen Kramer: Yeah, nav a, mm-hm.

[00:06:09]
>> Speaker 2: We can do text decoration none.
>> Jen Kramer: Text decoration: none.
>> Jen Kramer: Okay?
>> Jen Kramer: Anything else?
>> Jen Kramer: Are you happy with the size of the buttons? The spacing of the buttons? The clickable area of the buttons?
>> Speaker 2: I'd want more space between them.
>> Jen Kramer: You want more space between the buttons?

[00:06:34]
Okay, how would we get some space between the buttons? How many say that's padding?
>> Jen Kramer: Two votes for padding. How many say that's margin between the buttons? Three people say that's margin, four people, five people say that's margin. The margins have it. Okay, and where are we gonna put that margin?

[00:06:54]
>> Speaker 3: The bottom?
>> Jen Kramer: You're gonna put the margin on the body?
>> Jen Kramer: We wanna put margin between the buttons.
>> Speaker 3: I said the bottom of each button.
>> Jen Kramer: The bottom of each, which one?
>> Speaker 3: Li-
>> Jen Kramer: At the bottom of each LI, okay? So we'll say margin bottom: something like 1rem.

[00:07:18]
Did that help?
>> Jen Kramer: Little much? Wanna do a little less? You can play with this stuff for hours trying to find the perfect dimension, okay, all right? Yes?
>> Speaker 3: Can we make the whole background area clickable?
>> Jen Kramer: Yes, we can make the whole background area clickable. That is a fabulous trick.