CSS Layout Tutorial - 11 - Navigation bar and buttons Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

welcome to the eleventh video on CSS
layouts we're going to add some buttons
to our navigation bar so the first thing
we want to start out with is HTML and so
let's go to our div section in our HTML
and as usual I already type some of this
out so I'm just going to copy and paste
in here and of course we start out with
a unordered list element close it out
and then we put a list element inside
the unordered list element so each one
of our list elements will be a button
and then when we get to the CSS portion
of this we will style each one of these
buttons so right now this is just the
raw HTML and we'll put in an href later
when we get to master and content pages
so for now we're just going to keep that
empty we're just going to have the name
of the button which in this case is just
going to be the home button so let's go
ahead and make a few more buttons so
what else do we want well since this is
a history site we want a section on
ancient Greece so let's put a section on
ancient Greece we'll have a button for
that and let's do another section on
ancient Rome and we'll add yet another
button and we'll do a section on World
War two so we'll have four big
historical subjects and let's save our
HTML and let's open up our web page and
there you can see we've just got raw
HTML right here where I HTML of course
now we need to format all of these so
these look like they're actually buttons
not just raw HTML so let's close this
out ok so let's deal with the CSS now
now we're going to replace all of the
CSS code we originally had for the
navbar actually well we're going to I'm
going to copy and paste right over this
and then you guys can type it in we will
actually keep the margin in the border
radius but I've already typed it into
the new code so I'm just going to copy
and paste over this and here you can see
we've got some new code here now I
change the background color to black
I'll show you this in a minute this
list-style-type property gets rid of the
bullet points so you need to set that to
none and that gets rid of the bullet
points we want to Center our button so
we use the text align property we don't
want a lot of padding
because I want the buttons right near
the edge of our navbar I think that
looks pretty cool so we're going to put
just a small amount of padding of five
pixels and we'll keep the same margin
and border-radius like I said so let's
go ahead and save this and voila we've
got buttons now in our navbar of course
we need to style these now the first
thing we need to do now is get these
buttons to display side by side we do
not want them at a top down order and
these are being treated as block
elements we want these to be displayed
side by side so we need to create a new
role to switch these elements to in line
and we'll do that so let's go ahead and
just copy and paste this and we will put
an li element here and we're just going
to use one role for this we're going to
call this display and then we're going
to say in line okay so let's hit the
Save button and you will see now that
the buttons are displayed side by side
now a couple of things first you might
ask why didn't we just style the nav bar
itself why do we why are we styling the
UL element and that's because I only
want the box model remember the CSS
boxes I only want that for the UL
because I want the buttons to size right
to the edge of the element now if we
take this out you'll see and we save
this you'll see that we get a box model
now for the div and there you can see it
now you might want that but I don't so
we're not going to style the div we only
want to style the UL so if we put this
ul back in here we'll just get the box
model for the UL as you can see right
here and so I think that looks better
now one more point here of course with
this rule set we are styling the list
element but it's good practice to put
the path towards that list element in
this case it's the UL so we start with
the navbar of course we need that but we
don't necessarily have to put the UL
there we could have just put the li
element and we would have got same
results but it's good practice to put
this in
so you know the path from the navbar to
the UL to the list element but I'll show
you we can actually pull this out and
save this and we'll get the same exact
results there you can see we get the
same thing but like I said it's good
practice to put the UL in there so that
you know the path okay that is going to
do it for this video in the next video
we will start styling the buttons see
you guys