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
Full Version: Text Alignment
You can easily just use divs.
that's what I using, but it's not really showing up right:
the code for the div text area inside a table:
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;
}
position: absolute;
top: 475px;
left: 657px;
font-family: arial;
line-height: 9px;
font-size: 8pt;
color: #ffffff;
width: 200px;
height: 141px;
}
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.
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.
I am using Dreamweaver:
here is the text:
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>
#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>
<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>
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.
oh the image is a image of me:
image
image
Ok but what are you trying to do? For text all you need is this:
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.
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>
<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.
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>
#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>
<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>
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.
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.
YAY! i figured it out i needed to add this:
CODE
text-align: justify;
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.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.