Style Lists with CSS
Discover how to turn your boring lists into custom lists by replacing your list bullets with some funky list bullet designs of your own.
It’s easy to learn how to style an unordered list with CSS; a simple line of code will remove the ordinary html unordered list styles. Another simple line of code will re style the unordered list with your new replacement list bullets.
This tutorial shows you how to style list bullets which are larger than the text in the list items or bullets which are irregular and difficult to style under normal circumstances, like list bullets with drop shadows that you just cannot position correctly in the center of your list items.
You can download the list bullet used in this tutorial
if you want to practice positioning them before getting your fingers wet with your own bullet list designs:
1. Create the HTML Unordered list
<div id="wrapper">
<ul>
<li> List Item 1 </li>
<li> List Item 2 </li>
<li> List Item 3 </li>
<li> List Item 4 </li>
<li> List Item 5 </li>
</ul>
</div> <!-- end wrapper div -->
2. Remove the CSS List Styling Defaults
It makes good working practice to remove the margins and padding from the UL tag when styling your CSS list bullets. The following line of code will remove the default margins and padding:
/* Removes the default Margins and Padding */
#wrapper ul {
margins:0;
padding:0;
}
3. Style the List tags with CSS
The list item tag needs to be styled and this is where we will remove the old bullet list style and replace it with our own CSS unordered list bullet . The margins and padding are again set to 0. The list style is changed to ‘none’ which will remove the default css list styling and a background image can be specified.
#wrapper ul li {
margin:0;
padding:0;
list-style:none;
background-image:url(images/list-bullet.png);
background-repeat:no-repeat;
background-position:0px 3px;
line-height:40px;
padding-left:50px;
font-family:Verdana, Geneva, sans-serif;
color:#999;
text-shadow: 1px 1px 1px #666;
}
Dreamweaver is great for linking to images. when you type the background-image attribute followed by a colon, Dreamweaver will give you the opportunity to browse for the bullet list.
Dreamweaver is great for linking to images and when you type the background-image attribute and a colon, Dreamweaver will give you the opportunity to browse for the bullet list.
Background Repeat
When using background images in your css unordered list, the tendency is for the background image to repeat itself over and over along the Y and X axis. We can take out the background repeat when styling lists by specifying ‘no-repeat.’
Background Position
The background-position attribute is very important when dealing with unorthodox bullet style lists. Generally you would set a position of ‘left’ for the X axis and ‘center’ for the Y axis to position it dead center of the list item.
However, this bullet is larger than the list text and has a drop shadow which will make it difficult to place with generic positioning commands. For this list bullet we will need to position it precisely be nudging it with pixel positioning.
In the CSS for the unordered list above, the X axis is positioned to 0 pixels which will push the image as far left as it can go inside of the containing div tag. The Y axis is positioned at 3 pixels which has pushed the image down 3 pixels from the center of the list item text. If a minus figure of -3 pixels were to be set, the image would raise above the list text by 3 pixels.
When styling lists with custom list bullets which are larger than the list items, you should set a line height which matches the image height in order to allow the entire bullet image to be seen.
Line Height
When styling lists with custom list bullets which are larger than the list items, you should set a line height which matches the image height in order to allow the entire bullet image to be seen.
A padding left attribute pushes the css list bullets image away from the text to give a great looking bullet list item.
The rest of the unordered list styles like the text shadow, color and font family are for decorative purposes. By now you should have a good understanding of how to style an unordered list with CSS. Unordered lists bullets can be tricky to position if they are of an irregular size and shape like the unordered list bullet in this tutorial. It had a drop shadow which meant the center position would have to be altered in order to style the CSS unordered list effectively.
Related Tutorials:
Basics of Unordered List Images - Dreamweaver Video Tutorial
Unordered List Bullets - Intermediate - Dreamweaver Video Tutorial
