SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How Can I Vertically Space This Out More?

    I have several rows of links and I would like to add a couple more pixels of space between each line. I've tried line-height and it didn't do anything and I've tried padding for the bullet image, but it doesn't move teh text.

    Can somebody tell me how I can add more space between the lines that contain bullet images and text?

    Code:
    .arrow {
    padding: 0px 0px 4px 0px;
    }
     
    .subNavigation {
    line-height: 1.4px;
    }
     
    <div class="subNavigation">
    <img src="images/arrow.gif" class="arrow" alt="" width="11" height="9" />&nbsp;<a href="link1.htm">Link1</a><br />
    <img src="images/arrow.gif" class="arrow" alt="" width="11" height="9" />&nbsp;<a href="link2.htm">Link 2</a>
    </div>
    John Saunders

  2. #2
    SitePoint Addict Knightime's Avatar
    Join Date
    Jan 2003
    Location
    USA
    Posts
    376
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try margins

  3. #3
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Knightime,

    I tried changing the margins but it only changed the area around the group of rows, instead of in between each line.

    Any other ideas?
    John Saunders

  4. #4
    SitePoint Addict Knightime's Avatar
    Join Date
    Jan 2003
    Location
    USA
    Posts
    376
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you are using table rows, then try cellspacing:

    It's difficult to tell without seeing the code

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Something like this might work: (assuming you're not using tables)

    Code:
    .arrow {
    padding: 0px 0px 4px 0px;
    }
    .subNavigation p {
    margin-top: 0px;
    margin-bottom: 3px;
    }
     
     
    <div class="subNavigation">
    <p><img src="images/arrow.gif" class="arrow" alt="" width="11" height="9" />&nbsp;<a href="link1.htm">Link1</a></p>
    <p><img src="images/arrow.gif" class="arrow" alt="" width="11" height="9" />&nbsp;<a href="link2.htm">Link 2</a></p>
    </div>


    Paul
    Last edited by Paul O'B; Mar 18, 2003 at 03:38.

  6. #6
    SitePoint Enthusiast DFS's Avatar
    Join Date
    Sep 2002
    Location
    The Wilds of Northern Maine
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why not use an unordered list? That's what they're made for, and it then becomes very easy to pad the top and bottom of each item to pixel-perfect layout with your CSS. Plus you can use the CSS to change the default list bullet with your own .gif.

    This might help:
    http://www.alistapart.com/stories/taminglists/


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
  •