Page 1 of 1
CSS - How much space a character takes up
Posted: Wed Nov 01, 2006 12:45 pm
by Luke
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...
Posted: Wed Nov 01, 2006 12:58 pm
by alex.barylski
Use a fixed width font: Courier New, etc...?
Posted: Wed Nov 01, 2006 1:03 pm
by Luke
eww!

Posted: Wed Nov 01, 2006 1:27 pm
by John Cartwright
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>
Posted: Wed Nov 01, 2006 1:32 pm
by Luke
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!
Posted: Wed Nov 01, 2006 1:56 pm
by RobertGonzalez
You can try using a text-align: justify in combination with letter-spacing using ex or em as a measurement. Maybe...?
Posted: Wed Nov 01, 2006 2:03 pm
by Luke
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.
Posted: Wed Nov 01, 2006 4:17 pm
by Zoxive
What about letter-spacing?
Code: Select all
<style>
letter-spacing:10px;
</style>
-NSF
Posted: Wed Nov 01, 2006 4:20 pm
by Luke
that determines the space between letters... I'm talking about the space letters actually take up. Thanks for the effort though!

Posted: Thu Nov 02, 2006 12:50 am
by matthijs
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)