Lesson 11

Using CSS to Do More with Lists, Text, and Navigation

What You’ll Learn in This Lesson:

  • Image How the CSS box model affects lists

  • Image How to customize the list item indicator

  • Image How to use list items and CSS to create an image map

  • Image How navigation lists differ from regular lists

  • Image How to create vertical navigation with CSS

  • Image How to create horizontal navigation with CSS

In Lesson 6, “Working with Fonts, Text Blocks, Lists, and Tables,” you were introduced to three types of HTML lists, and in Lesson 9, “Working with Margins, Padding, Alignment, and Floating,” you learned about margins, padding, and alignment of elements. In this lesson, you will learn how margins, padding, and alignment styles can be applied to different types of HTML lists, which will help you produce some powerful design elements purely in HTML and CSS.

Specifically, you will learn how to modify the appearance of list elements—beyond the use of the list-style-type property that you learned in Lesson 6—and how to use a CSS-styled list to replace the client-side image maps you learned about in Lesson 8, “Working with Colors, Images, and Multimedia.” You will put into practice many of the CSS styles you’ve learned thus far, and the knowledge you will gain in this lesson will lead directly into using lists for more than just simply presenting a bulleted or numbered set of items. You will learn a few of the many ways to use lists for vertical or horizontal navigation, including how to use lists to create drop-down menus.

The methods explained in this lesson represent a very small subset of the numerous and varied navigation methods you can create using lists. However, the concepts are all similar; different results come from your own creativity and application of these basic concepts. To help you get your creative juices flowing, we will provide pointers to other examples of CSS-based navigation at the end of this lesson.

HTML List Refresher

As you learned in Lesson 6, there are three basic types of HTML lists. Each presents content in a slightly different way, based on its type and the context:

  • Image Ordered list—This type of list is an indented list that displays numbers or letters before each list item. An ordered list is surrounded by <ol> and </ol> tags, and list items are enclosed in the <li></li> tag pair. This list type is often used to display numbered steps or levels of content.

  • Image Unordered list—This type of list is an indented list that displays a bullet or another symbol before each list item. An unordered list is surrounded by <ul> and </ul> tags, and list items are enclosed in the <li></li> tag pair. This list type is often used to provide a visual cue that brief, yet specific, bits of information will follow.

  • Image Definition list—This type of list is often used to display terms and their meanings, thereby providing information hierarchy within the context of the list itself—much like an ordered list but without the numbering. A definition list is surrounded by <dl> and </dl> tags, with <dt> and </dt> tags enclosing the term and <dd> and </dd> tags enclosing the definitions.

When the content warrants it, you can nest your ordered and unordered lists—or place lists within other lists. Nested lists produce a content hierarchy, so reserve their use for when your content actually has a hierarchy you want to display (such as content outlines or tables of contents). Or, as you will learn later in this lesson, you can use nested lists when your site navigation contains sub-navigational elements.

How the CSS Box Model Affects Lists

Specific list-related styles include list-style-image (for placement of an image as a list-item marker), list-style-position (indicating where to place the list-item marker), and list-style-type (the type of list-item marker itself). But while these styles control the structure of the list and list items, you can use margin, padding, color, and background-color styles to achieve even more specific displays with your lists.

Note

Some older browsers handle margins and padding differently, especially around lists and list items. However, at the time of writing, the HTML and CSS in this and other lessons in this course are displayed identically in current versions of the major web browsers (Apple Safari, Google Chrome, Microsoft Edge, Mozilla Firefox, and Opera). Of course, you should still review your web content in all browsers before you publish it online, but the need for “hacking” style sheets to accommodate the rendering idiosyncrasies of browsers is effectively a thing of the past.

In Lesson 9, you learned that every element has some padding between the content and the border of the element; you also learned there is a margin between the border of the element and any other content. This is true for lists, and when you are styling lists, you must remember that a “list” is actually made up of two elements: the parent list element type (<ul> or <ol>) and the individual list items themselves. Each of these elements has margins and padding that can be affected by a style sheet.

The examples in this lesson show you how different CSS styles affect the visual display of HTML lists and list items. Keep these basic differences in mind as you practice working with lists in this lesson, and you will be able to use lists to achieve advanced visual effects in site navigation.

Listing 11.1 creates a basic list containing three items. In this listing, the unordered list itself (the <ul>) is given a blue background, a black border, and a specific width of 100 pixels, as shown in Figure 11.1. The list items (the individual <li> items) have a gray background and a yellow border. The list item text and indicators (the bullet) are black.

Listing 11.1 Creating a Basic List with Color and Border Styles

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>List Test</title>
    <style>
      ul {
        background-color: #6666ff;
        border: 1px solid #000000;
        width: 100px;
      }
      li {
        background-color: #cccccc;
        border: 1px solid #ffff00;
      }
    </style>
  </head>
  <body>
    <h1>List Test</h1>
    <ul>
      <li>Item #1</li>
      <li>Item #2</li>
      <li>Item #3</li>
    </ul>
  </body>
</html>

The list_styles.html shows three list items under the heading "List Test." The items are displayed inside a box, with a background color for the bullets and a different color/highlight for the items.
Figure 11.1 Styling the list and list items with colors and borders.

As Figure 11.1 shows, the <ul> creates a box in which the individual list items are placed. In this example, the entirety of the box has a blue background (background-color: #6666ff;). But also note that the individual list items—in this example, they use a gray background (background-color: #cccccc;) and a yellow border (border: 1px solid #000000;)—do not extend to the left edge of the box created by the <ul>.

This is because browsers automatically add a certain amount of padding to the left side of the <ul>. Browsers don’t add padding to the margin, because that would appear around the outside of the box. They add padding inside the box and only on the left side. That padding value is approximately 40 pixels.

Note

You can test the default padding-left value as displayed by different browsers by creating a simple test file such as the one shown in Listing 11.1 and then adding padding-left: 40px; to the declaration for the ul selector in the style sheet. If you reload the page and the display does not change, you know that your test browser uses 40 pixels as a default value for padding-left.

The default left-side padding value remains the same, regardless of the type of list and regardless of what box model you use (see box-sizing in Lesson 10, “Understanding the CSS Box Model and Positioning”). If you add the following line to the style sheet, creating a list with no item indicators, you will find that the padding remains the same (see Figure 11.2):

list-style-type: none;

In the figure, the list_styles.html shows the three items displayed inside a box under the List Test heading. The left padding remains the same as before, but the  list items appear without bullets.
Figure 11.2 The default left-side padding remains the same with or without list item indicators.

When you are creating a page layout that includes lists of any type, play around with padding to place the items “just so” on the page. Similarly, just because no default margin is associated with lists doesn’t mean you can’t assign some to the display; adding margin values to the declaration for the ul selector provides additional layout control.

But remember that so far, we’ve worked with only the list definition itself; we haven’t worked with the application of styles to the individual list items. In Figures 11.1 and 11.2, the gray background and yellow border of the list item show no default padding or margin. Figure 11.3 shows the different effects created by applying padding or margin values to list items rather than the overall list “box” itself.

A screenshot of the list_styles2.html page shows how the list items appear when the padding value of each item is changed. The items still appear inside the box. However, the padding and margin orientation is altered for each item, and the successive items of the list are indented more than the preceding item.
Figure 11.3 Different values affect the padding and margins on list items.

The first list item is the base item, with no padding or margin applied to it. The second list item uses a class called padded, defined in the style sheet as padding: 6px;, and you can see the 6 pixels of padding on all sides (between the content and the yellow border surrounding the element). Note that the placement of the bullet remains the same as the placement of the first list item. The third list item uses a class called margined, defined in the style sheet as margin: 6px;, to apply 6 pixels of margin around the list item; this margin allows the blue background of the <ul> to show through.

Placing List Item Indicators

All this talk of margins and padding raises another issue: the control of list item indicators (when used) and how text should wrap around them (or not). The default value of the list-style-position property is outside. This placement means that the bullets, numbers, and other indicators are kept to the left of the text, outside the box created by the <li></li> tag pair. When text wraps within the list item, it wraps within that box and remains flush left with the left border of the element.

But when the value of list-style-position is inside, the indicators are inside the box created by the <li></li> tag pair. Not only are the list item indicators then indented further (they essentially become part of the text), the text wraps beneath each item indicator.

Figure 11.4 shows an example of both outside and inside list style positions. The only changes between Listing 11.1 and the code used to produce the example in Figure 11.4 (not including the filler text added to Item #2 and Item #3) is that the second list item uses a class called outside, defined in the style sheet as list-style-position: outside;, and the third list item uses a class called inside, defined in the style sheet as list-style-position: inside;.

Outside versus inside list style.
Figure 11.4 The difference between outside and inside values for list-style-position.

The additional filler text used for the second list item shows how the text wraps when the width of the list is defined as a value that is too narrow to display all on one line. You could achieve the same result without using list-style-position: outside; because that is the default value of list-style-position without any explicit statement in the code.

However, you can clearly see the difference when the inside position is used. In the third list item, the bullet and the text are both within the gray area bordered by yellow—the list item itself. Margins and padding affect list items differently when the value of list-style-position is inside (see Figure 11.5).

Effects of different margin and padding values on two list items.
Figure 11.5 Margins and padding change the display of items using the inside value for list-style-position.

In Figure 11.5, the second and third list items both have a list-style-position value of inside. However, the second list item has a margin-left value of 12 pixels (12px), and the third list item has a padding-left value of 12 pixels. Although both content blocks (list indicator plus the text) show text wrapped around the bullet, and the placement of these blocks within the gray area defining the list item is the same, the affected area is the list item within the list itself.

As you would expect, the list item with the margin-left value of 12 pixels displays 12 pixels of blue showing through the transparent margin surrounding the list item. Similarly, the list item with the padding-left value of 12 pixels displays 12 pixels of gray background (of the list item) before the content begins. Padding is within the element; the margin is outside the element.

By understanding the way margins and padding affect both list items and the list in which they appear, you can create navigation elements in your website that are pure CSS and do not rely on external images. Later in this lesson, you’ll learn how to create both vertical and horizontal navigation menus, as well as menu drop-downs.

Note

Remember that you can always use background colors when you’re testing your designs to remind yourself which margins and paddings affect what inside lists. Once you’ve got the settings correct, remove the background colors or change them to fit your design.

Creating Image Maps with List Items and CSS

In Lesson 8 you learned how to create client-side image maps using the <map> element in HTML. Image maps enable you to define an area of an image and assign a link to that area (rather than having to slice an image into pieces, apply links to individual pieces, and stitch the image back together in HTML). However, you can also create an image map purely out of valid HTML and CSS.

The code in Listing 11.2 produces the image map that Figure 11.6 shows. When the code is rendered in a web browser, it simply looks like a web page with an image placed in it. The actions happen when your mouse hovers over a “hot” area, as you can see in Figure 11.6: The thick, dashed yellow border and image alt text show the area the mouse is hovering over, and in the lower left of the browser window, you can see the URL assigned to that hotspot.

Listing 11.2 Creating an Image Map Using CSS

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS Image Map Example</title>
    <style>
    #theImg {
       width: 400px;
       height: 500px;
       background: url(pets-collage.jpg) no-repeat;
       position: relative;
       border: 1px solid #000000;
       margin: 0 auto;
    }
    #theImg ul {
       margin: 0px;
       padding: 0px;
       list-style: none;
    }
    #theImg a {
       position: absolute;
       text-indent: -1000em;
    }
    #theImg a:hover {
       border: 4px dashed #ffff00;
    }
    #mc a {
       top: 0px;
       left: 0px;
       width: 231px;
       height: 146px;
    }
    #su a {
       top: 0px;
       left: 236px;
       width: 164px;
       height: 250px;
    }
    #st a {
       top: 150px;
       left: 0px;
       width: 231px;
       height: 100px;
    }
    #di a {
       top: 255px;
       left: 0px;
       width: 160px;
       height: 245px;
    }
    #sh a {
       top: 255px;
       left: 165px;
       width: 235px;
       height: 110px;
    }
   #au a {
       top: 370px;
       left: 165px;
       width: 235px;
       height: 130px;
    }
    </style>
  </head>
  <body>
     <div id="theImg">
       <ul>
         <li id="mc"><a href="[some URL]"
             title="McKinley">McKinley</a></li>
         <li id="su"><a href="[some URL]"
             title="Suni">Suni</a></li>
         <li id="st"><a href="[some URL]"
             title="Stormageddon">Stormageddon</a></li>
         <li id="di"><a href="[some URL]"
             title="Diamond">Diamond</a></li>
         <li id="sh"><a href="[some URL]"
             title="Shasta">Shasta / Inara</a></li>
         <li id=”au”><a href=[some URL]
             title=”Auto”>Suni / Auto</a></li>
       </ul>
     </div>
  </body>
</html>

The mypets.html page (displayed in Firefox) shows the photographs of a few cats and dogs. Here, a dashed borderline is present over the photo of a specific cat. Hovering the mouse pointer over the photograph displays the text "Diamond" (the cat’s name).
Figure 11.6 CSS enables you to define hotspots in an image map.

As Listing 11.2 shows, the style sheet has quite a few entries, but the actual HTML is quite short. List items are used to create several distinct clickable areas; those “areas” are list items that are assigned a specific height and width and then placed over an image that sits in the background. If the image is removed from the background of the <div> that surrounds the list, the list items still exist and are still clickable.

Let’s walk through the style sheet so that you understand the pieces that make up this HTML and CSS image map, which is—at its most basic level—just a list of links.

The list of links is enclosed in a <div> named theImg. In the style sheet, this <div> is defined as a block element that is 400 pixels wide and 500 pixels high, with a 1-pixel solid black border. The background of this element is an image named pets-collage.jpg that is placed in one position and does not repeat (background: url (‘pets-collage.jpg’) no-repeat;). The next bit of HTML that you see is the beginning of the unordered list (<ul>). In the style sheet, this unordered list is given margin and padding values of 0 pixels all around and a list-style of none—list items will not be preceded by any icon.

The list item text itself never appears to the user because of this trick in the style sheet entry for all <a> tags within the <div>:

text-indent: -1000em;

By indenting the text negative 1,000 ems, you can be assured that the text will never appear. It does exist, but it exists in a nonviewable area 1,000 ems to the left of the browser window. In other words, if you raise your left hand and place it to the side of your computer monitor, text-indent:-1000em; places the text somewhere to the left of your pinky finger. But that’s what we want because we don’t need to see the text link. We just need an area to be defined as a link so that the user’s cursor changes as it does when rolling over any link in a website.

When the user’s cursor hovers over a list item containing a link, that list item shows a 4-pixel border that is dashed and yellow, thanks to this entry in the style sheet:

#theImg a:hover {
   border: 4px dashed #ffff00;
}

The list items themselves are then defined and placed in specific positions based on the areas of the image that are supposed to be the clickable areas. For example, the list item with the di ID, for Diamond—the name of the item shown in the figure—has its top-left corner placed 255 pixels from the top of the <div> and 0 pixels in from the left edge of the <div>. This list item is 160 pixels wide and 245 pixels high. Similar style declarations are made for the #mc, #su, #st, #sh, and #au list items so that the linked areas associated with those IDs appear in certain positions relative to the image.

How Navigation Lists Differ from Regular Lists

When we talk about using lists to create navigation elements, we really mean using CSS to display content in the way website visitors expect navigation to look—in short, different from simple bulleted or numbered lists. Although it is true that a set of navigation elements is essentially a list of links, those links are typically displayed in a way that makes it clear that users should interact with the content:

  • Image The user’s mouse cursor will change to indicate that the element is clickable.

  • Image The area around the element changes appearance when the mouse hovers over it.

  • Image The content area is visually set apart from regular text.

Older methods of creating navigation tended to rely on images—such as graphics with beveled edges and the use of contrasting colors for backgrounds and text—plus client-side programming with JavaScript to handle image swapping based on mouse actions. But using pure CSS to create navigation from list elements produces a more usable, flexible, and search engine–friendly display that is accessible by users using all manner and sorts of devices.

Regardless of the layout of your navigational elements—horizontal or vertical—this lesson discusses two levels of navigation: primary and secondary. Primary navigation takes users to the introductory pages of main sections of the site; secondary navigation takes users to pages within a certain section of the site.

Creating Vertical Navigation with CSS

Depending on your site architecture—both the display template you have created and the manner in which you have categorized the information in the site—you might find yourself using vertical navigation for either primary navigation or secondary navigation.

For example, suppose you have created a website for your company and the primary sections are About Us, Products, Support, and Press. Within the primary About Us section, you might have several other pages, such as Mission, History, Executive Team, and Contact Us; these other pages are the secondary navigation within the primary About Us section.

Listing 11.3 sets up a basic secondary page with vertical navigation on the side of the page and content in the middle of the page. The links in the side and the links in the content area of the page are basic HTML list elements.

Listing 11.3 and the example shown in Figure 11.7 provide a starting point for showing how CSS enables you to transform two similar HTML structures into two different visual displays (and thus two different contexts).

Listing 11.3 Basic Page with Vertical Navigation in a List

<!doctype html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>About Us</title>
      <style>
        body {
           font: 12pt Verdana, Arial, Georgia, sans-serif;
        }
        nav {
           width: 150px;
           float: left;
           margin-top: 12px;
           margin-right: 18px;
        }
        section {
           width: 550px;
           float: left;
        }
      </style>
    </head>
   
    <body>
      <nav>
        <ul>
          <li><a href="#">Mission</a></li>
          <li><a href="#">History</a></li>
          <li><a href="#">Executive Team</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </nav>
      <section>
        <header>
          <h1>About Us</h1>
        </header>
        <p>On the introductory pages of main sections, it can be useful
        to repeat the secondary navigation and provide more context,
        such as:</p>
        <ul>
          <li><a href="#">Mission</a>: Learn more about our corporate
          mission and philanthropic efforts.</li>
          <li><a href="#">History</a>: Read about our corporate history
          and learn how we grew to become the largest widget maker
          in the country.</li>
          <li><a href="#">Executive Team</a>: Our team of executives makes
          the company run like a well-oiled machine (also useful for
          making widgets).</li>
          <li><a href="#">Contact Us</a>: Here you can find multiple
          methods for contacting us (and we really do care what you
          have to say).</li>
        </ul>
    </section>
  </body>
</html>

Using vertical navigation.
Figure 11.7 The starting point: an unstyled list navigation.

The contents of this page are set up in two sections: a <nav> element containing navigation and a single <section> element containing the primary text of the page. The only styles assigned to anything in this basic page are the width, margin, and float values associated with each element. No styles have been applied to the list elements.

To differentiate between the links present in the list in the content area and the links present in the list in the side navigation, add the following styles to the style sheet:

nav a {
   text-decoration: none;
}
section a {
   text-decoration: none;
   font-weight: bold;
}

These styles simply say that all <a> links in the <nav> have no underline, and all <a> links in the <section> have no underline and are bold. Figure 11.8 shows the difference.

In the screenshot, the "About Us" section shows its content laid out in vertical navigation style. The links, however, are not underlined in the main body, and appear in bold text.
Figure 11.8 Differentiating the list elements using CSS.

But to really make the side navigation list look like something special, you have to dig deeper into the style sheet.

Styling the Single-Level Vertical Navigation

The goal with this particular set of navigation elements is simply to present them as a block of links without bullets and with background and text colors that change depending on their link state (regular link, visited link, hovering over the link, or activated link—covered in Lesson 7, “Using External and Internal Links”). The first step in the process is already complete: separating the navigation from the content. We’ve done that by putting the navigation in a <nav> element.

Next, we need to modify the <ul> that defines the link within the <nav> element. Let’s take away the list indicator and ensure that there is no extra margin or padding hanging around besides the top margin. That top margin is used to line up the top of the navigation with the top of the “About Us” header text in the content area of the page:

nav ul {
   list-style: none;
   margin: 12px 0px 0px 0px;;
   padding: 0px;
}

Because the navigation list items themselves will appear as colored areas, we give each list item a bottom border so that some visual separation of the content can occur:

nav li {
   border-bottom: 1px solid #ffffff;
}

Now on to building the rest of the list items. The idea is that when the list items simply sit there acting as links, they are a special shade of blue with bold white text (although they are a smaller font size than the body text itself). To achieve that effect, we add the following:

nav li a:link, nav li a:visited {
   font-size: 10pt;
   font-weight: bold;
   display: block;
   padding: 3px 0px 3px 3px;
   background-color: #628794;
   color: #ffffff;
}

All the styles used previously should be familiar to you, except perhaps for display: block; in the style sheet entry. Setting the display property to block ensures that the entire <li> element is in play when a user hovers a mouse over it. Figure 11.9 shows the vertical list menu with these new styles applied to it.

The vertical list, that appears on the left side of the screen for navigation, now appears highlighted with background colors filling each list item.
Figure 11.9 The vertical list is starting to look like a navigation menu.

When the user’s mouse hovers over a navigational list element, the idea is for some visual change to take place so that the user knows that the element is clickable. This is akin to how most software menus change color when a user’s cursor hovers over the menu items. In this case, we’ll change the background color of the list item and change the text color of the list item so that they are different from the blue and white shown previously:

nav li a:hover, nav li a:active {
   font-size: 10pt;
   font-weight: bold;
   display: block;
   padding: 3px 0px 3px 3px;
   background-color: #c1a02e;
   color: #000000;
}

Figure 11.10 shows the results of all the stylistic work so far. A few entries in a style sheet have transformed the simple list into a visually differentiated menu.

The list items on the left side appear highlighted with a background color for each. The item "History" gets highlighted in a different color when the mouse pointer is hovered over it.
Figure 11.10 The list items now change color when the mouse hovers over them.

Styling the Multilevel Vertical Navigation

What if the site architecture calls for another level of navigation that we want users to see at all times? That is represented by nested lists (which you learned about in previous lessons) and more style sheet entries. In this case, assume that there are four navigation elements under the Executive Team link. In the HTML, modify the list as shown here:

<ul>
  <li><a href="#">Mission</a></li>
  <li><a href="#">History</a></li>
  <li><a href="#">Executive Team</a>
     <ul>
     <li><a href="#">&raquo; CEO</a>
     <li><a href="#">&raquo; CFO</a>
     <li><a href="#">&raquo; COO</a>
     <li><a href="#">&raquo; Other Minions</a>
     </ul>
  </li>
  <li><a href="#">Contact Us</a></li>
</ul>

This code produces a nested list under the Executive Team link (see Figure 11.11). The &raquo; HTML entity produces the right-pointing arrows that are displayed before the text in the new links.

A screenshot shows the use of a nested navigation list. In this instance, four sub list items: CEO, CFO, COO, and Minions are present under the Executive Team list item on the left side of the web page. However, the hierarchy is not clearly represented.
Figure 11.11 Creating a nested navigation list (but one that is not yet styled well).

The new items appear as block elements within the list, but the hierarchy of information is not visually represented. To add some sort of visual element that identifies these items as sub-navigational elements attached to the Executive Team link, we modify the style sheet again to add some indentation.

But before doing that, we need to modify some of the other style sheet entries as well. In the preceding section, we added selectors such as nav ul and nav li, which indicate “all <ul> in the <nav> element” and “all <li> in the <nav> element,” respectively. However, we now have two instances of <ul> and another set of <li> elements within the <nav> element, all of which we want to appear different from the original set.

To ensure that both sets of list items are styled appropriately, make sure that the style sheet selectors clearly indicate the hierarchy of the lists. To do that, use entries such as nav ul and nav ul li for the first level of lists and use nav ul ul and nav ul ul li for the second level of lists. Listing 11.4 shows the new version of style sheet entries and the HTML that produces the menu shown in Figure 11.12.

Listing 11.4 Multilevel Vertical Navigation in a List

<!doctype html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>About Us</title>
      <style>
        body {
           font: 12pt Verdana, Arial, Georgia, sans-serif;
        }
        nav {
           width: 150px;
           float: left;
           margin-top: 12px;
           margin-right: 18px;
        }
        section {
           width: 550px;
           float: left;
        }
        nav a {
           text-decoration: none;
        }
        section a {
           text-decoration: none;
           font-weight: bold;
        }
        nav ul {
           list-style: none;
           margin: 12px 0px 0px 0px;
           padding: 0px;
        }
        nav ul li {
           border-bottom: 1px solid #ffffff;
        }
        nav ul li a:link, nav ul li a:visited {
           font-size: 10pt;
           font-weight: bold;
           display: block;
           padding: 3px 0px 3px 3px;
           background-color: #628794;
           color: #ffffff;
        }
        nav ul li a:hover, nav ul li a:active {
           font-size: 10pt;
           font-weight: bold;
           display: block;
           padding: 3px 0px 3px 3px;
           background-color: #c1a02e;
           color: #000000;
        }
        nav ul ul {
           margin: 0px;
           padding: 0px;
        }
        nav ul ul li {
           border-bottom: none;
        }
        nav ul ul li a:link, nav ul ul li a:visited {
           font-size: 8pt;
           font-weight: bold;
           display: block;
           padding: 3px 0px 3px 18px;
           background-color: #628794;
           color: #ffffff;
        }
        nav ul ul li a:hover, nav ul ul li a:active {
           font-size: 8pt;
           font-weight: bold;
           display: block;
           padding: 3px 0px 3px 18px;
           background-color: #c1a02e;
           color: #000000;
        }
      </style>
    </head>
    <body>
      <nav>
        <ul>
          <li><a href="#">Mission</a></li>
          <li><a href="#">History</a></li>
          <li><a href="#">Executive Team</a>
          <ul>
            <li><a href="#">&raquo; CEO</a></li>
            <li><a href="#">&raquo; CFO</a></li>
            <li><a href="#">&raquo; COO</a></li>
            <li><a href="#">&raquo; Other Minions</a></li>
          </ul></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </nav>
      <section>
        <header>
          <h1>About Us</h1>
        </header>
        <p>On the introductory pages of main sections, it can be useful
        to repeat the secondary navigation and provide more context,
        such as:</p>
        <ul>
          <li><a href="#">Mission</a>: Learn more about our corporate
          mission and philanthropic efforts.</li>
          <li><a href="#">History</a>: Read about our corporate history
          and learn how we grew to become the largest widget maker
          in the country.</li>
          <li><a href="#">Executive Team</a>: Our team of executives makes
          the company run like a well-oiled machine (also useful for
          making widgets).</li>
          <li><a href="#">Contact Us</a>: Here you can find multiple
          methods for contacting us (and we really do care what you
          have to say.)</li>
        </ul>
      </section>
  </body>
</html>

A proper nested navigation is used to nest the entries: CEO, CFO, COO, and Other Minions under the Executive Team list item. The sub list items are provided with a small indentation to indicate the hierarchy. Also, the current list item gets highlighted when the mouse pointer is hovered over it.
Figure 11.12 Creating two levels of vertical navigation using CSS.

The different ways of styling vertical navigation are limited only by your creativity. You can use colors, margins, padding, background images, and any other valid CSS to produce vertical navigation that is quite flexible and easily modified. If you type CSS vertical navigation in your search engine, you will find thousands of examples—and they are all based on the simple principles you’ve learned in this lesson.

Creating Horizontal Navigation with CSS

The lessons on navigation began with vertical navigation because the concept of converting a list into navigation is easier to grasp when the navigation still looks like a list of items that you might write vertically on a piece of paper, like a grocery list. When creating horizontal navigation, you still use HTML list elements, but instead of a vertical display achieved by using the inline value of the display property for both the <ul> and the <li> elements, use the block value of the display property. It really is as simple as that.

Listing 11.5 shows a starting point for a page featuring horizontal navigation. The page contains a <header> element for a logo and navigation and a <section> element for content. Within the <header> element, a <div> containing a logo is floated next to a <nav> element containing the navigational links. The list that appears in the <nav> element has a display property value of inline for both the list and the list items. You can see these elements and their placement in Figure 11.13.

Listing 11.5 Basic Horizontal Navigation from a List

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>ACME Widgets LLC</title>
    <style>
      body {
         font: 12pt Verdana, Arial, Georgia, sans-serif;
      }
      header {
         width: auto;
      }
      #logo {
         float: left;
      }
      nav {
         float: left;
      }
      nav ul {
         list-style: none;
         display: inline;
      }
      nav li {
         display: inline;
      }
      section {
         width: auto;
         float: left;
         clear: left;
      }
      section a {
         text-decoration: none;
         font-weight: bold;
      }
    </style>
  </head>
  <body>
    <header>
       <div id="logo">
          <img src="acmewidgets.jpg" alt="ACME Widgets LLC">
       </div>
       <nav>
          <ul>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Support</a></li>
            <li><a href="#">Press</a></li>
          </ul>
       </nav>
    </header>
    <section>
       <p><strong>ACME Widgets LLC</strong> is the greatest widget-maker
       in all the land.</p>
       <p>Don't believe us? Read on...</p>
       <ul>
         <li><a href="#">About Us</a>: We are pretty great.</li>
         <li><a href="#">Products</a>: Our products are the best.</li>
         <li><a href="#">Support</a>: It is unlikely you will need support,
         but we provide it anyway.</li>
         <li><a href="#">Press</a>: Read what others are saying (about how
         great we are).</li>
       </ul>
    </section>
  </body>
</html>

Horizontal navigation using inline list elements.
Figure 11.13 Creating functional—but not necessarily beautiful—horizontal navigation using inline list elements.(Credit: Kjpargeter/Shutterstock)

Modifying the display of this list occurs purely through CSS; the structure of the content within the HTML itself is already set. To achieve the desired display, use the following CSS:

nav {
   float:left;
   margin: 85px 0px 0px 0px;
   width: 400px;
   background-color: #628794;
   border: 1px solid black;
}

First, the <nav> element is modified to be a particular width, it displays a background color and border, and uses a top margin of 85 pixels (so that it displays near the bottom of the logo).

The definition for the <ul> remains the same as in Listing 11.5 except for the changes in margin and padding:

nav ul {
   margin: 0px;
   padding: 0px;
   list-style: none;
   display: inline;
}

The definition for the <li> remains the same as in Listing 11.5 except that it has been given a line-height value of 1.8em:

nav li {
   display: inline;
   line-height: 1.8em;
}

The link styles are similar to those used in the vertical navigation; these entries have different padding values, but the colors and font sizes remain the same:

nav ul li a:link, nav ul li a:visited {
   font-size: 10pt;
   font-weight: bold;
   text-decoration: none;
   padding: 7px 10px 7px 10px;
   background-color: #628794;
   color: #ffffff;
}
nav ul li a:hover, nav ul li a:active {
   font-size: 10pt;
   font-weight: bold;
   text-decoration: none;
   padding: 7px 10px 7px 10px;
   background-color: #c6a648;
   color: #000000;
}

Putting these styles together produces the display shown in Figure 11.14.

In the screenshot, the web page content of ACME Widgets LLC serves as an example of horizontal navigation in a list. The list items now appear below the cover image (but at the center) stacked side-by-side. The items have a single background color fill to them.
Figure 11.14 Creating horizontal navigation with some style. (Credit: Kjpargeter/Shutterstock)

When the user rolls over the navigation elements, the background and text colors change in the same way they did when the user hovered the mouse over the vertical navigation menu earlier in this lesson. Also, just as with the vertical navigation menu, you can use nested lists to produce drop-down functionality in your horizontal menu. Try it yourself!

Summary

This lesson began with examples of how lists and list elements are affected by padding and margin styles. You first learned about the default padding associated with lists and how to control that padding. Next, you learned how to modify padding and margin values and how to place the list item indicator either inside the list item or outside it, so you could begin to think about how styles and lists can affect your overall site design. Finally, you learned how to leverage lists and list elements to create a pure HTML and CSS image map, thus reducing the need for slicing up linked images or using the <map> element.

After learning to “think outside the (list) box,” if you will, you learned how to use unordered lists to produce horizontal or vertical navigation within your website. By using CSS instead of graphics, you have more flexibility in both the display and maintenance of your site. In this lesson, you learned that with a few entries in your style sheet, you can turn plain underlined text links into areas with borders and background colors and other text styles. In addition, you learned how to present nested lists within menus.

Q&A

Q. Creating CSS image maps seems like a lot of work. Is the <map> element so bad?

A. The <map> element isn’t at all bad, and it is valid HTML5. The determination of coordinates used in client-side image maps can be difficult, however, especially without graphics software or software intended for the creation of client-side image maps. The CSS version gives you more options for defining and displaying clickable areas, only one of which you’ve seen here.

Q. Can I use graphics in the navigation menus as a custom list indicator?

A. Yes. You can use graphics within the HTML text of the list item or as background images within the <li> element. You can style your navigation elements just as you style any other list element. The only differences between an HTML unordered list and a CSS-based horizontal or vertical navigation list is that you are calling it that, and you are using the unordered list for a specific purpose outside the body of the text. Also, you style the list to show the user that it is indeed something different—and you can do that with small graphics to accentuate your lists.

Q. Where can I find more examples of what I can do with lists?

A. The last time we checked, typing CSS navigation in a search engine returned approximately 88 million results. Here are a few starting places:

A List Apart’s CSS articles, at www.alistapart.com/topics/css/, Maxdesign’s CSS Listamatic, at http://css.maxdesign.com.au/listamatic/, and Vitaly Friedman’s CSS Showcase, at www.alvit.de/css-showcase/.

Workshop

The workshop contains quiz questions and activities to help you solidify your understanding of the material covered.

Quiz

1. What is the difference between the inside and outside values for list-style-position? Which is the default value?

2. Does a list-style with a value of none produce a structured list, either ordered or unordered?

3. When creating list-based navigation, how many levels of nested lists can you use?

4. When creating a navigation list of any type, can the pseudo-classes for the a selector have the same values?

5. What style do most browsers apply to <ul> and <ol> elements by default?

6. What is a good way to test the margins and paddings on lists?

7. How do you hide list contents when creating an image map from a list of links?

8. Where is the image in an image map that is built using a list?

9. In what way does a navigation list differ from a regular list?

10. What is the one thing you need to do to create a horizontal list?

Note

Just a reminder for those of you reading these words in the print or e-book edition of this book: If you go to www.informit.com/register and register this book (using ISBN 9780672338083), you can receive free access to an online Web Edition that not only contains the complete text of this book but also features an interactive version of this quiz.

Answers

1. The list-style-position value inside places the list item indicator inside the block created by the list item. The value outside places the list item indicator outside the block. With inside, content wraps beneath the list item indicator. The default value is outside.

2. Yes. The only difference is that no list item indicator is present before the content within the list item.

3. Technically, you can nest your lists as deeply as you want to. But from a usability standpoint, there is a limit to the number of levels that you would want to use to nest your lists. Three levels is typically the limit. More than that, and you run the risk of creating a poorly organized site or simply giving users more options than they need to see at all times.

4. Sure, but then you run the risk of users not realizing that your beautiful menus are indeed menus (because no visual display would occur for a mouse action).

5. Most browsers apply a left padding of 40 pixels to lists, written padding-left: 40px;.

6. Use CSS to color the background of the lists and list items.

7. Use text-indent:-1000em; to push the text off the screen to the left.

8. The image is a background on the list element itself.

9. A navigation list makes it clear that the users should interact with it by changing the cursor, changing the area around the element, and setting it apart from the regular content.

10. To create a horizontal list, set the display property to inline on the <ul> and <li> elements.

Exercises

  • Image Find an image and try your hand at mapping areas using the technique shown in this lesson. Select an image that has areas in which you could use hotspots or clickable areas leading to other web pages on your site or to someone else’s site. Then create the HTML and CSS to define the clickable areas and the URLs to which they should lead.

  • Image Using the techniques shown for a multilevel vertical list, add sub-navigation items to the vertical list created at the end of the lesson.

  • Image Look at the numerous examples of CSS-based navigation used in websites and find some tricky-looking actions. Using the View Source function of your web browser, look at the CSS used by these sites, and try to implement something similar for yourself.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
44.200.169.48