SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    I LOVE THIS SITE ! ! ! DougD's Avatar
    Join Date
    May 2000
    Location
    San Diego, CA
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS - Line-Height Tag Question???

    Hi All,

    I have looked around and could not find the answer to my question. I am really new at style-sheets, but I am really having fun learning about them and implementing them into my sites.

    Here's the question...

    I am creating tags for a list that I have created in my left navbar. I would like there to be space between each bullet listed so someone told me to use:

    ul{line-height: 16pt;}

    This does the trick, but it also puts that space between items that have more than one line. What I want is for there to be space only between each new bullet.

    Is there a tag for that?

    Thanks,

    Doug

  2. #2
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You can add padding to the items using either tags or a class to do so...

    To do this you would use:
    Code:
    padding-bottom: 5px;
    Just adjust the padding to suit your needs.
    Wayne Luke
    ------------


  3. #3
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah. Line-height is a typographical property that alters the height of lines of text, not the spacing between elements. If you take a look at the NYPL Style Guide you can see a nice, obvious example of line-height in action.

    Like Wayne said, you could increase the padding for the <UL>, but you can also increase it's margin instead in much the same way you'd use to adjust the padding:
    Code:
    /* Both of these examples'll set the top and bottom spacing to half of
    the letter height tall, while the left and right sides are set to nothing */
    margin: .5em 0;
    padding: .5em 0;
    ~~Hope This Helps

  4. #4
    I LOVE THIS SITE ! ! ! DougD's Avatar
    Join Date
    May 2000
    Location
    San Diego, CA
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Guys,

    I appreciate the help, but I still cannot get the result I want.

    When I try: padding-bottom: 5px; (I used 35 to make it obvious) I get spacing after the </ul> when I want spacing between the <li> tags.

    I tried the other method as well and did not get the spacing between the <li> tags either.

    Could I be doing something wrong?

    Thanks again,

    Doug

  5. #5
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doug,

    Try setting the padding-bottom of the <li> instead of the <ol>:

    li {padding-bottom:10px;}

    Adjusting the padding of the <ol> will effect the space around the entire list, whereas <li> should effect the space around the individual <li>'s.

    HTH

  6. #6
    I LOVE THIS SITE ! ! ! DougD's Avatar
    Join Date
    May 2000
    Location
    San Diego, CA
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought I tried that, but I guess I did something else. That worked perfectly! Thank-you very much! I think I worded the question wrong the first time I asked, leaving out that I wanted the space between the <li> tags.

    I really appreciate everyones help...

    Thanks again,

    Doug


Bookmarks

Posting Permissions

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