From the course: HTML and CSS: Linking

Unlock the full course today

Join today to access over 24,800 courses taught by industry experts.

Creating a simple horizontal navigation bar

Creating a simple horizontal navigation bar

From the course: HTML and CSS: Linking

Start my 1-month free trial Buy for my team

Creating a simple horizontal navigation bar

“

- [Instructor] Next up, how about a horizontal navigation bar? This is where I see most offenders on the web today. People don't understand how to make a unordered list, which is the correct markup for a navigation bar, go horizontally across the page. It's really pretty straightforward. So let's walk through how to do that now. So first of all, here in our CSS, if you'd like to have your nav bar snug up against the top, and the left and the right side of your navigation window, the trick is to turn off the padding and the margin in the body. So let's start there, body with a padding of zero and a margin of zero. The next thing to do is, let's set up a background color for our navigation. We can just use the nav tag for that. Our background color will be #EFAC2F. And if you want, you can throw on a border on the bottom of one pixel solid gray. So that will give you a nice sharp line between your navigation bar and the rest of your page. It's a nice effect. You might be wondering about…

Contents