okay
so let's talk about how to create the navigation
you might be a little further along than I am
or you might be a little further behind than I am but that's okay
as long as you have your nav section
and then I've created a list in here with each in the names to the buttons I want
to create
and each of those are linked to their respective pages
now if you don't have those pages created that's okay just name them what
you think you would name them
and make sure that when you create those pages that they're the exact same thing
so let's go ahead and look at the source code for this
I have a nav tag and inside of it I have an unordered list
and each list item has a link to its respective page
I didn't add any ID's I just kept it simple
if I had two different forms of navigation on my page like a main
navigation and a sub navigation
it be really important for me to put an ID = main navigation
or main nav and then my sub navigation would have an ID sub nav
so that my rules for one don't affect the other
so let's go back to the design view and let's talk about how this is styled so
far
if a look at all the styles in my CSS I have
my nav that is inside of the wrapper div
it is styled with a background color and I just said a garish
color for right now and actually it shouldn't have any of these box shadows so
I must have accidentally done that so right now it just has a color and that's
fine
so the first thing we want to style is the
actual unordered list so I'm gonna click inside of the list
and hit the + sign and I'm going to get rid of this A and
LI so it should be wrapper, nav, ul and remember the wrapper has a hash
tag because I'm referring to an ID
and not a regular generic tag like I am here in nav
so what I wanna do for this one is
basically center it so I'll go to text and choose text align center
and that's going to make sure that my navigation sits in the center in the
actual section
so I'll probably come back to this to add some padding on the top and bottom
to make sure my buttons that right
but for right now let's add another rule and this one specifically for the
LI so for the list item what we want to do is we want to force it to sit
or display
as a in-line element so if I go up to the layout
display I'm going to click here and choose
in-line because remember it's a block-level element so it wants a stacked one on top
of each other
but if you choose in-line its gonna sit to the left and right of each other
now I can also come here to the background
and give this a garish background color of red just so you can kinda see what's
happening here
now we will also come back to this rule to add some margin on the right to push
the buttons away from each other
but let's just keep going with these rules so I'll click + again I
have my selector inside one of these links I'll click the + to add
another rule and this time it's for the A tag in the LI
in the UL in the NAV in the wrapper so we're kinda seeing that cascade
or the specific order so from here we want to give it a little bit more space
so I'm gonna go to my padding area and I'm going to add
5 padding on the top 20 on the right
5 on the bottom and 20 on the left
so as we're looking here
we can see, well it doesn't look like anythings happening right now
but if I go to live view, see how it added some space on the left and some space on
the right
so that is kind what we want to have happen so I can go back to this UL
and I can add some padding on the top of 5
and padding on the bottom of 5
to kinda give it more space so we'll go back to this
A, we have 20 pixels on left 20 pixels on the right
and 5 pixels on the top and bottom so if we come in here
and change the background color as to a green
you're really gonna see this change see how different it looks than the red that
we're seeing for the LI
so this is where we have the 20 pixels on left 20 pixels on the right
5 on top and 5 on bottom so its making
look like chunkier blocks so you can change those paddings
or the padding settings however you want so let's go ahead and take the text their
decoration off
that's the underline that comes with the link so I can click this none
and it goes away it doesn't look like it goes away but if I go to live
you'll see that it actually gone so let me
click out of live and go back up here
and the last thing we need to do is we need to
add a hover functionality so what happens when somebody rolls over it
so we can click the + and at the end
A type :hover
so with that hover property
ready we can go down to the background color
and let's do a light blue
so it's kinda easy to see what happens if we go to line
and hover over see how its turning light blue
and remember don't depend on the live view from Dreamweaver sometimes it works
and sometimes it
sometimes it doesn't so make sure you preview things in the browser just to
make sure
so what I need to do now is actually take all the color out
so to do that I'm gonna go back to the UL
and make sure it doesn't have any color in it
and it doesn't and I'm gonna go to the nav
and I'm gonna change that color with the color picker to my dark brown
38170C
and for the A tag
I actually don't want a background-color I could of had a background color
and the, but I do want to text color to be white because it's going to be
sitting on that dark brown
so I'll go to the text color and choose
white or I could of choose this creamy color here
and go back to the LI to get rid of that
red color let's throw that away
and another thing with LI we can go up to this layout and we can
add some margin on the left and right so for a push it to the 15 pixels to the
right
they kind of site away from each other and then the hover
I actually want it to be sort of this creamy color
or maybe a little bit darker
and I'm gonna have to change the text because when I roll over it
well the white doesn't look bad on that but I can change it to dark brown
so I can in this hover go to text
change the color to you the dark brown so where's the color
okay I'm always
looking elsewhere for things, okay
so let's preview this in the browser and let's make sure I click in here first and
then preview
in the browser says it needs to be saved that's okay
so now and I hover over we see the roll over functionality
everything is spaced out and that's how you create navigation with CSS and
lists