Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CC
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Horizontal Navigation Bar

  • We will now convert this vertical bulleted list into a horizontal navigation bar using CSS with no bullets using CSS
  • The <ul> adds an indentation to the list, adds spacing surrounding the list and allows the li to add a bullet
  • Add an internal style rule for the ul tag
    • Set margin and padding properties to 0 to eliminate extra space surrounding the list
    • Set the list-style-type property to none to remove the bullets
  • Add an internal style rule for the li tag
    • Set display property in the Layout area to inline to place the list horizontally
    • Set padding-right to 30 px
    • Set text-transform to Capitalize to capitalize each word in the nav bar

Horizontal Navigation Bar

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • CSS Designer 0:49
    • Define in Page
    • <ul> Versus <li>
    • Set Margin and Padding
    • Assigning Values
  • List Style Type 5:08
    • Layout
    • Display
    • Inline
    • Adjusting Padding
    • Text Transform
  • Overview 8:38