Dotted Line Html Span - css

Question

I have a menu coded in html here, but i need a dotted line to span between the Names and Prices, How would i go about doing that here? I'm kinda lost haha.
You can see it here.
http://mystycs.com/menu/menuiframe.htm
I know i can use css to do it, but how would i get to it span between those two.
Thanks =)

Answer 1

<style type="text/css">
.menugroup{
width:100%;
}
.itemlist{
list-style-type: none;
}
.separator{
margin: 5px;
width:50%;
border-bottom: 1px dotted #000
}
</style>
<div class="menugroup">
<ul class="itemlist">
<li>item name<span class="separator"></span>price</li>
</ul>
</div>

Answer 2

Wow, where to start? What you have is a number of lists with headers above each, some with notes above and/or below, so that's the markup you should be using:
<h2>Egg Platters</h2>
<div class="note">Served With Home Fries & Toast</div>
<ul>
<li><span class="item">Two Eggs Any Style</span><span class="separator"> </span><span class="price">2.75</span></li>
(etc.)
</ul>
<div class="note">Add On Any Two Slices ...</div>
<div class="note large">Add Coffee for $0.50 with ...</div>
Your class="price" is fine, but class="red" and <strong class="bold"> are poor choices -- name the class based on why it's red (like my "note"). Using headings eliminates the need for "bold" to make the <strong> text bigger.
Now, I put in the <span class="separator"> so you could give widths, or use floats, and allow the separator blank space to expand to fill between the item and the price, and you could style it with something like
.separator {
border-bottom: 1px dotted #333;
}
EDIT:
I agree with ClarkeyBoy's comment too; limiting the overall width would help readability, and TripWired's link shows some good method (and uses essentially what I was suggesting)

Answer 3

Have you considered something like this?
http://5thirtyone.com/archives/776

Answer 4

Normally I wouldn't suggest tables... but this case would fit a table quite nicely.
I'd forgo dotted lines as they would be very bad for usability (if you've got a page of dotted lines, it's very cluttered and hard to follow each one - you'd probably use your finger on the screen like you would a menu - not good).
Instead why not a table with alternate row colours, which might look quite nice. Then have a rollover state that would highlight the whole row, to make it completely obvious for the user what each item costs.
There's a great example tutorial with code here (see example 3): http://bit.ly/9jTnAx
The code is at the bottom of the page, and is pretty much just copy paste from your end.
Good luck!

Answer 5

I would use a background x repeated .gif on the whole line and hide it with a white bg color on the float left item name and float right item price.
.line{
clear:both;
margin-bottom:15px;
background:transparent url(img/common/dot.gif) repeat-x scroll 0 0;
height:22px;
}
.label{
background-color:#FFF;
padding-right:2px;
float:left;
}
.price{
float:right;
background-color:#FFF;
padding-left:2px;
}

Answer 6

<style>
table th, td{
border-bottom: 1px dotted #CCCCCC;
}
HTML code block:
<h3>Current House Trends</h3>
<table class="table" border="0">
<tbody>
<tr>
<th>Price</th>
<td>$500,000</td>
</tr>
<tr>
<th>Market</th>
<td>78</td>
If you want to put '-' in between you can add an extra column in the middle which contains '-' or similar of your choice.