Back To Website Design Forum

justify command

  • stickfigure
  • Beginner
  • Beginner
  • No Avatar
  • Joined: Mar 28, 2004
  • Posts: 49
  • Status: Offline

Post April 2nd, 2004, 12:25 am

is it possible to use the
Code: [ Select ]
<div align="justify">
command and have the items centered at the same time?
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post April 2nd, 2004, 12:25 am

  • conorific
  • Proficient
  • Proficient
  • User avatar
  • Joined: Jan 12, 2004
  • Posts: 350
  • Loc: NY
  • Status: Offline

Post April 2nd, 2004, 1:15 pm

Uhm...what items? I'm not exactly clear on what you're asking. I have several answers to several possible questions concerning this...could you provide an example or some more detail?
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Joined: Jun 15, 2003
  • Posts: 4583
  • Loc: Maryland
  • Status: Offline

Post April 2nd, 2004, 6:02 pm

*agrees with above statement* Simply not enough to explain what you want.
Pixel Acres V2
  • UNFLUX
  • Genius
  • Genius
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 6382
  • Loc: twitter.com/unflux
  • Status: Offline

Post April 2nd, 2004, 6:38 pm

text in a table, yes. otherwise it simply centers images.
UNFLUX.FOTO
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: May 28, 2003
  • Posts: 23404
  • Loc: Woodbridge VA
  • Status: Offline

Post April 2nd, 2004, 6:44 pm

It is enough information. He wants to center the text, but wants the text to be justified. This is a very quick example:
http://atnopro.com/ozzu/test_center.html

Here's the code to do it:
Code: [ Select ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Page title</title>
<style>
body {
text-align:center;
}
div {
text-align:justify;
width:400px;
}

</style>
</head>
<body>

<div>
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
</div>

</body>
</html>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  3. <html>
  4. <head>
  5. <title>Page title</title>
  6. <style>
  7. body {
  8. text-align:center;
  9. }
  10. div {
  11. text-align:justify;
  12. width:400px;
  13. }
  15. </style>
  16. </head>
  17. <body>
  19. <div>
  20. "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
  21. </div>
  23. </body>
  24. </html>


//For those who follow some of my posts, please forgive the lack of a complete doctype in the example. I did that quickly from an old template. The trick here is to remember how inheritance works in style sheets. Notice --no tables.
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Joined: Jun 15, 2003
  • Posts: 4583
  • Loc: Maryland
  • Status: Offline

Post April 2nd, 2004, 7:00 pm

If you want this to work cross platform it is important to remembre that Mozilla does not treat div's as text elements, so "text-align" will not center divs. You need to do this so it is compatible with most browsers:

Code: [ Select ]
body {
margin-left:auto;
margin-right:auto;
text-align:center;
}
  1. body {
  2. margin-left:auto;
  3. margin-right:auto;
  4. text-align:center;
  5. }
Pixel Acres V2
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: May 28, 2003
  • Posts: 23404
  • Loc: Woodbridge VA
  • Status: Offline

Post April 2nd, 2004, 7:03 pm

Um thanks...b_heyer...forgot to check the Mozilla flavor. You are correct.

///hmmm but not quite. Now you're making me work. brb
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: May 28, 2003
  • Posts: 23404
  • Loc: Woodbridge VA
  • Status: Offline

Post April 2nd, 2004, 7:20 pm

OK -- here's the correction for crossbrowser compatibility, based on B_heyer's point:

http://atnopro.com/ozzu/test_center_test2.html

Code: [ Select ]
<!DOCTYPE html public "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

<html>
<head>
<title>Page title</title>
<style>
body {
margin-left:33.3%;
margin-right:33.3%;
text-align:center;
}
div {
text-align:justify;
}

</style>
</head>
<body>

<div>
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
</div>

</body>
</html>
  1. <!DOCTYPE html public "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
  3. <html>
  4. <head>
  5. <title>Page title</title>
  6. <style>
  7. body {
  8. margin-left:33.3%;
  9. margin-right:33.3%;
  10. text-align:center;
  11. }
  12. div {
  13. text-align:justify;
  14. }
  16. </style>
  17. </head>
  18. <body>
  20. <div>
  21. "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
  22. </div>
  24. </body>
  25. </html>


I delimited in the original example to 400PX -- if you use "auto" if there isn't a prior defined width it will default to full screen. The 33.3% roughly gives the same dimension. This example , I think, portrays the solution to the original question.
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.

Page 1 of 1

Post Information

  • Total Posts in this topic: 8 posts
  • Users browsing this forum: No registered users and 191 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.