Tessisamess

Layouts, Codes, Tutorials, & Resources

Hey there, I'm Tess!

Welcome to my blog; I make lots of different layouts, codes, tutorials, and other resources for Insanejournal and Dreamwidth RPers! There's a lot to choose from and brand new content goes up every week!

Take a look around, and don't hesitate to ask for help if you need it!

Can't get enough resources? Why not subscribe to my Patreon for exclusive monthly content, or support the creation of more content by leaving a tip on Ko-Fi! ♡

Need an invite?

If you're unable to comment on my journal to ask for help now that anon has been turned off due to serious spam issues, don't worry! Just shoot me an email and I'll send you an invite code for Insanejournal. I've got plenty to spare!
×

Please Note:

I do not offer assistance with any sites other than IJ and DW unless it is for general HTML and CSS (ie. custom hosted pages and similar.) I cannot convert a code to a new site's rules because there are a lot of niche RP sites, and I have no way of knowing each one's limitations and caveats. Sorry about that!

Layout By

Powered by InsaneJournal

Hey there, I'm Tess!

Welcome to my blog; I make lots of different layouts, codes, tutorials, and other resources for Insanejournal and Dreamwidth RPers! There's a lot to choose from and brand new content goes up every week!

Take a look around, and don't hesitate to ask for help if you need it!

Can't get enough resources? Why not subscribe to my Patreon for exclusive monthly content, or support the creation of more content by leaving a tip on Ko-Fi! ♡

Need an invite?

If you're unable to comment on my journal to ask for help now that anon has been turned off due to serious spam issues, don't worry! Just shoot me an email and I'll send you an invite code for Insanejournal. I've got plenty to spare!
×

January 2020

S M T W T F S
   1234
567891011
12131415161718
19202122232425
262728293031 

Please Note:

I do not offer assistance with any sites other than IJ and DW unless it is for general HTML and CSS (ie. custom hosted pages and similar.) I cannot convert a code to a new site's rules because there are a lot of niche RP sites, and I have no way of knowing each one's limitations and caveats. Sorry about that!

Layout By

Powered by InsaneJournal
Previous | Next

How to align text in a gif profile table

JASON VOORHEES
MOTHER'S GOOD BOY



Let's talk profile tables!

Most people's wants for a profile table are pretty simple. From what I've seen, the general consensus for important factors are: width and height, and being able to vertically and horizontally align the inner content in a preferred combination. I'm going to show you how to make a simple table that aligns the content to any area of the table you want it, as well as how to add a background image to both the main table and the inner aligned content.

Step 1: Sizing & Background

First we want to set the width and height of our table so that we have a workable space for our background image. You cannot set a background size or position inline styling in account profiles (you can read much more on profile-safe tables in my previous tutorial), so I recommend either using the exact height and width of your chosen image or a smaller dimension to insure unintended tiling doesn't occur. We're making a basic table, so you only need one table row and one table cell.

CONTENT


Look at that good boy. Now that we have a table with a background image, let's set the specs. I'm going to add padding to inset our content, and I'm also going to temporarily add placeholder border styling so you can see what you'd need to add if you want a border around your table.

CONTENT


So what does this HTML look like?

<lj-raw><table width="500" height="225" background="URL" align="center" cellpadding="20" cellspacing="0" border="0" bordercolor="#000"> <tr> <td> CONTENT </td> </tr> </table></lj-raw>

So we have our dimensions and our image url, as well as our padding and a space for border width and color if needed! Now we can start aligning our content.

Step 2: Vertical alignment

To vertically align your table content you only need to do one thing: add a valign to the td cell. Your options are TOP, MIDDLE (default), BOTTOM, and BASELINE. (Read more here!)

CONTENT


I've chosen a bottom alignment; your options are valign="middle" (default), valign="top", and valign="bottom". Here's what your code should look like at this point:

<lj-raw><table width="500" height="225" background="URL" align="center" cellpadding="20" cellspacing="0"> <tr> <td valign="bottom"> CONTENT </td> </tr> </table></lj-raw>

Step 3: Horizontal alignment

Easy right? Now let's horizontally center! This will be done with a div align. Your options are div align="center", div align="left" (default), div align="justify", and div align="right".

CONTENT


Lookin' good, mama's boy. Here's how that's going to look:

<lj-raw><table width="500" height="225" background="URL" align="center" cellpadding="20" cellspacing="0"> <tr> <td valign="bottom"> <div align="right"> CONTENT </div> </td> </tr> </table></lj-raw>

Here's a visual guide of your cell alignment and div alignment if you need a quick-view of which ones to pick based on where you want your content to sit:

valign="top"
div align="left"
valign="middle"
div align="left"
valign="bottom"
div align="left"
valign="top"
div align="center"
valign="middle"
div align="center"
valign="bottom"
div align="center"
valign="top"
div align="right"
valign="middle"
div align="right"
valign="bottom"
div align="right"


You can stop here and style the font with a font tag, but if you want an inner background to back the text keep reading!

Step 4: Inner Styling

We have two options for inner styling, and each has its own method. The first option is plain styled text:

JASON VOORHEES
MOTHER'S GOOD BOY


All you need to achieve this is font tags wrapping your text with the size, face, and color you want.

<lj-raw><table width="500" height="225" background="URL" align="center" cellpadding="20" cellspacing="0"> <tr> <td valign="bottom"> <div align="right"> <font size="3" color="#B70000" face="century gothic"> Title </font><br> <font size="2" color="#fff" face="century gothic"> Subtitle </font> </div> </td> </tr> </table></lj-raw>

And the second method is used if you want either a background color behind your text, or you want to be able to further align your text after aligning it to the area you want it.

JASON VOORHEES
MOTHER'S GOOD BOY


What we're doing in this case is adding another basic table inside the only cell of the table we already have. This table will also only have one row and one cell. <lj-raw><table width="500" height="225" background="URL" align="center" cellpadding="20" cellspacing="0"> <tr> <td valign="bottom"> <table align="right" bgcolor="" background="https://i.imgur.com/7wjAm4b.png" cellpadding="10" cellspacing="0"><tr><td> CONTENT </td></tr></table> </td> </tr> </table></lj-raw>

Here, instead of using a div to align our content, we're aligning the table instead. From here, you add either your background color or your background image, as well as your padding. If you want to align your text inside of this area, you'll wrap your text in a div to align. If you only want to further align the text you can do without the background and padding specs and just use a table with the right alignment, and the div for the text alignment, as seen here:

JASON VOORHEES
A GOOD BOY


<lj-raw><table width="500" height="225" background="URL" align="center" cellpadding="20" cellspacing="0"> <tr> <td valign="bottom"> <table align="right" cellpadding="0" cellspacing="0"><tr><td> <div align="right"> CONTENT </div> </td></tr></table> </td> </tr> </table></lj-raw>

Step 5: Font Styling

This will be a short section. Styling font with basic HTML is as follows:

<font face="arial" size="2" color="#555">Your Text Here</font>

You'll use face for the font name, size for the font size, and color for the HEX value. If you only want to change part of the font spec inside of a font tag, you do not need to repeat everything. Just wrap the content you want to change with the spec you want to change. Example:

<font face="arial" size="2" color="#555">Your <font color="#000">Text</font> Here</font>

I think that about does it for this tutorial! Let me know if you have any questions that arent answered here or in my overall profile-safe tables tutorial!


♡ You're Done! ♡

Comments

Dec. 13th, 2019 10:23 pm (UTC)
Jason is just doing his best.

This is awesome!