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 Our YouTube.com Channel Facebook Page

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:

defalut UL styles


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



blog comments powered by Disqus

Dreamweaver Website Templates

Web Hosting Plans That I Use

  • GoDaddy.com Hosting Plans!Godaddy Hosting
  • Unlimited Hosting at HostGatorHostGator Hosting
  • JustHost.com Unlimited DomainsJustHost Hosting
  • Hosting just $4.88/month! - PowwebPow Web Hosting

PHP Luxury Contact Form Tutorial


Great Premium Shopping Cart

  • BigCommerce makes it easy to sell online. Click here to try it free!BigCommerce

    I highly reccommend this product for people who want to create an online store. it's easy to set-up and add products to and easy to manage back-of-house. Can also be used as an Ebay store.

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