A Flash Developer Resource Site

Results 1 to 4 of 4

Thread: less vertical space between bullet list

  1. #1
    Senior Member
    Join Date
    Nov 2004
    Posts
    114

    less vertical space between bullet list

    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.

  2. #2
    Senior Member catbert303's Avatar
    Join Date
    Aug 2001
    Location
    uk
    Posts
    11,222
    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:

    Code:
    <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,

    Code:
    <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.
    Last edited by catbert303; 03-19-2007 at 12:46 PM.

  3. #3
    Senior Member
    Join Date
    Nov 2004
    Posts
    114
    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..... :/
    Attached Images Attached Images

  4. #4
    Senior Member catbert303's Avatar
    Join Date
    Aug 2001
    Location
    uk
    Posts
    11,222
    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,

    Code:
    <h3>The title</h3>
    <ul>
      <li>The</li>
      <li>List</li>
      <li>Items</li>
    </ul>
    Code:
    <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>

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center