Slide 25 - Lists that don't look like lists § Session 04

Lists that don't look like lists

list

Key points:

remove list styling
change from "block" to "inline" display

ul { list-style: none; }
li { display: inline; }

list-style: none

Example 4.29 - list-style: none; - Example 4.29 (Without Styles)

Markup
Style
Screenshot


 <ul id="extglobalnav">
   <li>About
   </li>
   <li>Calendar
   </li>
   <li>Courses
   </li>
   <li>Contact Us
   </li>
   <li>Faculty Directory
   </li>
   <li>Login
   </li> </ul>

In style element (<style>) within head element:

ul#extglobalnav {
  list-style: none;
}

list

li {display: inline;}

Example 4.30 - list-style: none; - Example 4.30 (Without Styles)

Markup
Style
Screenshot


 <ul id="extglobalnav">
   <li>About
   </li>
   <li>Calendar
   </li>
   <li>Courses
   </li>
   <li>Contact Us
   </li>
   <li>Faculty Directory
   </li>
   <li>Login
   </li> </ul>

In style element (<style>) within head element:

ul#extglobalnav {
  list-style: none;
  padding-left: 0;
}
ul#extglobalnav li {
  display: inline;
  padding-left: 2em;
}

list