Geek Answers Handbook

Dotted Line Html Span

I have a menu encoded in html here, but I need a dotted line for markup between names and prices. How can I do it? I lost a little haha.

You can see it here.

http://mystycs.com/menu/menuiframe.htm

I know I can use css for this, but how would I get to it between the two.

Thanks =)

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

Wow, where to start? You have several lists with headings above each, some with notes above and / or below, so the markup you should use is:

 <h2>Egg Platters</h2> <div class="note">Served With Home Fries &amp; 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 ok, but class="red" and <strong class="bold"> are bad choices - name the class based on why it is red (for example, my "note"). The use of headings eliminates the need for "bold" to make the text <strong> larger.

Now I put in <span class="separator"> so that you can give width or use floats, and allow the empty space of the separator to expand to fill between the element and the price, and you can create it with something like

 .separator { border-bottom: 1px dotted #333; }

EDIT: I also agree with the ClarkeyBoy comment; limiting the overall width will help readability, and the TripWired link shows a good method (and uses essentially what I suggest)

+3
source

Did you find something like this?

http://5thirtyone.com/archives/776

+2
source

Normally, I would not suggest a table ... but this case would be quite consistent with the table.

I would refuse the dashed lines, since they would be very bad for ease of use (if you have a page with dashed lines, it is very cluttered and it is difficult to follow each of them - you will probably use your finger on the screen, as you would have a menu - not good).

Instead, why not a table with alternating row colors, which might seem pretty nice. You will then receive a rollover state that will highlight the entire line to make it completely obvious to the user that each element is worth it.

Here is a great example tutorial with the code here (see example 3): http://bit.ly/9jTnAx

The code is at the bottom of the page, and pretty much just copy the paste from your end.

Good luck

+2
source

I would use the background x repeat.gif on the entire line and hide it with a white bg in the name of the element with a float and put the right price.

.String {clear: both; bottom edge: 15px; background: transparent url (img / common / dot.gif) repeat-x scroll 0 0; height: 22px; } .mark {background color: #FFF; padding to the right: 2px; sail left; } .price {swim: right; background color: #FFF; upholstery on the left: 2px; }

+1
source 
 <style> table th, td{ border-bottom: 1px dotted #CCCCCC; }

HTML code:

 <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 a “-” between them, you can add an extra column in the middle that contains a “-” or similar of your choice.

0
source

More articles:


All Articles