Creating a horizontal navigation bar


show more Creating a horizontal navigation bar provides you with in-depth training on Web. Taught by Zoe Gillenwater as part of the Web Accessibility Principles show less
please wait ...

Creating a horizontal navigation bar

>> In the last movie we created the structure of a NAV bar. Now we'll add the CSS to make it look like a NAV bar for sighted users. If you're following along with the exercise files, open the page visitors.html from the 05_02 folder of the chapter five exercise files. We'll continue to edit it in Dreamweaver. First let's add the off left class to the main navigation heading so that we can move it off the screen as we did earlier with the section navigation and footer headings. Highlight over the text.

In the properties inspector click on the Style menu. From the options show, choose the off left class. The main navigation heading has now disappeared. Remember, it's still in the source so that it can be read by screen readers, text browsers and other devices that do not use CSS. Now to start making this look like a NAV bar, we first want to remove the default list styles so it will no longer look like a regular list. In the CSS styles panel, click on the new CSS rule butto...

Creating a horizontal navigation bar
Video duration: 13m 25s 6h 9m Appropriate for all

Viewers:

Creating a horizontal navigation bar provides you with in-depth training on Web. Taught by Zoe Gillenwater as part of the Web Accessibility Principles

Subject:
Web
Author:
please wait ...