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

CSS Unordered List Bullets - Dreamweaver Tutorial

CSS bullets are easy to insert most of the time. But if you have custom bullets of unusual sizes, then you may need a bit of help aligning the text to the unordered list bullets. This tutorial covers some of the pitfalls you may encounter with css list bullets and css unordered lists. - Free Download -

Unordered Lists

This Dreamweaver intermediate video tutorial deals with adding custom unordered list bullets to your html unordered list. Inserting an unordered list image to replace the default html list bullet style is one thing, but sometimes standard css list bullet positioning just won’t do.



For instance, if the list bullets have a custom drop shadow or are not symmetrical they can be harder to position.

example unordered list bullet with drop shadow

Take a look at this css custom bullet image. It is in a png format with an alpha transparent drop shadow. This CSS bullet image will be difficult to position into the center of the list html because standard positioning won’t take into account that the unordered list css bullet has a drop shadow which needs to be offset. Just putting a position of ‘center’ will not help in this situation if your objective is to position the CSS unordered list image in the middle of your list html.

The best way to position difficult to place list bullets, is to nudge them into position in pixel increments

Now, I know that the drop shadow is only a few pixels, but this Dreamweaver video tutorial is about the perfect positioning of a css unordered list and the CSS custom bullet images you place into that unordered list. The best way to position difficult to place list bullets, is to nudge them into position in pixel increments instead of just positioning ‘center.’ To place your bullets using pixel increments you will need to insert the css list bullet images as background images and not just add the image to the list style type property.

Adjusting the position of the unordered list image using pixels manipulates the X-axis and Y-axis. The X-axis always comes first when positioning unordered list bullets and other background images. Positive numbers for the Y-axis position the css bullet below the html list text while negative or minus figures positioned the html list bullet above the list html text. For more information you can watch the above Dreamweaver video tutorial. If you prefer to read a detailed Dreamweaver article showing you how to better position your html unordered list bullets then follow this link - CSS unordered list bullet positioning.



related Tutorials:

Style Bullet Lists with CSS - Article Tutorial

CSS Unordered List Basics - 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