Question

Below i have hardcoded dotted lines on my menu between the name and image, I cant figure out how to get dotted lines that adjust to the width between where i have them now.

This is the code below that i have. I basically want to remove the hardcoded ….. and make it better somehow with a repeated image inside or just something easier, how can i approach this? I have been boggled with this problem for some time now…

  <script type="text/javascript">
  $(document).ready(function(){

  $('.serviceDesc').hide();
  $('.serviceName:first').addClass('active').next().show(); 

  $('.serviceName').click(function(){
  if( $(this).next().is(':hidden') ) { 
  $('.serviceName').removeClass('active').next().slideUp(); 
  $(this).toggleClass('active').next().slideDown(); 
  }
  return false; 
  });

  });
  </script>
  <style>
  #servicesContainer {
      width: 485px;
      height: 400px;
      margin: 0 auto;
      margin-top: 20px;
  }
  h2.serviceName {
      margin: 0;
      margin-bottom: 5px;
      margin-top: 5px;
      background-image: url(http://i.imgur.com/IcnZl.png);
      background-position: right top;
      background-repeat:no-repeat;
      height: 29px;
      line-height: 24px;
      width: 480px;
      font-size: 18px;
      font-weight: bold;
      float: left;
      color:#000;
  }
  h2.serviceName a {
      color: #000;
      text-decoration: none;
      display: block;
  }
  h2.active {
      background-position: right bottom;
  }
  .serviceDesc {
      margin: 0 0 10px;
      padding: 0;
      overflow: hidden;
      width: 480px;
      clear: both;
  }
  .serviceDesc .block {
  }
  .serviceDesc .block p {
      color: #413f44;
      margin: 0;
      font-size:18px;
  }
  </style>

  <div id="servicesContainer">
    <h2 class="serviceName"><a href="#">Text...............................................................................</a></h2>
    <div class="serviceDesc">
      <div class="block">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. </p>
      </div>
    </div>
    <h2 class="serviceName"><a href="#">Text...............................................................................</a></h2>
    <div class="serviceDesc">
      <div class="block">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
      </div>
    </div>
    <h2 class="serviceName"><a href="#">Text...............................................................................</a></h2>
    <div class="serviceDesc">
      <div class="block">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.<br />
          <br />
        </p>
      </div>
    </div>
    <h2 class="serviceName"><a href="#">Text...............................................................................</a></h2>
    <div class="serviceDesc">
      <div class="block">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
      </div>
    </div>
    <h2 class="serviceName"><a href="#">Text...............................................................................</a></h2>
    <div class="serviceDesc">
      <div class="block">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. </p>
      </div>
    </div>
    <h2 class="serviceName"><a href="#">Text...............................................................................<br />
      </a></h2>
    <div class="serviceDesc">
      <div class="block">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. </p>
      </div>
    </div>
    <h2 class="serviceName"><a href="#">Text...............................................................................</a></h2>
    <div class="serviceDesc">
      <div class="block">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
      </div>
    </div>
    <h2 class="serviceName"><a href="#">Text...............................................................................</a></h2>
    <div class="serviceDesc">
      <div class="block">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
      </div>
    </div>
  </div>

You can view an example here:
http://jsfiddle.net/K7MHK/

Answer 1

creating a with a repeated by x background image of a dot would be the easiest way.
However you would need to set the element it is in to width:100% or whichever width you want it at.

eg.

<html>
  <head>
    <style>
      .filler{
        background: url(dot.png) bottom left repeat-x;
        float:left;
        width:80%;
      }
      .floating_text {
        float:left;  
      }
    </style>
  </head>
  <body>
    <h2 class="serviceName"><a href="#">
      <span class="floating_text">Text</span>
      <span class="filler">&nbsp;</span>
    </a></h2>
  </body>
</html>

The span appears to hook into the <h2></h2> height and not the <a></a> height, this is what is causing the problem with it appearing on two lines.

The reason the dots appear to be in the middle of the span in your example is because of your image, remove the white at the bottom and it will appear as normal.