HTML/CSS CH 15

to set all list-style properties at once

1 list-style: 2 specify marker, if desired 3 specify whether markers should hang outside the li paragraphs or flush with the text,if desired 4 specify the custom image marker that should be used for the list items, if desired list-style: circle inside none; can specify any or all of the 3 list-style properties and in any order (type, position, image) list-style properties are inherited

<li></li> <li></li> <li value="2"> <li></li> <li></li>

1, 2, 2, 3, 4

creating a list

<h1 class="hdg">Step by Step Instructions</h1> <ol> <!-- optional attributes:start, type, reversed --> <li> </li> <!-- optional value attribute --> <li> </li> <!-- add content: text, links, or img elements --> </ol>

choosing where to Start list numbering when using start or type, always give it a numeric value, even if the list will be displayed with letters or roman numerals via CSS or type attribute)

<ol start="2"> <!-- list starts at 2 --> <li></li> <li value="5"></li> <!-- the next item will be affected --> <li></li> </ol>

ul have

a solid round bullet by default, this can be changed in the CSS

ol marker type attribute can be specified in HTML or CSS

acceptable type values in HTML= A, a, I, i and 1(default), example of uppercase roman numerals <ol type="I"> (styling in CSS is preferred)

numeric markers

are aligned to the right in most browsers

li

are indented from the left side by default, though with CSS we can remove or reduce the indentation

use the dfn element

around the names in the dt(s) to indicate that the list is defining terms, such as in a glossary <dl> <dt><dfn>bogeyman</dfn>, n.</dt> <dt><dfn>boogeyman</dfn>, n.</dt> <dd>mythical creature that lives under the bed</dd> <!--don't mark up single p of text as p elements within the dd elements, unless it's more than 1 p --> </dl>

reversed

browser support for boolean reversed attribute is less than ideal purpose was to indicate a descending <ol reversed> or <ol reversed="reversed">, supporting browsers would reverse the list's numbering automatically

li are indented from the left side of their parent

by default, markers sit outside the text. However, markers can be inside/flush with the rest of the text *inside, the markers for the lines that wrap begin at the left edge of the list item, instead of outside the content...this can look cramped, so the book added li { line-height: 1.3; }

marker styles

can be changed in CSS

Custom markers (typical to use a png, but a GIF or JPEG also works)

create with an image by using the CSS ul { /* turn off the default markers */ list-style: none; /* remove indent of li, sit flush left (dir="ltr") */ margin-left: 0; /* for older browsers */ padding-left: 0; } li { /* show img slightly down from top of item */ background: url(.../img/checkmark.png) no-repeat 0 .1em; /* ensures img isn't cut off at the bottom */ line-height: 1.8; /* text is shifted to make room for the img */ padding-left: 1.75em; }

nesting list

creating one list inside another, mixing ul & ol

dl

description list for the parent, dt marks the term to describe, and dd marks the description of the term. (This was known as a definition list before HTML5)

Indenting the list dir="rtl" dir="ltr"

direction is right to left direction is left to right(default)

by default, unordered lists use

discs for the first level, circles for the first nested level and squares for the third and subsequent level lists. Use list-style-type to specify the type of bullets you want.

custom markers

display inside the list items because you apply the marker background image to the li themselves... in comparison, default markers appear outside the li by default

pagination

is the horizontal list of links- like 1 | 2 | 3 | 4 that often appears with a list of search results or products, allowing visitors to jump between pages of results

li { list-style-type: marker; } ol { list-style-type: marker; } ul { list-style-type: marker; }

marker= disc, circle, square, decimal, upper-alpha, lower-alpha, upper-roman, lower-roman, none

ol will be

numbered with Arabic numerals (1,2,3, and so on) by default unless otherwise specified

breadcrumb nav

often displayed horizontally above the main content area to indicate where the current page exist in the site's navigation path

ol

ordered list for the parent, li for each list item *perfect for: step by step instructions, outline or table of contents(anytime order is meaningful)

the value attribute

overrides the start value

li li { font-size: 1em; /* or 100% */ }

prevents shrinking text aka so nested list items will always be the same size as top-level ones

it's better to apply a background img on li

rather than use list-style-image

one type of list may be inserted into another

the inner list is known as a nested list. can be done w/ ordered and unordered list, together or independently

use <ol>

to mark up breadcrumb nav and pagination, since links represent a distinct sequence of links(order has meaning)

use <ul>

to mark up most groups of links...main nav, a list of links to related stories or videos, or groups of links in the page footer

by default, the name(dt) is aligned

to the left, and the value(DD) is indented. the name(dt) appears as normal text, to help it stand out apply bold style in the CSS <dl> <dt>Boris Karloff</dt> <dd>Best known for his role in Frankenstein</dd> </dl>

{ list-style-position: ; } is inherited and can be applied to

ul, ol, or li

ul

unordered list for the parent, li for each list item, used the most because it's the de facto standard for marking up most kinds of navigation (order isn't tied to the list meaning)