Hi, everybody.
Welcome back.
Since it's week four and
you're working on your final project, what I want to do is kind of show you
some of the different options that you can use when you're styling your pages.
And in this video,
I want to show you what happens when you try to make a vertical navigation bar.
So over here in my browser,
I have what the page is going to look like when we're done.
But let's go ahead and I'll hit refresh and first see what it would look like
if I tried to make a navigation bar using four simple links.
Again, links are inline, so they go next to each other.
There's no color.
There's nothing going on.
And it's really horrible.
So let me put that style back in.
Refresh the page.
And I’m going to show you how I created this navigation bar.
Let’s start by talking about the body.
I just put in some background color, padding, and margin.
That’s not really important here.
What’s important is talking about our navigation section.
One of the things I wanted to do is to show you the idea of
using that box-sizing border-box.
What this is going to do is it takes away the need for
you to count up how much width, how much padding, how much border.
You don't have to do the math.
The browser will do it for you.
I put in some simple border, color, background color, etc.
The first thing I did, though, is I made it inline-block,
because I want my navigation to be next to the other parts of my page.
And since nav is block, it won't happen unless I kind of throw it in there.
So I said I wanted it to be about 20% of the page and then added some margin.
Now, something new you may not have seen before is this idea of height
equals 100vh.
That's your viewport height.
So this means I want the navigation to take up the whole height of your page.
I'm not hard-coating it to 400 pixels or 200 pixels,
cuz I don't know how big the screen is that you're looking at.
Next, let's talk about the actual lengths themselves.
What I've gone in and done is I've taken away the regular boring links and
I've really styled them to make them something a little more original.
So I put in a height of how high I want each one of my links to be.
And then I put in a little bit of a trick and
I said I want the line height to be 45 pixels.
So why would I do that?
The reason would be I want to center home photos or
I want to center the words within it and this is how I can do it.
The next kind of cool thing I've done is I've added a background image.
I added these little arrows.
And the cool thing that I had to do that I want to really point out to you is
I couldn't just link to the folder and then the file.
Because of the way I set up my code, first I need to say, oh, I know I'm in the CSS
folder right now, so I'm going to go back up to my main folder and then find images.
If this is confusing for you, don't worry.
It's a brand-new concept, but it's something that a lot of you are going to
run into as you try to link images from your style sheet.
All right.
The last thing I did was just add in a little padding, so there's room for
the picture, and then add some margin.
So using these different things we've already talked about, position, sorry,
display, line height, background URLs, we were able to make something
that I think looks really cool for a simple, vertical navigation bar.
Go ahead and try it.
Good luck.