SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2001
    Location
    m
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    is there a way to increase the space size with CSS?

    I have a paragraph with about 40 links, but the space between each link is too small, I'm looking for a larger space between each link - is there a way to do it with CSS?


    also, I'm using dreamweaver 4, are there any other good useful CSS tricks that are not included in DW4?


    thanks!

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2001
    Location
    UK
    Posts
    407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could create a class for the links and set it through that:

    Code:
    <style>
    A.paraLink {line-height:2}
    </style>
    
    ...
    <a href="#" class="paraLink">link</a><br>
    <a href="#" class="paraLink">link</a><br>
    ...
    The line-height setting can be a number (multiple of font size, 2 = double spacing), an actual length (e.g. 10px) or a percentage of the font.

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2001
    Location
    m
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks, but i meant the horizonal space between the links, guess I forgot to mention it

  4. #4
    SitePoint Addict
    Join Date
    Feb 2001
    Posts
    302
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try:

    <style>
    A.paraLink {word-spacing:10px}
    </style>

    ...
    <a href="#" class="paraLink">Your Link</a>
    ...

  5. #5
    SitePoint Evangelist
    Join Date
    Jan 2002
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just an idea:

    Code:
    .spacing {
    padding-right: 10px;
    }
    
    <a href="#" class="spacing">Your link</a>
    would that work?
    Wavelan

  6. #6
    SitePoint Zealot
    Join Date
    Dec 2001
    Location
    m
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nopee, none of these work

    also, i prefer a method that will use the class tag only once for all of the links, like: <P class="dfs">*links*</P>


    btw - why don't i get email notifications?! i marked that option

  7. #7
    SitePoint Evangelist
    Join Date
    Jul 2001
    Location
    UK
    Posts
    407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If it's just a one-off can't you open it in Notepad and search and replace for [space] with [space] & nbsp; [space]

  8. #8
    morphine for a wooden leg randem's Avatar
    Join Date
    Jun 2002
    Location
    .chicago.il.us
    Posts
    957
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Assuming you have this:

    Code:
    <p class="dfs">
     <a href="#">blah</a>
     <a href="#">blah</a>
     <a href="#">blah</a>
    </p>
    you can try this:
    Code:
    P.dfs{margin-right: 1em;}

  9. #9
    SitePoint Member
    Join Date
    Feb 2002
    Location
    Philadelphia
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    P.dfs{margin-right: 1em;}
    Actually, that will only create a margin at the end of the line. If you want a space after each link in the line, try simply,
    Code:
    a {margin-right: 1em;}
    Warning: This works fine in up-to-date browsers, but NN4.x will automatically start each link on a new line (It treats "margin" as applying only to BLOCK elements --which makes some sense-- so it turns each link into a separate block/line.) But with a separate stylesheet for NN4 you can avoid the problem.

  10. #10
    SitePoint Evangelist
    Join Date
    Jul 2001
    Location
    UK
    Posts
    407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That would apply to all links, this should work:

    Code:
    P.dfs a {margin-right: 1em}

  11. #11
    morphine for a wooden leg randem's Avatar
    Join Date
    Jun 2002
    Location
    .chicago.il.us
    Posts
    957
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by TechSited
    That would apply to all links, this should work:

    Code:
    P.dfs A {margin-right: 1em}
    Er, that's what I meant to put.

  12. #12
    SitePoint Member
    Join Date
    Feb 2002
    Location
    Philadelphia
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, TechSited, you're right. I'd forgotten that shamrock only wanted it in one paragraph. (In any case, the problem with NN4 is the same.)

  13. #13
    SitePoint Zealot
    Join Date
    Dec 2001
    Location
    m
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    hm

    doesn't work either

    here is my code:




    <html>
    <head>
    <title>Test</title>
    <style>
    P.dfs A {margin-right: 1em}
    </style>
    </head>

    <body>
    <P class="dfs"><a href="1.shtml">1</a> <a href="2.shtml">2</a>
    <a href="3.shtml">3</a> <a href="4.shtml">4</a>
    <a href="5.shtml">5</a> <a href="6.shtml">6</a>
    <a href="7.shtml">7</a> <a href="8.shtml">8</a> <a href="9.shtml">9</a> <a href="10.shtml">10</a></P>
    </body>
    </html>

  14. #14
    SitePoint Evangelist
    Join Date
    Jul 2001
    Location
    UK
    Posts
    407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works ok here (IE6)

  15. #15
    Grumpy Mole Man Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Slightly OT, but here's a tip if you decide to do a site with a load of links seperated only by spaces. Having links that are only seperated by spaces is bad for accessibility, and can look bad on browsers that don't support CSS> The best solution I have found is to do this:
    Code:
    <a href="#">a link</a> <span class="hidden"> | </span> 
    <a href="#">a link</a> <span class="hidden"> | </span> 
    <a href="#">a link</a> <span class="hidden"> | </span> 
    <a href="#">a link</a> <span class="hidden"> | </span>
    Then set a rule in your CSS like this:
    Code:
    .hidden { display: none; }


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
  •