In the CSS Rule Definition dialog, choose the Box Category and use the Margin and Padding settings to increase the space around the list items. Just create a new style for the li tag (as you did in Step 2), or edit your existing li style by double-clicking on the style name in the CSS Styles panel. The default HTML style for unordered lists places list items too close together for most designers, but it’s easy to add a little breathing room. So you could remove the underline from all links that appear within unordered lists by choosing the Type category in the CSS Rule Definition dialog, and under Text-Decoration, click on the None checkbox. For instance, you can create a style named ul a, which will only affect the link tag when it appears within the unordered list tag. You can alter the way links display in an unordered list in much the same way you’d alter any other links on the page, and you can use compound styles (by choosing Compound for the Selector Type in the New CSS Rule dialog) to create link styles that only affect links within an unordered list. You can also remove the bullet completely by choosing None (as we did in this example). If you prefer, you can replace the bullet with your own image by clicking on the Browse button next to the List-Style-Image field and selecting the image you want to use in place of the bullets. Here you can change the style of the bullet by selecting any of the options in the List-Style-Type drop-down menu. In the CSS Rule Definition dialog, choose the List Category on the left.

Press OK to continue to the CSS Rule Definition dialog. Under Selector Type, choose Tag and then select li from the drop-down list to the right of the Selector Name field (or type li into the field). Choose Format>CSS Styles>New to create a new CSS rule.

To create a new style that will alter the look of each list item, you’ll want to create a style for the Next, convert your list items to links (Modify>Make Link). To fix the list, just delete any space between list items and press the Return or Enter key before each item in the list. If you try to format text with the unordered list and the bullets don’t appear before every item, it’s probably because they weren’t separated by paragraph tags. The Unordered List feature (Format>List>Unordered List) in Dreamweaver only works properly if it’s applied to elements separated by paragraph tags. (This tutorial works for both Adobe Dreamweaver CS3 and CS4.)Įnter the text you want to use in your list and make sure to separate each item with a paragraph Here are a few CSS tricks for formatting lists. Add a little CSS to your lists and you can create accessible, versatile designs that fit the look and feel of any website-and follow Web standards. There are many good reasons to format text with the unordered list tag, but that doesn’t mean you have to settle for the vanilla bulleted-list style you get from plain old HTML.

Dw cc fluid image width