Textbox to look like an Odometer

[jfrost10]

Interesting problem on my hands...

I need to make a text box to look like a odometer (thing that records the km/miles on a car).

At first I thought of just having some sort of <div>, set its background image to an image I have, and then have the text just write overtop of it. But I can't get things to line up as nicely as I'd like.

Has anyone done something similar like this?

Thanks,

D

 

[RISTMO]

<textarea style=&quot;background-image:url('bg.gif');&quot;>You can do the same thing here...</textarea>

Rick

-----------------------------------------------------------

http://www.ristmo.com/

RISTMO Designs

http://www.arabchurch.com/

Arab Church

http://www.reference-guides.com/

Reference Guides

 

[jfrost10]

the problem with that is the lines of the odometer are part of the background image, and since the numbers would just appear on top, its not obvious how to get the numbers to appear exactly between the lines of the image. I need it to look like:

---------------------
|0|1|2|3|4|5|6|7|8|9|
---------------------

with all the lines being the image and the numbers being the digits that are entered into the textbox/textarea/whatever control.

D

 

[clarkin]

use a fixed-width font like courier for the text box & use css (+ trial n error) to get it to line up nicely.

would like to see the finished textbox myself when you have it done


Posting code? Wrap it with code tags: [ignore]

[/ignore][code]CodeHere

[ignore][/code][/ignore].

 

[jfrost10]

Hey, thats not a bad idea. i'll let you know how it goes.

Thanks,

D

 

[mwolf00]

how about something like this...

<style>
span {border:1px solid black;}
</style>

<span>2</span><span>1</span><span>3</span><span>5</span><span>4</span>

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook

 

[clarkin]

Whatever happened to this? Looked interesting

Posting code? Wrap it with code tags: [ignore]

[/ignore][code]CodeHere

[ignore][/code][/ignore].