How to Align Text Under Bullets in Dreamweaver

Bullets on Web pages display outside the text, so when text for a bullet runs for multiple lines, the text never appears under the bullets. You can change the alignment of bulleted text so it does align under the bullets, though. Use the "text-indent" property of CSS (Cascading Style Sheets) to move the bullet into the text, therefore placing it above the second line of text. Edit your Web page in Dreamweaver using the "Split" view to create your bullet list and edit the CSS in the "Code" panel.

Instructions

1. Open your Web page in Dreamweaver, and select "Code and Design" from the "View" menu at the top of the screen.

2. Add "<style>" tags beneath your "<title>" tags if you see none in your HTML code. Place your cursor in the "Design" panel where you want to add a bullet list if the Web page does not yet have one. Click the bullet list icon in the "Properties" box and begin typing, or highlight text and click the icon to convert existing text to a bulleted item.

3. Go to your "<style>" tags in the "Code" panel and add this style rule:

   ul li {

   text-indent: 15px;

   }

   Click on the "Design" panel to see how the code effects your bullet list. Adjust the number of pixels in the "text-indent" property as needed.

References

• W3C: Text