Lessons

Lesson Info

Styling Navigation Links

So right now we just have an Unordered List. Why an Unordered List? Because it's a list of links that's semantically correct, right? I have a list of links, it should be an Unordered List, semantics, 508 compliance. You want to do it in a list. So how are we going to go ahead and style this? All right I'm going to add…I'm going to add stuff to the whiteboard for you guys, okay? We're going to talk about CSS styling for links and I'm going to do it with this. All right, so what the heck am I writing up here anyway? So you have links states. You have a link, a regular old link. You have a visited state for V. You have a hover state, active state, and a focus state. These are all different states that a link can be. So the link is just a link by itself. The visited state is after you've clicked it, after you've already visited that link. Hover is when your mouse is hovering over it. Active is the act of clicking the mouse. Today most people don't see it, it's actually read by default. Pro...

bably never even knew that because you never even saw because things are so fast today. This state maybe going away in the future just so you're aware because it's a potential security risk but it's still there now, okay? Focus is for people who navigate with a keyboard or you can't really hover with a phone and stuff either, right? So it's the focus state when you're on that link and you're about to click it with a keyboard or on another device, okay? So the reason why I'm writing it up here in this way is because when we style there, remember I said some CSS, it matters, the order, it matters. This is the order you must style it in. it must go link state, visited state, hover, active, focus. If you have these reversed your rollovers will not work. It will not work like a rollover, so it has to go in this order. Mostly, though, what we do, we mostly do visited and link together, okay. And then we do hover, active, focus, all as one. This is how we usually do it. But this part has to be on top of this part for the rollovers to work, okay? It's got to go that way . So with that in mind we've got a lot of CSS to create to make this look like links, right? Or look like buttons, I should say, like rollover links, right? First of all, it's not even in line, it's they're up and down. We want them to go straight across, okay. ?Bunch of stuff we're going to create, and I have difference pieces and parts to work with. I'm just going to switch to Code View for a second. Hide these guys. So we can see what we have to work with. Here is my nav from 17, I did not mean to close that, 17 to 23. So I have a nav HTML that I can work with and I have a UL, an Unordered List, HTML that I can work with. I have LI, List Item, HTML that I can work with. And I have A for link that I can work with, okay? So when you're creating your CSS you need to be cognizant of what you've got to work with to create the CSS to stylize stuff, right? So we have a lot of pieces and parts here that we can style. And I'm going to start with the Unordered List. Now I may have more Unordered Lists somewhere later on, right? So if I go back to Split View. I mean I might want to put like an Unordered List in my main content area or in my sidebar that's like informational or something, right? So I want to make sure that this particular Unordered List, since it's going to look like a list of links is distinguished from any other Unordered List I may have in my page. So I have to get specific, all right. So we've been talking about Descendant Selectors and Specificity. It's a technical term , right? So we're applying our specificity here and we're going to get very specific. And so I've got this guy selected. And again I can have Dreamweaver help me, I'm in div. Let's see if I can go down. Look in here. I'm just going to come and select that. So I have my UL selected, right? You don't have to do this, I'm just showing how if you're uncertain about the CSS that you're creating, how to get Dreamweaver to help you create that. I'm going to click on nav in my CSS designer just because I like to keep everything together. I'm going to click on new selector and it's going to do Container, nav, UL. Don't need container, right? Redundant. Everything is in the Container we don't need that. If you are Unordered List inside of the nav, this is what you're going to look like. That I need. And I'm going to go ahead and I'm going to go to... Actually I have in here, I need to do padding zero and margin zero, and list style none, but I don't have to do that. I don't have to do that, it's already done for me in the reset, right? If I didn't have the reset applied I would have to start there. I already have the reset, I don't have to do that. I'm going to do this special thing though called Overflow Hidden. This is going to help it behave correctly. And I don't know, I do have overflow in here somewhere. There it is. But it's got both so actually this is one thing I'm going sneak in. I'm going to come into the CSS. It's in nav, and I'm going to cheat. But just like Dreamweaver helps you write HTML, it also helps you write CSS. It knows CSS, right? So I'm going to say Overflow, and look it comes up and it's like, "Okay, you want Overflow?" "Yes, I do. Thank you." And it does it, and look, it even gives me the parameters, right? So I'm like I want Hidden, thank you. Now I do have to add my ending semicolon by myself but that should work. Okay so I've got the Unordered List Overflow, Hidden. I need to go to the List Items themselves. All right, so I can actually click inside, maybe, maybe not . There we go. I'm going to come over here and I'm going to do New Selector, and it says if you're a link and a List Item in an Unordered List. No, that's not going to help me. I want the LI that's that already got closed but I want it in the nav. So I'm going to do nav, LI. If you are a List Item inside of the nav then this what you should look like. So I've got this guy here. I want it to be…I wanted them to kind of behave like a button, right? I deleted one of those, didn't I? By accident. I'll have to put it back in. So I've got my Unordered List and I'm going to go to Display Block. So just like I do with my picture, I have to tell these guys to Display Block. If I go to Design View, that didn't do it because it didn't take it. Block, there, all right. See how it got those dotted lines around there? So basically what it's saying now is like, "Okay." So we're going to...we'll take up the whole space that we're within. What this allows me to do is if I wanted to do a background color, we're not going to do that. But if I wanted a background color, now the background color is going to fill the whole area that that text is in. Without that Display Block, the background color would only be… It would look just like see how it's highlighted just around the text? That's what my background color would look like, right? So, yeah, it would look terrible . So I need that little block guy in there. And actually I'm going to switch this to Inline block. Because this is an inline we're going to do Inline Block. So we've got Inline Block. I'm going to give them a set width of 150 pixels. I am 150. Okay. And what else are we going to do with these guys? We're going to align the text center. All right, so they're going to be center in there. Let's go back to Live View. There we go. Okay, so you can see now in Live View, now they're sitting next to each other, and I've got the text centered inside each one of their little guys, right? Now I see faces out there. This starts to get… We're starting to get into the complicated stuff. So far everything we've done has been pretty simple. Once we start getting into some of this is a little more complicated. However, the good news is this is stuff that you guys can create once and use as a template. You can save it for yourself and you can just drop it in every time and then just change things like the colors and how it looks and stuff, okay? The other good thing about this stuff you can find all this information out there. You can find like predesigned little bits of this stuff that you can use. And remember we're not actually going to use this anyway . When we're done, we're going to have a hamburger menu, right? A better one by the end of the day. But I want you to know how it kind of gets there in the process. Okay, I do not like that underline. I'm going to go to… We're going to format the link states of these guys now, right? So I've got nav LI. So now I need to say if you are a link or a visited link inside of a nav, right? So I'm going to go ahead and I'm going to create a New Selector, and this New Selector is going to be nav, space, A, colon, link, comma, space, nav, space, A, colon, visited. So it all has to be written out, right? So if you are a visited link in a nav or a regular link in a nav. If I forget the nav on the visited, it's going to do all of my visited links this way. Right? So it has to be specific and spelled out for each section. Okay, so for my links I'm going to get rid of... I know I argue with people about this all the time but I hate underlines on my links. Text Separation None. Get rid of that underline. I don't like it. I don't like that blue color either. So we're going to make the text white. I did not add my white one, two, three, four, five, six. Click the plus. Okay, so now my links are white and I'm going to change...let's see if I can change the font. I want it bold. We can do all caps if we wanted to. I'm just going to leave it like that for now though. So I've got a bold. I've got no links, that's all I want. So now I'm going to do the hover, active, focus states. So I'm going to do the same thing. New Selector. I'm going to show you how to do this quickly. I'm going to do nav, space, A, whoops, A, colon and I'm going to copy that into my clipboard, hover, comma, space, paste, active, space, paste, focus . Okay, so I've got all three in there now. So for the hover active and focus states I want it to be just a different color. So I'm going to change the color and I'm going to make it the tan color. Okay, so now when I mouse over, it works, right? That rollover. Okay, so that kind of whole thing in there, I can give my nav if I want, I'll come back in here and give it a little padding on the inside. Let's do 15 pixels padding on the top. Okay, it wants to be 12, that's fine. It can be 12. We'll do 12 on the bottom. Okay, so now I've got a little bit more space in there, a little bit more room to work with. Okay, all right, so that's all looking good. I'm going to jump down to the footer section now and we're going to add some social media buttons