JavaScript and client side scripting.
Moderator: General Moderators
Luke
The Ninja Space Mod
Posts: 6424 Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA
Post
by Luke » Wed Nov 01, 2006 12:45 pm
Is there a css property that designates how many pixels a single character should take up? I have markup like this...
Code: Select all
<div class="star_spacing">12345</div>
<div>
<img src="#" width="10">
<img src="#" width="10">
<img src="#" width="10">
<img src="#" width="10">
<img src="#" width="10">
</div>
I need for the numbers to line up right with the images... so each character needs to space out 10 pixels...
alex.barylski
DevNet Evangelist
Posts: 6267 Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg
Post
by alex.barylski » Wed Nov 01, 2006 12:58 pm
Use a fixed width font: Courier New, etc...?
Luke
The Ninja Space Mod
Posts: 6424 Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA
Post
by Luke » Wed Nov 01, 2006 1:03 pm
eww!
John Cartwright
Site Admin
Posts: 11470 Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:
Post
by John Cartwright » Wed Nov 01, 2006 1:27 pm
Code: Select all
<style>
#star_spacing ul {
margin: 0;
padding: 0;
list-style: none;
clear: both;
}
#star_spacing li {
float: left;
width: 10px;
border: 1px solid #000;
text-align: center;
}
</style>
<div class="star_spacing" id="star_spacing">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul>
<li><img src="#"></li>
<li><img src="#"></li>
<li><img src="#"></li>
<li><img src="#"></li>
<li><img src="#"></li>
</ul>
</div>
Last edited by
John Cartwright on Wed Nov 01, 2006 1:32 pm, edited 1 time in total.
Luke
The Ninja Space Mod
Posts: 6424 Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA
Post
by Luke » Wed Nov 01, 2006 1:32 pm
Thanks Jcart... that's basically how I have it now, but I was just hoping there was some sort of css property that could make it easier. Oh well. Thanks both of you guys!
RobertGonzalez
Site Administrator
Posts: 14293 Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA
Post
by RobertGonzalez » Wed Nov 01, 2006 1:56 pm
You can try using a text-align: justify in combination with letter-spacing using ex or em as a measurement. Maybe...?
Luke
The Ninja Space Mod
Posts: 6424 Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA
Post
by Luke » Wed Nov 01, 2006 2:03 pm
good idea everah... I'll have to give that a try when I get back around to that job. seriously... that's a damn good idea. thanks.
Zoxive
Forum Regular
Posts: 974 Joined: Fri Apr 01, 2005 4:37 pm
Location: Bay City, Michigan
Post
by Zoxive » Wed Nov 01, 2006 4:17 pm
What about letter-spacing?
Code: Select all
<style>
letter-spacing:10px;
</style>
-NSF
Luke
The Ninja Space Mod
Posts: 6424 Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA
Post
by Luke » Wed Nov 01, 2006 4:20 pm
that determines the space between letters... I'm talking about the space letters actually take up. Thanks for the effort though!
matthijs
DevNet Master
Posts: 3360 Joined: Thu Oct 06, 2005 3:57 pm
Post
by matthijs » Thu Nov 02, 2006 12:50 am
Controlling the exact size and spacing of letters is almost impossible. Even on the same system there are differences between browsers. Couldn't you just code it in such a way that you don't depend on the exact font-size?
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<style type="text/css" media="screen">
* {margin:0;padding:0;}
body {color:#555;font:arial,sans-serif;}
ul {list-style:none;margin:10px;}
ul li {float:left;width:10px;}
ul li span {display:block;width:10px;font-size:10px;text-align:center;}
ul li img { border:0;}
</style>
</head>
<body>
<ul>
<li><span>1</span><img src="images/star.gif" width="10" alt=""></li>
<li><span>2</span><img src="images/star.gif" width="10" alt=""></li>
<li><span>3</span><img src="images/star.gif" width="10" alt=""></li>
<li><span>4</span><img src="images/star.gif" width="10" alt=""></li>
<li><span>5</span><img src="images/star.gif" width="10" alt=""></li>
</ul>
</body>
</html>
Just a quick example, works in FF. You can probably improve it more (using % or ems so you can even scale the textsize)