Tuesday 27 August 2013

Unordered, Ordered, & Definition Lists - Part 2

List Item Stylization

Unordered and ordered lists come with a list item element by default. For unordered lists this is typically a solid dot while ordered lists typically use numbers. Using CSS the content and position of this element may be adjusted.

List Style Type Property

The list style type, list-style-type, property may be used to set the content and style of a list item. The available values range from squares, decimal numbers, all the way to Armenian numbering. Any list style value can be added to either unordered or ordered lists. In this sense it is possible to number an unordered list and vice versa. Doing so is not recommended as it defeats the purpose of the chosen element and works against semantics.
A list style may be applied to an entire list or single list items, all depending on how the CSS is structured. It’s rare that a single list item would need to be stylized differently than the rest, however it is possible.

List Style Type Values

  • noneNo list item
  • discA filled circle
  • circleA hollow circle
  • squareA filled square
  • decimalDecimal numbers
  • decimal-leading-zeroDecimal numbers padded by initial zeros
  • lower-romanLowercase roman numerals
  • upper-romanUppercase roman numerals
  • lower-greekLowercase classical Greek
  • lower-alpha / lower-latinLowercase ASCII letters
  • upper-alpha / upper-latinUppercase ASCII letters
  • armenianTraditional Armenian numbering
  • georgianTraditional Georgian numbering
    

  1. ul {
    2. 

  2.   list-style-type: circle;
    3. 

  3. }
    4.

List Style Type Demo

  • iPad
  • iPhone
  • MacBook Air

Using an Image as a List Item

There may come a time when the default list style type values are not enough, or you simply want to customize your own list item element. Changing the list item element is completely possible. There are a few different ways to do so.
The original way is to use the list style image, list-style-image, property and pass it a URL value of an image to be used as the list item. While this works, it may not be considered the best solution. A better way to use an image as a list item would be to use a background image in combination with some padding.
Setting a background image on the list item element, removing any default list-style, and then adding in some padding on the left hand side provides a list item a new element style. Using a background image, as opposed to the list style image property, provides more control over positioning, allows the use of sprites, and offers other advantages.
    

  1. li {
    2. 

  2.   background: url('tick.png') 0 0 no-repeat;
    3. 

  3.   list-style: none;
    4. 

  4.   padding-left: 20px;
    5. 

  5. }
    6.

Using an Image as a List Item Demo

  • iPad
  • iPhone
  • MacBook Air

Using Characters as List Item Elements

For browsers that support the :before pseudo-element, the content property can be used to pass any HEX-escaped character encoding as the list item element. To start, the default list item element needs to be removed by setting the list-style property to none. Next, the :before pseudo-element needs to be used in conjunction with the content property. The value for the content property can be any HEX escaped character encoding. Lastly, a right margin is added to provide spacing between the character and the list item content.
Mark Newhouse wrote an article for A List Apart a while back outlining this technique as well as many other different ways of taming lists.
    

  1. li {
    2. 

  2.   list-style: none;
    3. 

  3. }
    4. 

  4. li:before {
    5. 

  5.   content: "\2708";
    6. 

  6.   margin-right: 6px;
    7. 

  7. }
    8.

Demo

  • iPad
  • iPhone
  • MacBook Air

List Style Position Property

By default the list item element is to the left of the content within the list element. This list style positioning is described asoutside, meaning that all of the content will appear directly to the right of the list item element. Using the list-style-position property we can change the default value of outside to inside or inherit.
The main difference between the outside and inside values is that the outside property places the list item element to the left of the list item and doesn’t allow any content to wrap around it. Using the inside value places the list item element inline with the first line of text of the list item and allows other lines of text to wrap below it as needed.
    

  1. ul {
    2. 

  2.   list-style-position: inside;
    3. 

  3. }
    4.

List Style Position Demo

  • iPad – iPad is a magical window where nothing comes between you and what you love. Now that experience is even more incredible with the new iPad.
  • iPhone – The faster dual-core A5 chip. The 8MP camera with all-new optics also shoots 1080p HD video. And introducing Siri. It’s the most amazing iPhone yet.
  • MacBook Air – The new MacBook Air is faster and more powerful than before, yet it’s still incredibly thin and light. It’s everything a notebook should be. And more.

Shorthand List Style Property

All of the list style properties discussed thus far can be combined into one short hand list-style property. In using the list-style property, you can pass one or all three list style values. The order of these values should be presented as list-style-type, list-style-position, and list-style-image.
    

  1. ul {
    2. 

  2.   list-style: circle inside;
    3. 

  3. }
    4. 

  4. ol {
    5. 

  5.   list-style: outside;
    6. 

  6. }
    7.

Horizontally Displaying List

Occasionally lists may need to be displayed horizontally rather than vertically. Perhaps you want to structure a list into multiple columns, build a navigational list, or simply have a few list items in a single row. Depending on the content and desired outcome, there are a few different ways to display lists as a single line, including inline display list items and floating list items.

Inline Display List

The quickest way to display a list within a single line is to set the list item to have a display property of inline. Doing so turns the list item into an inline level element rather than a default block level. Changing this display level allows the list items to stack up next to each other horizontally.
When changing the display value to inline, the list item element, bullet or number, is removed. Additionally, the list items will sit right next to each other with a single space between them. Ideally margins or padding should be added to better space these elements apart.
    

  1. li {
    2. 

  2.   display: inline;
    3. 

  3.   margin: 0 10px;
    4. 

  4. }
    5.

Inline Display List Demo

  • iPad
    •  
  • iPhone
    •  
  • MacBook Air

Floating List

Changing the display property to inline is quick, however it doesn’t provide much control over how to stylize the list items and removes the list item element. In the case where a list item element is needed, a specific width should be set. Or if greater control is desired, floating the list items will work better than changing the display property.
Setting the list item float property to left will stack all of the list items directly next to each other without any space in-between them. Additionally the list item element is still displayed by default. To clean up the list, and to prevent the list item element from being displayed on top of other list items, margins or padding need to be set.
Floating list items leave them as block level elements, allowing greater control over styling, however it also breaks the flow of the page. Always remember to clear the floats after the list to return the page back to its intended flow.
    

  1. li {
    2. 

  2.   float: left;
    3. 

  3.   margin: 0 20px;
    4. 

  4. }
    5.

Floating List Demo

  • iPad
  • iPhone
  • MacBook Air
at