Basic Unordered List Images - Dreamweaver Tutorial
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