Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating a horizontal navigation bar

From: Web Accessibility Principles

Video: 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.

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 button at the bottom of the panel, choose advanced as the selector type.

In the selector field, highlight over the default text that is shown and delete it then type #mainNAV UL. This selector targets the UL element that is within our mainNAV DIV. Keep this document only selected for the define in option and then click okay. The CSS rule definition dialogue box opens. Here we're just going to remove default list styling so click on the box category in the left side of the dialogue box.

Leave the same for all box under padding checked and enter zero in the top field. Under margin, leave the same for all box checked as well and again, enter zero in the top field. Next, click on the list category of the dialogue box, choose the Type menu and scroll down to the bottom and choose none. This removes any bullets that might appear on the list. Now click okay. Next, we need to make the list items stop stacking on top of each other and instead sit side by side.

We're currently using the float property on the sidebar of the page. It moves it off to the left and allows other content to sit beside it on the right. If we float every single list item, they will all line up together on a single line instead of tacking one on top of another. Click on the new CSS rule button at the bottom of the CSS styles panel. In the new CSS rule dialogue box, leave advanced checked as the selector type. In the selector field, delete the default text that is shown and type #mainNAV LI.

This selector targets all of the list items within the mainNAV DIV. Leave this document only selected and click okay. As with the UL element, we first want to remove the default list styling, so click on the box category. Leave both the same for all boxes checked under padding and margin and in both of the top boxes, enter zero. Above the margin section of the screen, you can see a Float menu.

Click on the arrow of that menu and you'll see that you options are left, right and none. Choose left. Next, let's remove the flower bullet background image from these LI's and add a new background image for them in the NAV bar. So click on the background category of the dialogue box then click on the browse button beside the background image field. In the select image source dialogue box, browse to the location of the exercise files on your computer, choose the chapter five folder and the exercise files then click on the 05_02 folder then click on the images folder.

Choose the image named mainNAV_divider.jpg then click okay. In the Repeat menu, back in the CSS rule definition dialogue box, choose no repeat. This background image is simply a divider line and we only want it to show one time on each list item. In the Horizontal Position menu, choose right and in the Vertical Position menu, choose top. This will position the divider line background image on the right side of every list item text.

Now click okay. You can see that now the list items are appearing side by side, but the dark brown background on the mainNAV DIV has disappeared. This is because floats are removed from the flow of the document, meaning other content around them essentially doesn't know they exist. With the list items floated, it's as if no content now exists inside the mainNAV DIV, so this DIV collapses to zero height. To fix this, we need to add an element to the bottom of the DIV below the floated list items that is set to clear the floats.

This will make the mainNAV DIV expand down to contain this item. Dreamweaver pre-made layouts comes with a class named clear float that is already available to use for this purpose. Let's go into code view. So click on the code button in the document toolbar. We're taken to a spot in the code showing a mainNAV DIV. Immediately above it in the code is the header DIV. Inside the header DIV is a
for line break that has a class of clear float set on it.
Highlight over this break element and go to the Edit menu and select copy then place your cursor after the tag in the mainNAV DIV and hit enter or return to go to a new line.

On that new line, again go to the Edit menu and select paste. Since this break element is not floated, the mainNAV DIV now has some content within it that it can expand to contain and show the background below the floated list items. Click the design button on the document tool bar to go back to design view. You can see that the background has now returned. Next, let's add the styles to the links inside the list. Click on the new CSS rule button at the bottom of the CSS styles panel. Leave advanced selected as the selector type.

In the selector field, delete the default text that is shown and type #mainNAV A. This selects all of the A elements or the links inside of the mainNAV DIV. Leave this document only selected for the define in option and click okay. We want these links to not act like regular text links but more like buttons. So we want a large area around the text to be clickable, not just the text itself. To do this, we can change the A elements from being inline elements to block elements.

Block elements are things like DIVs, paragraphs and lists where every item starts on a new line and stacks one on top of each other. Inline elements are things like the A tag, the M tag, the strong tag, where the element sits in the same line with other elements. Click on the block category in the dialogue box. The last option on the screen is a display menu. Click on the arrow next to that menu and choose block, the third item down. Next, let's expand the space around each of the A elements to expand the clickable area of each.

So click on the box category in the dialogue box, uncheck the same for all box under padding, in the top box type six, leave pixels selected as the unit of measurement. Also type six into the bottom field under padding. This adds six pixels of space on top and below each A element. In the right field enter 16. leave pixels selected. And then in the left field enter the same value of 16 pixels. Next, we want to get rid of the default blue link color and their default underlines.

Click back on the type category of the dialogue box. Click on the color picker next to the color field and select white. There are five checkboxes shown for setting the decoration type of the element. Click on none. This removes the default underline of the links. Click on okay. The links are nicely padded and spaced out from each other. The finishing touch that we're going to add is a rollover effect on the links. We can use the hover pseudo class in CSS to make the link's background color change when the mouse passes over it.

In order to make the effect happen for keyboard users when they tab to the link, we'll also add the focus pseudo class. The focus state of a link is basically when it is selected and when you tab to a link you're giving it focus. Click on the new CSS rule button at the bottom of the CSS styles panel. Leave advanced selected as the selector type and delete the default text shown in the selector field, type #mainNAV A:hover. Since we want to set the same styles for focus, we can group that selector with this selector by inserting , #mainNAV A:focus.

Finally, in order to make this rollover work in Internet Explorer, we'll add one more selector to this group. Type , #mainNAV A:active. Internet Explorer doesn't use the same pseudo class of focus that the other browsers do, but instead uses a pseudo class of active.

Setting all three of these pseudo classes at once covers all of our bases. Click okay to bring up the CSS rule definition dialogue box. All that we're going to do on rollover is change the background color, so click on the background category. Place your cursor inside the background color box and type #4F3B18. This is simply a lighter shade of the brown that's currently being used on the NAV bar.

click okay to accept the rule. We're not going to see the rollover effect until we look in a browser, so let's go ahead and preview in Firefox now. Click on the globe icon in the document tool bar and choose preview in Firefox. When asked to save the changes to the page, click yes. You can see that we now have what looks like a standard NAV bar. if we hover over the links you can see that the background color of each changes.

Let's also try tabbing to the links. Simply hit the tab key on your keyboard. This will take you to the first link on the page, in this case, home. It adds a dotted outline around the link, the default style for focus, and also a brown background. Continue to hit the tab key and you can see how you continue to move through the links. To activate any of these links, you would simply press the enter key on your keyboard. Close the Firefox page now. Let's also check the page in Internet Explorer 7 to make sure it's working there as well.

Click on the globe icon in the document tool bar back in Dreamweaver and choose preview in IExplore. In Internet Explorer 7, the background is not showing in the NAV bar. this makes the links almost invisible until we mouse or tab over them, so we definitely want to fix this issue. Close the Internet Explorer window and return to Dreamweaver. Internet Explorer has a proprietary CSS property called has layout. Frequently CSS rules will not work until has layout has been set as well.

The way we can set has layout is by setting a width or another dimension on our DIV. in the CSS styles panel, select the mainNAV rule. If you scroll down within the properties pane, you'll see that we're not currently setting any dimension on this element. On the bottom of the pane is the add property link. Click on this. Type in width. Then click on the box next to this field, type 100, and in the unit of measurement menu next to this field, select percent. This won't change the appearance of the DIV in any other browsers since all DIVs are 100 percent wide by default, but it should fix the problem in Internet Explorer.

Let's preview again to make sure. Click on the globe icon in the document toolbar and choose preview in IExplore. Click yes to save changes to the page. Now when the page is brought up, you can see that the background is there. the same rollover effect also works. So we've seen that we can use CSS to take a simple list and turn it into a horizontal navigation bar with rollover effects. Next we'll learn how to style a list to look like another type of common layout element, the Vertical menu.

Show transcript

This video is part of

Image for Web Accessibility Principles
Web Accessibility Principles

68 video lessons · 25795 viewers

Zoe Gillenwater
Author

 
Expand all | Collapse all
  1. 2m 0s
    1. Welcome
      1m 3s
    2. Using the exercise files
      57s
  2. 33m 15s
    1. What does accessibility mean?
      5m 51s
    2. How does accessibility help your users?
      3m 30s
    3. Experiencing a website via a screen reader
      5m 46s
    4. How does accessibility help you and your clients?
      3m 9s
    5. Overview of Section 508 standards
      5m 51s
    6. Overview of WCAG standards
      6m 4s
    7. Understanding consistency and semantic markup
      3m 4s
  3. 54m 31s
    1. Understanding screen readers and accessibility tools
      6m 12s
    2. Getting accessible browsers
      5m 41s
    3. Customizing Firefox for accessibility testing
      5m 53s
    4. Using custom accessibility toolbars
      5m 28s
    5. Using Fangs and the Color Contrast Analyzer
      5m 30s
    6. Accessibility tools to bookmark
      5m 53s
    7. Using automated accessibility checking tools
      4m 57s
    8. Setting up the JAWS screen reader on Windows
      6m 42s
    9. Using the VoiceOver screen reader on Mac OS X
      5m 52s
    10. Setting Dreamweaver accessibility preferences
      2m 23s
  4. 26m 12s
    1. Avoiding tables for layout
      3m 30s
    2. Using CSS for layout
      2m 40s
    3. Creating a fixed-width layout
      5m 51s
    4. Creating an elastic layout
      3m 51s
    5. Creating a liquid layout
      3m 4s
    6. Customizing a liquid layout
      7m 16s
  5. 1h 6m
    1. Specifying the language
      3m 43s
    2. Setting page titles
      2m 16s
    3. Setting headings and paragraphs
      9m 55s
    4. Styling headings
      9m 56s
    5. Hiding section headings from sighted users
      6m 41s
    6. Styling text for readability
      6m 41s
    7. Ensuring proper color contrast
      6m 36s
    8. Creating text emphasis
      4m 29s
    9. Indicating quotations
      4m 29s
    10. Creating basic lists
      4m 16s
    11. Styling lists
      7m 15s
  6. 1h 15m
    1. Using lists for navigation
      6m 45s
    2. Creating a horizontal navigation bar
      13m 25s
    3. Creating a vertical navigation bar
      11m 44s
    4. Adding skip navigation links
      12m 0s
    5. Hiding skip navigation links
      6m 17s
    6. Proper link text and title attributes
      6m 11s
    7. Opening new windows
      4m 28s
    8. Accessibility limitations of fly-out menus
      6m 30s
    9. Creating an accessible fly-out menu
      8m 38s
  7. 27m 55s
    1. Proper ALT text for navigation images
      4m 57s
    2. Proper ALT text for decorative images
      5m 19s
    3. Adding ALT text to an existing site
      6m 9s
    4. Adding ALT text to image maps
      5m 58s
    5. Describing complex graphics
      5m 32s
  8. 34m 1s
    1. Using tables for data
      3m 0s
    2. Creating header cells
      4m 5s
    3. Adding table captions and summaries
      9m 9s
    4. Styling tables
      5m 19s
    5. Applying header cells to complex tables
      6m 52s
    6. Adding id and headers attributes
      5m 36s
  9. 42m 7s
    1. Understanding form accessibility issues
      3m 7s
    2. Labeling form fields
      6m 9s
    3. Adding fieldsets and legends
      4m 42s
    4. Moving forms out of tables
      3m 44s
    5. Cleaning up a form's appearance
      4m 53s
    6. Aligning labels and fields using CSS
      9m 39s
    7. Indicating required fields
      6m 15s
    8. Dealing with CAPTCHA
      3m 38s
  10. 7m 29s
    1. The Text-Only technique
      3m 21s
    2. The Access Keys technique
      2m 35s
    3. The Tab Index technique
      1m 33s
  11. 18s
    1. Goodbye
      18s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Web Accessibility Principles.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.