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.
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