HTML and CSS Reference
In-Depth Information
Changing the List Layout
Tammy likes the revised markers, but she thinks there's too much empty space to the left
of the entries in the navigation list. She would like you to modify the layout to remove
the extra space. Each list item is treated as a group-level element and placed within its
own box. By default, most browsers place the list marker to the left of this box, lining up
each marker with its list item. You can change this default behavior using the property
list-style-position:
position
;
where
position
is either
outside
(the default) or
inside
. Placing the marker inside
of the block causes the list text to fl ow around the marker. Figure 3-47 shows how the
list-style-position
property affects the appearance of a bulleted list.
Figure 3-47
Marker positions
list-style-position: outside;
list-style-position: inside;
All three of the list styles can be combined within the property
list-style:
type image position
;
where
type
is the marker type,
image
is an image to be displayed in place of the marker,
and
position
is the location of the marker. For example, the style rule
ul {list-style: circle url(bullet.jpg) inside;}
displays all ordered lists with the marker found in the
bullet.jpg
image placed inside
the containing block. If a browser is unable to display the bullet image, it uses a circle
marker instead. You do not need to include all three style properties with the list style.
Browsers will set any property you omit to the default value.
By default, browsers offset ordered and unordered lists from the surrounding text.
Tammy has noticed this and worries that the entries in the navigation list are crowding
the text in the Welcome paragraph by being shifted too far to the right. She would like
you to move the navigation list to the left, aligning it more toward the left edge of the
Sunny Acres logo. To reduce the space that the browser inserts, you use the style property
Any page element can be
turned into a list item by
applying the
display:
list-item
style.
padding-left:
size
;
where
size
is the length that the list should be shifted to the right. The
padding-left
style
is one of the styles you'll study in more detail in the next tutorial on page layout. For now,
you'll limit your use of this style to reduce the extra space inserted by the browser in the
navigation list. After some experimenting, you settle on the following value for the style:
padding-left: 0.5em;
You'll add this style to the style rule for the navigation list.
