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

Basic Unordered List Images - Dreamweaver Tutorial

GoDaddy.com Hosting Plans Sale!Godaddy Hosting

covers basic list image replacement in a CSS or HTML Unordered List. This is the basic way of Replacing the default Unordered List Bullets. It works best for replacing the list bullets with images if the images are smaller than the text. The images can then be aligned into the center and with just a little padding.

Basics of Unordered List Images in Dreamweaver

This Dreamweaver tutorial deals with the basics of background image CSS. You can discover how to turn your boring default list styles and add your own CSS unordered list bullet using a custom image that you have created or downloaded.



Styling unordered lists is a breeze thanks to CSS. You can choose to style your unordered list bullet from a range of default list bullets that all browsers will recognize like the circle and disc or you can use CSS to remove the unordered list styles and replace with unordered list images of your choosing.

To position your unordered list bullets in the center, you can use a background-position property in the unordered list CSS styles.

The technique to style an unordered list with background image CSS involves removing the default list styles with the ‘list-style:none;’ property which will completely remove the standard inherent unordered list bullet. Once you have an unordered list with no bullets, you can then set a ‘background-image’ property and replace the list bullet with one of your own.

In general you would position your css unordered lists image on the left and in the center of the text. The unordered list bullet will then stay centered in even if the font size increases. To position your unordered list bullets in the center, you can use a background-position property in the unordered list CSS styles. Setting the unordered bullet position to ‘left center’ would position the background image CSS as far left as possible and in the center of the text. Because you are using background images for your unordered list images, the image still appears behind the text. To fix that problem, we can add padding to the list item tag, enough to push the unordered list bullets away from the text and gives a great looking unordered list.

You do not just have to use left and center to position your unordered list css. You can also use percentages and pixels. To use percentages for you css unordered lists positioning, setting it to 50% will center the images to the center of the text too. For a more detailed explanation you can watch this Dreamweaver video tutorial on styling unordered lists or you can read a Dreamweaver tutorial article explaining CSS unordered lists and unordered lists with no bullets.



For a more advanced Dreamweaver video tutorial explaining how to deal with more complex bullet list imagery like bullet list images with drop shadows or irregular sizes please follow this link: Unordered List Bullets in Dreamweaver

Style Bullet Lists with CSS - Article Tutorial - Intermediates

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