Text Alignment Options

[bigtrey90]

Look at the website I gave you, I wanted to know how to align the text perfectly like this website. I am using tables but it seems to not look good in FF or IE, so how do I align the text.

Example Webpage

[freeflow]

You can easily just use divs.

[bigtrey90]

that's what I using, but it's not really showing up right:

the code for the div text area inside a table:

CODE

#webmaster{
    position: absolute;
    top: 475px;
    left: 657px;
    font-family: arial;
    line-height: 9px;
    font-size: 8pt;
    color: #ffffff;
    width: 200px;
    height: 141px;
    }

[freeflow]

Ok what are you using? In your post above you said you were using tables? Why don't you just post your code and a link to the website its on. So that we can see what exactly you are trying to accomplish .

Edit// I wasn't talking about div textarea inside of a table. That can be your problem. If you want to use tables I suggest you read and use the ode provided here (since you've been having lots of problems with tables): http://pixelfx.org

You can also read:
http://tutorialtastic.co.uk/page/create_a_tableless_layout

But really upload the html file w/ image urls somewhere so we can see what your trying to accomplish. Its harder to tell if we can't see the image and everything put together.

[bigtrey90]

I am using Dreamweaver:

CODE

<style type="text/css">

#main{
    position: absolute;
    top: 0px;
    left: 156px;
    }
    
#links{
    position: absolute;
    top: 616px;
    left: 749px;
    }
    
#webmaster{
    position: absolute;
    top: 475px;
    left: 657px;
    font-family: arial;
    line-height: 9px;
    font-size: 8pt;
    color: #ffffff;
    width: 210px;
    height: 130px;
    }
    
.standard b, p b, B, strong{
    font-family: arial;
    font-size: 8pt;
    color: #d9c493;
    text-transform: uppercase;
    }
.i,em{
    font-family: arial;
    font-size: 8pt;
    color: #989597
    }
.u{
    font-family: arial;
    font-size: 8pt;
    color: #e4cfbd;
    }
</style>

here is the text:

CODE

<div id="webmaster">
  <table width="208" cellpadding="1" cellspacing="1" align: justify valign="top" >
        <img src="images/images/webmasterpic.png" align="left"><strong>John.</strong> tall. <em>16.</em> <u>April Fools baby.</u> skinny. black. cool. insecure. intelligent. <strong>friendly.</strong> loved. money. <em>school.</em> shopping. shoes. clothes. chains. dressing up for church. shiny things. <strong>myspace.</strong> internet. computers. life. friends. <strong>beyonce. </strong> celebrities. mtv. <em>bet.</em> vh1. cw. <u>america's next top model.</u> nikelodeon. <strong>graphic design.</strong> apple <em>laptops.</em> food.
         </table></div>

[freeflow]

Upload the image please (if its a header if not forget it). I know your using dreamweaver already. Whenever we take the code we don't see it and its hard to figure out what your trying to accomplish w/o it.Its hard to see what your trying to do. Maybe if you get most of it like whatever header you want and how to position text. If its not a header image nevermind , maybe a screenshot of what you see or are trying to do ... something.

[bigtrey90]

oh the image is a image of me:
image

[freeflow]

Ok but what are you trying to do? For text all you need is this:

CODE

<div id="webmaster">
     <img src="images/images/webmasterpic.png" align="left"><strong>John.</strong> tall. <em>16.</em> <u>April Fools baby.</u> skinny. black. cool. insecure. intelligent. <strong>friendly.</strong> loved. money. <em>school.</em> shopping. shoes. clothes. chains. dressing up for church. shiny things. <strong>myspace.</strong> internet. computers. life. friends. <strong>beyonce. </strong> celebrities. mtv. <em>bet.</em> vh1. cw. <u>america's next top model.</u> nikelodeon. <strong>graphic design.</strong> apple <em>laptops.</em> food.
</div>

You can easily customize it and put it in a box , etc otherw ays.


But you still haven't explained what you are trying to do at all so I have no idea what to tell you. Saying align text like that website w/o a header image its hard to understand.

[bigtrey90]

I am trying to align the text, to make it fit like its in a box, I think if you just used both codes I gave in the last post, it would work cause I just tried it in Dreamweaver, and it really dosent need a header image shown if you put this code in. basically I dont know how to customize it to make it fit in a box perfetcly like the text on the website i gave before, like the blogs:

CODE

<style type="text/css">

#main{
    position: absolute;
    top: 0px;
    left: 156px;
    }
    
#links{
    position: absolute;
    top: 616px;
    left: 749px;
    }
    
#webmaster{
    position: absolute;
    top: 475px;
    left: 657px;
    font-family: arial;
    line-height: 9px;
    font-size: 8pt;
    color: #000000;
    width: 210px;
    height: 130px;
    }
    
.standard b, p b, B, strong{
    font-family: arial;
    font-size: 8pt;
    color: #d9c493;
    text-transform: uppercase;
    }
.i,em{
    font-family: arial;
    font-size: 8pt;
    color: #989597
    }
.u{
    font-family: arial;
    font-size: 8pt;
    color: #e4cfbd;
    }
</style>

CODE

<div id="webmaster">
  <table width="208" cellpadding="0" cellspacing="0" align: justify valign="top" >
        <img src="images/images/webmasterpic.png" align="left"><strong>John.</strong> tall. <em>16.</em> <u>April Fools baby.</u> skinny. black. cool. insecure. intelligent. <strong>friendly.</strong> loved. money. <em>school.</em> shopping. shoes. clothes. chains. dressing up for church. shiny things. <strong>myspace.</strong> internet. computers. life. friends. <strong>beyonce. </strong> celebrities. mtv. <em>bet.</em> vh1. cw. <u>america's next top model.</u> nikelodeon. <strong>graphic design.</strong> apple <em>laptops.</em> food.
         </table></div>

[freeflow]

I used header as an example that way one doesn't have to open dreamweaver to help. Its easier if it was already on a webpage. With a header we can see it and then possibly just look at the code and tell.

Using your code doesn't help much, if it did I wouldn't have asked for more. This is what I get...

So I'm just going to say a way you can get what she/he has and you can just somehow implement it on your own.
To get the blog and navigation on a background, you can easily create the background in photoshop. But you should make the layout full size when you create it. Then you easily set the layout to repeat-y so it only repeats down vertically. Then after that you can just use a plain div with text to align the text to the background. You can also use that to align the image to the background.


For centered type layouts: http://pixelfx.org/tuts/html/centeringlayouts.html

Another way could possibly be to create one long table, (with the background color , etc) and then just add all the text etc to fit into that. Never tried it but its a possibility.

[bigtrey90]

YAY! i figured it out i needed to add this:

CODE

text-align:   justify;

[freeflow]

Ok since you figured it out (and since I had no clue what you were asking about) I'll close this. If you need this again pm me.