Justify

[M.O.S. Studios]

I want to make a title that justifies its self to the width of a div,

 

I tried using 'text-align: justify;'

the only problem is that when the title is only one word long it dons't spread its self out.

 

is there a setting i can use to change that??

[JustLikeIcarus]

I think you may be wanting the "letter-spacing" property if you want the text to stretch.  Ofcourse you will have to add some js if you want it to be dynamic.

[M.O.S. Studios]

the div is set to 150px,

so when the screen resizes the div stays the same.

 

its a menu bar, so I'm going to use this class for each item.

I just want the first and last letter of each item to line up horizontally

 

[JustLikeIcarus]

Then you would have to find the longest of all the items and adjust the letter spacing of all the rest based on their length.  Thats just alot of work that would most likely break the moment someone increased their text size in the browser. 

 

If your just doing this for looks then why not do something like float an icon to the right side of each item.  Then even though the letters aren't lining up the icons would be and it would look nice.

[M.O.S. Studios]

wont really work with the design

 

basically i want the M in members and the P in products to start at the left corner of the black box under them

 

and the S in members and PRODUCTS to end at the right corner of the box under them.

 

 

here is the code

 

basicly i want the

 

html

	<div class="side_bar">
		<div class='bgside'>
			<span class='title'>
				MEMBERS
			</span>
			<div class='right_content'>
				E-MAIL:<br><input type='text' size='15' maxlength='25'><br>
				PASSWORD:<br><input type='password' size='15' maxlength='25'>
			</div>
		</div>

		<div class='bgside'>
			<span class='title'>
				PRODUCTS
			</span>
			<div class='right_content'>
				Games
				Tools
			</div>
		</div>

	</div>

 

css

.side_bar{
   position: relative;
   float: right;
   width: 150px;
   min-height: 800px;
   background: fixed url(../images/bg/side_bg.png);
}

.side_bar .bgside{
   background: #f3a048;
   width: auto;
   margin: 5px 5px 5px 5px;
}

.side_bar .bgside span.title{
   min-height: 20px;
   background: transparent;
   text-align: justify;
   letter-spacing: 
   margin: 0px 5px 0px 5px;
}

.side_bar .bgside .right_content{
   background: #000000;
   width: auto;
   height: auto;
   margin: 0px 10px 10px 10px;
   border-bottom:10px solid #f3a048;
   color: #ffffff;
   font-size: 10px;
   text-align: left;
}

 

im trying to find a js script that can ajust the character spacing.

[Chezshire]

What about something like this?

 

object.style.letterSpacing="?px" You'd want to replace the question mark with a specific value, but maybe that would work for you?

[haku]

If you are absolutely desparate to do this, you can put each letter in a span and work with it from there:

 

<span id="m1">m</span><span id="e1">e</span><span id="m2">m</span><span id="b1">b</span><span id="e2">e</span><span id="r1">r</span><span id="s1">s</span>

 

From there you can adjust the margins on each letter individually.

 

 

[M.O.S. Studios]

After Doing some research,

 

I found that i can use text-justify: distribute; in the css to get what i needed.

 

even though a lot of sites recommend this, firefox keeps seeing it as an error.

 

has any one heard of this??

[JustLikeIcarus]

I think you'll get better results with text-justify: newspaper; which is meant for the latin character set.  distribute is more for Asian I believe.

[M.O.S. Studios]

well the description of distribute is exactly what i need,

but firefox has a problem with the 'text-justify' part of it.

[JustLikeIcarus]

OK found out that text-justify started as  IE5 proprietary.  It has been added to CSS3 spec but is not in use yet.

 

So it basically is a no go.

[FaT3oYCG]

do what haku said as it seems like the best viable solution for all browsers at this time, align the text in all of those spans centrally and set the width to 100% / letters in string, i would use php to loop through the words if i was you as it will genrate the code accordingly if done correctly.