CODEWITHSUNDEEP
csslinedotted-line
Strobo
Strobo

Reputation: 101

Line of dots between items

I am building a restaurant web site and menu. I need to get a "line of dots" between the menu item and the price. I need to get it without writing dots manually one by one. This feature should work automatically.

Is it possible to create this by using background of span or div etc?

What I have:

What I want:

Upvotes: 10

Views: 20904

Answers (7)

abogaard
abogaard

Reputation: 451

Here is solution using flexbox that spans an arbitrary distance between title and price

.table_of_contents {
    display:flex;
    div:first-child{
        flex:0 1 auto;
    }
    .dot{
        border-bottom: dotted 3px orange;
        height: 12px;
        margin: 0 5px 5px 5px;
        flex: 1 1 auto;
    }    
    div:last-child {
        display:flex;
        flex-direction:row;
        flex: 0 1 auto;
    }
}

Upvotes: 1

user3609266
user3609266

Reputation: 41

.text-div {
  background-image: linear-gradient(to right, #000 10%, rgba(255, 255, 255, 0) 0%);
  background-position: 0 14px;
  background-size: 10px 1px;
  background-repeat: repeat-x;
  width: 100%;
  height:25px;
}

.text-span {
  background: #fff;
  padding-right: 10px
}

.pull-right {
  float: right;
  padding-left: 10px
}
<ol>
  <li>
    <div class="text-div">
      <span class="text-span">Item:</span>
      <span class="text-span pull-right">$125.00</span>
    </div>
  </li>
  <li>
    <div class="text-div">
      <span class="text-span">Very long name of the item:</span>
      <span class="text-span pull-right">$20.00</span>
    </div>
  </li>
  <li>
    <div class="text-div">
      <span class="text-span">Not long name:</span>
      <span class="text-span pull-right">$30.00</span>
    </div>
  </li>
</ol>

Upvotes: 4

Ali Hasan
Ali Hasan

Reputation: 176

something like this?

ol li {
  font-size: 20px
}
.dot-div {
  border-bottom: thin dashed gray;
  width: 100%;
  height: 14px
}
.text-div {
  margin-top: -14px
}
.text-span {
  background: #fff;
  padding-right: 5px
}
.pull-right {
  float: right;
  padding-left: 5px
}
<ol>
  <li>
    <div class="dot-div"></div>
    <div class="text-div">
      <span class="text-span">Item one</span>
      <span class="text-span pull-right">400$</span>
    </div>
  </li>
  <li>
    <div class="dot-div"></div>
    <div class="text-div">
      <span class="text-span">Item two with long text</span>
      <span class="text-span pull-right">400$</span>
    </div>
  </li>
  <li>
    <div class="dot-div"></div>
    <div class="text-div">
      <span class="text-span">Item three midium</span>
      <span class="text-span pull-right">400$</span>
    </div>
  </li>
</ol>

JsFiddle

Upvotes: 1

Rob Derks
Rob Derks

Reputation: 314

Use a div with absolute positioning? White backgrounds for paragraphs? Valid for any length of menu-item-name. Play around with it, good luck!

<div class='item_wrapper'>
    <p class='item_name'>Marinated olives</p>
    <p class='item_price'>4,00€</p>
    <div class='dotted_line'></div>
</div>

.item_wrapper{
    width:100%;
    clear: both;
}
.dotted_line{
    border-top:dotted 2px orange;
    position:relative;
    width:100%;
    top:33px;
    z-index:-1;
}
p{
    position:relative;
    background:white;
    padding:0px 10px;
}
.item_name{
    float:left;
}
.item_price{
    float:right;
}

http://jsfiddle.net/MrgBM/

Upvotes: 1

Alex Char
Alex Char

Reputation: 33228

I think you look for something like this:

html

<div>
    <div>Marinated Olives</div>
    <div class="dot"></div>
    <div>4.00E</div>   
</div>

css

.dot{
    border-bottom: dotted 3px orange;
    width: 100px;
    float: left;
    position: relative;
    display: block;
    height: 12px;
    margin: 0 5px 0 5px;
}

div:first-child, div:last-child{
    float:left;
}

fiddle

You can play with width to adjust in your likes.

Also another approach using css :after

html

<div>
    <div id="dotted">Marinated Olives</div>   
    <div>4.00E</div>   
</div>

css

div{
    float:left;
}

#dotted::after{
    content: "..................";
    letter-spacing: 4px;
    font-size: 18px;
    color:orange;
    margin-left:20px;
}

fiddle

Here you can play with content and letter-spacing. Hope it helps :)

Upvotes: 5

Sam Denton
Sam Denton

Reputation: 425

You can use css for this.

If you just add 

border: thick dotted;

To the appropriate section of css. This will create a dotted boarder around the whole element it is applied to. If you wish to have just the dots below the element, then use:

border-bottom: thick dotted;

You can also use think dotted or just dotted if you want different sizes.

You can then add orange to get the color:

border-bottom: thick dotted orange;

Hope this helps :)

Upvotes: 0

bloomingsmilez
bloomingsmilez

Reputation: 421

You can use this code to generate the line:

    #helper{

    width:200px;
    border: 1px dashed orange;
}

Source here: http://jsfiddle.net/2j9BN/

Upvotes: 0

Related Questions