PDA

Click to See Complete Forum and Search --> : less vertical space between bullet list



m_lardenoye
03-19-2007, 09:54 AM
hi

i made a list with bullets, but the space between the bullets (vertical space) is quite big, same space as lets say a new paragraph... can this be shortened ?

<p>TEXT</p>
<p class="kop"><strong>AAAAAAAAAA</strong></p>
<p class="list1">•&nbsp; BBBBBBBBBBBBB</p>
<p class="jadf">•&nbsp; CCCCCCCCCCCCCCC</p>

thanx
m.

catbert303
03-19-2007, 12:42 PM
That isn't a list! It's a bunch of paragraphs with bullet points ;)

HTML provides a few options for creating lists - unordered lists <ul>, ordered lists <ol> and definition lists <dl>.

Generally unordered lists are displayed with some kind of bullet point and ordered lists have some kind of numbering (though you can remove any bullets and numbering with CSS if you want). Both of them contain list items <li> (definition lists work a bit differently)

I think here it looks like you want an unordered list. Something like this:



<ul>
<li><strong>AAAAAAAA</strong></li>
<li>BBBBBBBBBB</li>
<li>CCCCCCCCCCC</li>
</ul>


You can control the spacing between items by adjusting their padding and/or margin.

For example,



<style type="text/css">
li {
margin: 0 5px; padding: 0;
}
</style>


Would give li elements no spacing above or below (top, and bottom margins and padding are all zero) and 5px of space on the left and right (the left and right margins)

Of course you can also control the spacing around the list as a whole by adjusting the margins and padding of the ul element if needed.

And if you really want to stick with paragraphs you can do exactly the same sorts of things with their magins and padding to control the spacing around them.

m_lardenoye
03-19-2007, 03:18 PM
absolutely great stuff....

it worked out just fine, but i cant get the list to begin with the previous, main title.

<p class="kop"><strong>Market Research </strong></p>
<ul type="circle">
<li class="blue">Desk Research</li>
<li class="blue">24H Research</li>
</ul>

looks like: see attachment..... :/

catbert303
03-20-2007, 12:44 PM
So the first item in the list is meant to be a title that shouldn't have a bullet point?

If so, I think probably the best way to approach it is to move the item outside the list into some heading element (e.g. <h3>). Then use CSS to adjust its margins and padding to get the spacing setup so that it looks like it is part of the list,


<h3>The title</h3>
<ul>
<li>The</li>
<li>List</li>
<li>Items</li>
</ul>




<style type="text/css">
h3 {
margin: some values; padding: some values;
}
ul {
margin: some values; padding: some values;
}
li {
margin: some values; padding: some values;
}
</style>