INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

why does'nt my text-align:justify work?

why does'nt my text-align:justify work?

(OP)
why does'nt my text-align:justify work?

text-align: right, text-align:center and text-align:left work. What am I missing about the text-align:justify?

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
body{font-family:courier;text-transform:uppercase;text-align:center;}
body,h1,h2,h3,h4,h5,h6,span,ul,li {margin:0;padding:0;}
#container {text-align:left;margin:0 auto;width:600px;border:50px solid black;}
header h1 {color:blue;}
header span {display:none;}
#content {background-color:black;color:white;font-size:60px;width:600px;border:5px solid

white;letter-spacing:15px;text-align:justify;}
footer h1 {color:blue;}
footer span {display:none;}
</style>
</head>
<body>
<div id="container">
<header><h1><span>header</span></h1></header>
<div id="content">
<h2>design</h2>
<h2>within</h2>
<h2>reach</h2>
</div>
<footer><h1><span>footer</span></h1></footer>

</div>
</html>

Thanks
Howard

RE: why does'nt my text-align:justify work?

Quote (csphard)

text-align: right, text-align:center and text-align:left work. What am I missing about the text-align:justify?

Content.

Justify works on paragraphs of text, you have none.

Basically justify makes all lines of equal length in a paragraph provided there is enough content for it to happen.

Your content div has 3 header elements which aren't a paragraph. Also since there's only one word there's no way for justify to align them because the way justify works is it adds spaces between works in such a way as to make the lines be of equal length. Provided there is enough text in the line for it to not make it to obvious its doing it.

It won't work in very short lines in relation to other lines, and it technically is only noticeable when you have several lines of text.

Headers (h1-h6) are block level elements and as such can't be justified, And in your case their contents are a single word so will not be justified either.

http://www.w3schools.com/cssref/pr_text_text-align...

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

RE: why does'nt my text-align:justify work?

(OP)
Thanks, I really appreciate your explaination. I went there and read the information from w3schools but it was not as clear as you were.

Thanks again.

RE: why does'nt my text-align:justify work?

Glad I could help.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

RE: why does'nt my text-align:justify work?

Just to clarify something vacunita said, test-align:justify does not only apply to paragraph elements. It'll apply to any element that has enough text in it to fill more than one line:

CODE

<DOCTYPE html>
<html>
<head>
<title>Table Test</title>
<style>
  #content {text-align:justify;}
</style>
</head>
<body>
  <div id="content">
    <h1>This is way too much text to make a sensible heading, but if your browser window is narrow enough it <em>will</em> be justified</h1>
  </div>
</body>
</html> 
It's just that it only really makes sense to apply text-align:justified to paragraphs of text - headings aren't usually long enough to be justified, and when they are they generally look terrible.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

RE: why does'nt my text-align:justify work?

(OP)
Thanks I really appreciate your help..

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close