The Basics of Styling Unordered Lists with CSS
Share this Dreamweaver Article:
There are two distinct ways of swapping unordered list bullets or styling unordered lists using CSS. One unordered list styling method deals with setting a list style image and is quick and easy to do as long as your replacement unordered list bullets are small and of a symmetrical or regular shape.
The other method for styling unordered lists bullets using CSS is to take an unordered list and remove the default inherent bullets and replace them with background images using CSS.
Let us take a look at the former CSS unordered lists styling method using the list style image replacement technique first.
1. Create an Unordered List
This is a standard unordered list which will produce a standard set of default bullet points.
<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 -->
We can then set a selector to change out our css unordered list bullet and choose from a selection of default styles like this:
You will notice once you type the CSS syntax list-style-type: that a drop down menu appears. You can either choose from a selection of the default css list styling bullets, or click on 'URL' and replace the unordered list bullets with your own custom made bullet points.
2. Use your own Unordered List Bullets
Use the drop down menu to browse for you custom unordered list bullet:
#wrapper ul li { list-style-type: url(../images/bullet.jpg); }
This method of setting custom bullets will work just fine as long as the bullet points are not larger than the text size that you want to use and the replacement unordered list images are a regular shape which do not need the center line adjusted.
Another Way
It is well worth discovering how to master this technique as it will serve you well when positioning any background images with CSS.
There is another method that you can use when styling unordered lists with custom unordered list bullets. It is a methodology that I prefer to use when I have to place a difficult to position unordered list bullet. The method requires that we remove the default CSS list styling and replace the unordered list bullets with background image CSS. We can place our own bullets as background images and then use CSS to style the unordered list images into a correct alignment with the unordered list item text.
The unordered list CSS required to position your unordered list bullets uses a few extra lines of CSS code. However, it is well worth discovering how to master this technique as it will serve you well when positioning any background images with CSS.
1. Background Image CSS Unordered List Styling
The first thing to do when styling unordered lists using the background image CSS list styling method, is to target the UL tag of the unordered list and set the margins and padding to 0. This will ensure that there is no outside interference to hinder the positioning of our unordered list bullets.
The list item tags are then targeted and the margins and padding are removed too. The list style is set to ‘none’ which removes the default styling of the unordered list bullets. There is now a blank canvas in which to add your own CSS unordered list bullet images.
/* Targets the Unorderd List and removes default margins and padding */ #wrapper ul { margins:0; padding:0; } /* targets li tags, removes old bullets and replaces the bullets with your own custom bullets */ #wrapper ul li { margin:0; padding:0; list-style:none; background-image:url(images/list-bullet.png); background-repeat:no-repeat; background-position:left center; padding-left:50px; }
Background Image
To complete the styling of the unordered list we set a 'background-image' property which will tell Dreamweaver via the drop down menu, where to find our custom unordered list images.
Background Repeat
Because we are using background images, Dreamweaver will naturally repeat the image continuously along the page so a ‘no-repeat’ property is set.
Background Position
The background will need to be positioned using the’ background-position’ property and is set to ‘left’ along the X axis to position it as far along the left as possible and ‘center’ on the Y axis to position the unordered list bullet to the center of the list item’s text.
Padding Left
The ‘padding-left’ property is then set and will push the list item text of the unordered list away from the background image bullet and should be adjusted until you are comfortable with the distance between them.
If you have bullet list images which are larger than the text you will be using, then you might want to learn how use advanced positioning with this Dreamweaver Aticle Tutorial:
Intermediate bullet list styling in Dreamweaver - Article Tutorial
Other Related Tutorials
Bullet List Styling for Intermediates - Dreamweaver Video Tutorial
Basics Of Unordered Bullet list styling - Dreamweaver Video Tutorial