7 replies [Last post]
paulbarrett
Offline
newbie
Last seen: 16 years 1 week ago
Joined: 2004-07-29
Posts: 2
Points: 0

i am trying to reduce the space between my list bullets and the items in my unordered list. is this possible?

thanks.

paulbarrett
Offline
newbie
Last seen: 16 years 1 week ago
Joined: 2004-07-29
Posts: 2
Points: 0

<ul> bullet question

anyone?

rtm223
rtm223's picture
Offline
Enthusiast
Last seen: 16 years 11 weeks ago
Joined: 2004-05-18
Posts: 58
Points: 0

<ul> bullet question

I've never tried but you try setting the text-indent property for the li's. It might work, but I'm not sure. Hope this helps

//edit: bad idea, that would totally screw if the list item went on to multiple lines. If you know it is one line only then it might still work but will look awful otherwise.

option 2 is to put a span inside the li, and use:

li span{
    position:relative;
    left:-0.2em;
}

It's pretty wasteful on markup should definately work if no other solution can be found.

Option 3 works if you are using graphical bullets with:

list-style-image:url(buller.gif);

swap that for:
li{
    background-image:url(buller.gif);
    background-repeat:no repeat;
    background-position:0px 50%;
    padding:10px;
}

use the padding to position the text.

There are some ideas to play around with, hope this helps

css layout tutorials - in depth layout tutorials for all you newbies D maybe even some stuff for you not-so-new-bies out there P

The Finch
Offline
Enthusiast
Cincinnati
Last seen: 16 years 1 week ago
Cincinnati
Timezone: GMT-5
Joined: 2004-08-01
Posts: 65
Points: 0

<ul> bullet question

Simply add some padding to the li selector

e.g.

<html>
<head>
<style type="text/css">
ul li {
padding:0 0 0 0;
}
ul li.twenty {
 padding:0 0 0 20px;
}
ul li.forty {
 padding:0 0 0 40px;
}
</style>
<body>
<ul>
<li>one</li>
<li class="twenty">twenty</li>
<li class="forty">forty</li>
</ul>
</body>
</html>

I hope that answers your question

rtm223
rtm223's picture
Offline
Enthusiast
Last seen: 16 years 11 weeks ago
Joined: 2004-05-18
Posts: 58
Points: 0

&lt;ul&gt; bullet question

The Finch wrote:
Simply add some padding to the li selector

hmmmm, for some reason I got the idea into my head that would not work, but it does..... oh well :roll:

css layout tutorials - in depth layout tutorials for all you newbies D maybe even some stuff for you not-so-new-bies out there P

genialexpert
Offline
newbie
Last seen: 15 years 47 weeks ago
Joined: 2004-09-10
Posts: 2
Points: 0

&lt;ul&gt; bullet question

hi guys,

I need to move the bullets closer to the text than the default distance ...

I've tried your solution with negative distance and it doesn't work ...

paulbarrett, how did it work for you?

ul li { 
padding:0 0 0 -5px; 
} 

TimeBandit
Offline
Enthusiast
Maryland, USA
Last seen: 15 years 48 weeks ago
Maryland, USA
Joined: 2004-09-02
Posts: 112
Points: 0

&lt;ul&gt; bullet question

put your bullet in a background of the LI, then pad-left the LI. you can move the bullet up and down by, for example:

li {
list-style-type: none;
background: url(bullet.gif) 0px 2px no-repeat;
padding: 0 0 0 11px;
}

the "2px" part moves the bullet up and down so u can align it.

genialexpert
Offline
newbie
Last seen: 15 years 47 weeks ago
Joined: 2004-09-10
Posts: 2
Points: 0

&lt;ul&gt; bullet question

thanks TimeBandit,

never thought at the bullet as a background element ... great solution.