Skip navigation
RSwarriorky
RSwarriorky Calculating status...
Currently Being Moderated

How to adjust spacing between dots in a dotted Horizontal line?

Apr 10, 2012 1:26 PM

Tags: #dreamweaver_cs5 #lines #bulleted

This may sound basic but I spend hours trying to find a way to track out a bulleted horizontal line, basically it would be like a dash line but with bullets. I created a CSS rule to create my horizontal bulleted line but can't find a way to adjust the space between the bullets, another words tracking it out... You can't use letter spacing because it's code and not individual characters.

 

Thanks!

 

David

805 Views   6 Replies   Latest reply: RSwarriorky, Apr 11, 2012 11:14 AM
 
Replies
  • hans-g.
    Currently Being Moderated
    1. hans-g.,
    Apr 10, 2012 2:41 PM   in reply to RSwarriorky
    Report

    Hi David,

     

    if I understand you in the right way, you could use this and play a little bit with the different parameters.

     

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
           "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>CSS: different dividing lines</title>
    </head>
    <body>

     

    <p>section 1</p>
    <hr style="width:300px; color:yellow; background-color:yellow; height:50px;
      margin-right:0; text-align:right; border:2px dashed blue;">
    <p>section 1</p>

     

    <p>section 2</p>
    <hr style="width:300px; color:yellow; background-color:green; height:50px;
      margin-right:0; text-align:right; border:5px dashed red;">
    <p>section 2</p>

     

    <p>section 3</p>
    <hr style="width:300px; color:deeppink; background-color:mediumslateblue; height:50px;
      margin-right:0; text-align:right; border:10px dashed darkturquoise;">
    <p>section 3

    </p>


    </body>
    </html>

     

     

     

    Hans-Günter

     
    |
    Mark as:
  • RSwarriorky
    Currently Being Moderated
    2. RSwarriorky,
    Apr 11, 2012 6:50 AM   in reply to hans-g.
    Report

    Hans,

     

    Here is what I need to do. Below is a screen shot of my problem. Also attached is my setting in the CSS stylesheet. I want to add space between the dots in the  dotted line.

     

    Thanks!

     

    David

     

    dottedline.png

     

    Screen Shot 2012-04-11 at 9.48.46 AM.png

     
    |
    Mark as:
  • SnakEyez02
    Currently Being Moderated
    3. SnakEyez02,
    Apr 11, 2012 7:54 AM   in reply to RSwarriorky
    Report

    Not possible with CSS.  You would need to use an image and use the border-image property.

     
    |
    Mark as:
  • osgood_
    Currently Being Moderated
    4. osgood_,
    Apr 11, 2012 8:51 AM   in reply to RSwarriorky
    Report

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>Untitled Document</title>

    <style type="text/css">

    #wrapper {

        width: 980px;

        margin: 0 auto;

    }

    .dottedLine  {

    position: relative;

    width: 980px;

     

    }

    .left {

    float: left;

    width: 740px;

    font-family: verdana, arial, helvetica, sans-serif;

    font-size: 20px;

    letter-spacing: 0;

    margin-bottom: 20px;

    }

    .right {

    float: left;

    width: 235px;

    font-family: verdana, arial, helvetica, sans-serif;

    font-size: 11px;

    letter-spacing: 0;

    text-align: right;

    padding: 1em 5px 0 0;

    margin-bottom: 20px;

    }

    .dots {

    position: absolute;

    left: 0;

    top: 20px;

    letter-spacing: 6px;

    width: 980px;

    overflow: hidden;

    }

     

    </style>

     

    </head>

    <body>

    <div id="wrapper">

    <p class="dottedLine"><span class="left">Bringing brand design into the art fair</span><span class="right">March 30, 2012</span><span class="dots">........................................................ ..........................................</span></p>

    <p>Some text goes here</p>

     

    <p class="dottedLine"><span class="left">Bringing brand design into the art fair</span><span class="right">March 30, 2012</span><span class="dots">........................................................ ..........................................</span></p>

    <p>Some text goes here</p>

     

    </div>

    </body>

    </html>

     
    |
    Mark as:
  • hans-g.
    Currently Being Moderated
    5. hans-g.,
    Apr 11, 2012 10:59 AM   in reply to RSwarriorky
    Report

    Hi David,

     

    here the two versions (osgood_'s/mine) in a "live environment": http://dala-laegret1963.de/AdobTest/trennlinien/trennlinien.php.

     

    Hans-Günter

     
    |
    Mark as:
  • RSwarriorky
    Currently Being Moderated
    6. RSwarriorky,
    Apr 11, 2012 11:14 AM   in reply to hans-g.
    Report

    Thanks! I will give it a try.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points