tab dots? 2

admoore · Jan 16, 2006

Does anyone know any way to fill the white space in a column with dots, as is done with items and prices, for example on a menu...

item1.........$9.99
item2bbb-.....$5.95
no_4.........$18.95

etc...

it needs to scale with the column width... It's easy in page design apps but I know of no way to make this work dynamically with a non-monospaced font...

TIA,

-Allen

Vragabond · Jan 16, 2006

Your best bet is to repeat a simple graphic with one black dot and one transparent dot across the x axis and place it at the bottom. If you have an empty column for that, the solution is pretty simple, if not, you will need to superimpose another background where you don't want dots.

admoore · Jan 16, 2006

If I understand your suggestion correctly, that wouldn't really work with items of varying width in the first column- the idea is to make item descriptions and prices left and right justified, respectively- while filling the varying width space in between with dots...

Vragabond · Jan 16, 2006

It would actually work with superimposing. Here's a simple explanation.

You have two columns, item and price. In item you have some text, which you will put inside a span. You will give the dotted picture background repeated on x axis and positioned somewhere at the bottom to the item cells. You will then give white (or whatever is your table background) background to the span and use padding to make sure the span covers the default cell background underneath.

admoore · Jan 17, 2006

The problem which I left unmentioned is that I can't use "background" images because it must, by default, print..

manarth · Jan 17, 2006

I know of no way to make this work dynamically with a non-monospaced font...

Here's the principal - I've not tested it, but I'm sure you'll be able to implement it from this.
[ul][li]Make a really wide image (as wide as the widest browser window you can imagine visiting your site - say, 2048px) which contains those dots, repeated the entire width of the image.[/li]
[li]Put the image within a div which uses overflow:hidden[/li]
[li]position the div absolutely within the container, making it 100% wide. (You'll probably need a z-index value)[/li]
[li]Put the text in a span which has a background colour applied[/li]
[/ul]

Code:

<div class="item">
  <div class="dots">
   <img src="dots.gif" alt="" />
  </div>
  <span class="name">item1</span>
  <span class="price">$9.99</span>
</div>


<div class="item">
  <div class="dots">
   <img src="dots.gif" alt="" />
  </div>
  <span class="name">item2bbb-</span>
  <span class="price">$5.95</span>
</div>

<div class="item">
  <div class="dots">
   <img src="dots.gif" alt="" />
  </div>
  <span class="name">no_4</span>
  <span class="price">$18.95</span>
</div>

and some (untested) css:

Code:

div.item {
  position: relative;  [COLOR=gray]/* makes this the parent for div.dots' position:absolute */[/color]
}
div.dots {
  overflow: hidden;
  position: absolute;
  z-index: -1;
  top: 15px;
  left: 0;
  width: 100%;  [COLOR=gray]/* or maybe width:auto.  or it could be one for IE and another for Moz. */[/color]
}
div.item span {
  background-color: #fff;
}
div.item span.name {
  float: left;
}
div.item span.price {
  float: right
}

I'm fairly sure those float statements won't work very well, but you get the idea.

---
Marcus
better questions get better answers - faq581-3339
accessible web design - zioncore.com

glenmac · Jan 18, 2006

Like this?

Code:

<style> 
#dot{
position:relative;
bottom:3px;
border-bottom:dotted;
width:10%
}
</style>
<div>item name&nbsp;<Span id = "dot">&nbsp;</span>&nbsp;2.98
</div>

Glen

http://lantzvillecomputers.com

Foamcow · Jan 18, 2006

I did it this way.

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>Dotted list</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
	
	* {
		margin:0;
		padding:0;
	}

	ul.priceList {
		list-style:none;
		float:left;
		display:block;
	}

	ul.priceList li {
		background:url(images/dot.gif) repeat-x left bottom #fff;
		display:block;
		float:left;
		margin-bottom:4px;
	}

	.item {
		display:block;
		float:left;
		clear:left;
		padding:0 3px;
		background-color:#fff;
	}

	.price {
		display:block;
		float:right;
		padding:0 3px;
		background-color:#fff;
	}
</style>
</head>

<body>
<ul class="priceList">
<li><span class="item">An Item</span><span class="price">£11.95</span></li>
<li><span class="item">Another Item</span><span class="price">£22.50</span></li>
</ul>
</body>
</html>

The image dots.gif is just a 10px by 5px image with a 4 pixel dot in the bottom left corner.

Not fully tested but seems to work OK in IE and FF.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

Foamcow · Jan 18, 2006

I uploaded a working version to

http://www.foamcow.com/tests/dotlist/

Thinking about it, perhaps a more semantic way to do this would be a with a definition list. Using the <dt> for the item, the <dd> for the price.
The problem then, being how to apply the dotted background.

It should be possible to do using more than one <dd> per <dt> (I think that is valid) but I think it might become more of a headache than just using an unordered list.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

Foamcow · Jan 18, 2006

I've added a method using a definition list <dl>.
Same URL as above.
It seems to work, but it's not as robust as the <ul> method.
I'm working on a better way using a definition list.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

admoore · Jan 18, 2006

Foamcow:
Thank you very much for your help- your method works great; however, since it uses a "background" attribute for the dots, the default browser behaviour is to not print the dots when printing (on paper...)- and the primary use for this app relies upon the formatting of the printed page output.

Again thanks; but I have to get it to print, too...

Vragabond · Jan 18, 2006

Foamcow's code could easily be persuaded to use [tt]border-bottom: 2px dotted black;[/tt] to satisfy your printing needs.

Foamcow · Jan 18, 2006

Hmmm, applying the border method to the ul technique...
It doesn't quite work as the border is displayed beneath the item and price. It would be possible to reposition these I guess, but it just feels messy to me.

I still think there is a really neat way to do this with a definition list.
I'll sleep on it and see if I can come up with something in the morning.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

Foamcow · Jan 18, 2006

Take a look at the URL now.

http://www.foamcow.com/tests/dotlist/

I've tweaked the ul method to use a border bottom.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

Vragabond · Jan 18, 2006

Foamcow, have a star on me. I was always way too lazy to do something like this, but your example really looks great.

Foamcow · Jan 19, 2006

Thanks Vragabond.

I slept on it... and I have a plan.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

Foamcow · Jan 19, 2006

Hmm, my plan didn't work. Back to the drawing board.

The problem is that there is a white background on the item and the price in order to hide the dots beneath them.

If backgrounds aren't set to print then you see the dots under the item and price.

My plan was to narrow the width of the list and then use negative margins to shunt the item and price outside the list.
First attempt worked ok in IE but FF went bananas

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

Tarwn · Jan 23, 2006

Well, similar to the direction you are going:

http://web-graphics.com/mtarchive/ItalianMenu.html

Foamcow · Jan 23, 2006

There you go.. that's what I was trying to do before I got distracted!

Use a <dl> with 2 <dd> tags for each <dt>

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

admoore · Jan 23, 2006

Dots still don't print by default though; since they are defined as a background image...

-Allen

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

tab dots? 2

IS-IT--Management

Programmer

IS-IT--Management

Programmer

IS-IT--Management

Programmer

Technical User

Programmer

Programmer

Programmer

IS-IT--Management

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

IS-IT--Management

Similar threads

Log in

Part and Inventory Search

Sponsor