Bullet indents - reducing

HTML & CSS
1

I have a bulleted list. I want to reduce the amount by which they are indented. Do I modify the ul or li tag? And which bit in Dreamweaver do I change? Is it box? List? What? I’ve tried loads of combination but just can’t see to do it.

2

Through css.


ul, li {margin-left: 0; padding-left: 0;}

This is exactly why you shouldn’t rely on Dreamweaver wysiwyg mode.

3

Hello

You could add this to the selector for the ul, just adjust the values as needed. top, right, bottom, left.

margin: 0 0 0 10px;

Hope it helps:)

4

That has helped me position the bullet point starting position from the left. But now there seems to be a bigger space between the bullet point and the text. Can I reduce that somehow?

5

Try giving the li a bit of padding-left.

6

Should I read that as a padding setting of MINUS left?

7

Hello

Should I read that as a padding setting of MINUS left?

If you mean this: padding-left

No that is just how you type padding left, for example “padding-right” would be for right. Also you cannot use negative values with padding, but you can with margins. :slight_smile:

Hope this is what you we’re asking.

8

Hi,

Some browsers use padding for the default indent and some use margin. here is an example that show both.

http://www.pmob.co.uk/temp/list-bullet-test.htm

So you need to control both as in my example above.

You can’t actually reduce the space between the bullet and where the text starts (assuming you have no padding and margins on the list anyway).

The only way to move text close to the bullet is to use another element as follows.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<title>list test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0}
ul{margin-left:15px}
li span {position:relative; left:-7px;}
</style>
</head>
<body>
<ul>
  <li class="five"><span>Testing</span></li>
</ul>
</body>
</html>

However I think you should stick with the default bullet indent that the browsers give you.

Paul

9

Ok, thanks for all your help. :slight_smile:

10