Dreamweaver Tutorials back to dreamweaver tutorials home pagee contact form tutorial page
A value is required.Invalid format.A value is required.Invalid format.
Social Networks Follow Us on Twitter Our YouTube.com Channel Facebook Page

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 tutorialexample of a bullet list image if you want to practice positioning them before getting your fingers wet with your own bullet list designs:




1. Create the HTML Unordered list

The first thing we need is to create a basic unordered list in html. If you want, copy and paste this html unordered list into your web page. The unordered list bullets are automatically added and display their default style. The unordered list is inside a containing div called ‘wrapper.’

	
 <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


Share this Dreamweaver Article:

blog comments powered by Disqus

Dreamweaver Website Templates

PHP Luxury Contact Form Tutorial


Great Premium Shopping Cart

Email Marketing - Recommended links

CSS Drop Down Menu - Dreamweaver

Floating Menu - Dreamweaver

Tabbed Navigation Menu

CSS Text Boxes in Dreamweaver

CSS 3 in Dreamweaver

J Query in Dreamweaver

Transparent Overlays Dreamweaver

CSS in Adobe Dreamweaver

All Types of Links In Dreamweaver

Positioning Elements in Dreamweaver

Unordered List Images Dreamweaver

Create an RSS Feed in Dreamweaver

Website Typography in Dreamweaver

Expanding Text Boxes - Dreamweaver

Make a Donation

Donate for Dreamweaver Tutorials

paypal