Sunday, October 29, 2006

Centering Complex and Multiple Objects

HTML, which is what blogs and other websites are coded with, is great for displaying text in a simple layout.

It's just like typing - what you type is displayed in paragraphs, cleanly and neatly laid out, with line breaks automatically inserted.

HTML is not so great for displaying objects, displayed with other objects. Displays written around HTML have to flow - horizontally and vertically. They have to accommodate displays of varying resolution, and windows of differing size.

You can't simply place two objects next to each other, in your code - and expect one to appear below the other - in all cases.

You can group objects as you like, if you put the objects inside a table.

You can use this technique in HTML, installed in a post (in "Edit HTML" mode), or in an HTML / JavaScript gadget.



Use a single cell table to display two objects, one above the other.


Make this line
Appear above this line


<table><tr><td>Make this line<br>Appear above this line</td></tr></table>





To center those two objects, horizontally, in the available space, use dual nested tables.


Make this line
Appear above this line

<table align="center" border=1><tr><td><table align="center" border=1><tr><td>Make this line<br>Appear above this line</td></tr></table></td></tr></table>
In some tables, "<br>" will be ignored. You may need a third nested table.


Make this line
Appear above this line


<table align="center" border=1><tr><td><table align="center" border=1><tr><td><table align="center" border=0><tr><td>Make this line</td></tr><tr><td>Appear above this line</td></tr></table></td></tr></table></td></tr></table>





If you have more than one pair of objects to display, add a second <td> ... </td> pair.


Make this line
Appear above this line
And make this line
Appear just above this line

<table align="center" border=1><tr><td><table align="center" border=1><tr><td>Make this line<br>Appear above this line</td></tr></table></td><tr><td>And make this line<br>Appear just above this line</td></tr></table></td></tr></table>




When you see the objects placed too closely next to each other, add padding. And center the contents.


Make this line
Appear above this line
And make this line
Appear just above this line

<span style="text-align:center;"><table align="center" border=1><tr><td><table align="center" border=1 cellpadding="20"><tr><td>Make this line<br>Appear above this line</td></tr></table></td><tr><td>And make this line<br>Appear just above this line</td></tr></table></td></tr></table></span>





Although the above examples all use text objects, any one of them could be a graphic image, instead.


Make this line
Appear above this line
And make the picture below

Appear just above this line

<span style="text-align:center;"><table border=1 align="center"><tr><td><table align="center" border=1 cellpadding="20"><tr><td>Make this line<br>Appear above this line</td><td>And make the picture below<br><img src="http://bp3.blogger.com/_pzC_7PLtN-0/
SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif"><br>Appear just above this line</td></tr></table></td></tr></table></span>


Please use "<span style="text-align:center;"> ... </span>"; don't use "<center> ... </center>" here. The <center> element has been deprecated, and should not be used if your blog is going to be around for a while.




Now that you see how tables can help you, let's make them invisible.


Make this line
Appear above this line
And make the picture below

Appear just above this line

<span style="text-align:center;"><table border=0 align="center"><tr><td><table align="center" border=0 cellpadding="20"><tr><td>Make this line<br>Appear above this line</td><td>And make the picture below<br><img src="http://bp3.blogger.com/_pzC_7PLtN-0/
SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif" style="border-width:0px;"><br>Appear just above this line</td></tr></table></td></tr></table></span>



And now, let's change the width of the table.


Make this line
Appear above this line
And make the picture below

Appear just above this line

<span style="text-align:center;"><table border=0 align="center" width="75%"><tr><td><table align="center" border=0 cellpadding="20"><tr><td>Make this line<br>Appear above this line</td><td>And make the picture below<br><img src="http://bp3.blogger.com/_pzC_7PLtN-0/
SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif" style="border-width:0px;"><br>Appear just above this line</td></tr></table></td></tr></table></span>



And let's change the width again.


Make this line
Appear above this line
And make the picture below

Appear just above this line

<span style="text-align:center;"><table border=0 align="center" width="75%">;<tr><td><table align="center" border=0 cellpadding="20" width="80%">;<tr><td>Make this line<br>Appear above this line</td><td>And make the picture below<br><img src="http://bp3.blogger.com/_pzC_7PLtN-0/
SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif" style="border-width:0px;"><br>Appear just above this line</td></tr></table></td></tr></table></span>




If you're in any way curious about how I setup this page, and showed the HTML so neatly, see my tutorial on anchors and HTML, and a second tutorial on displaying HTML control characters.

And you can always examine the code for any specific page element, if you're using Firefox. Or check out the W3 Schools tutorials, that tell you all about each HTML tag, as used above.

And check out Creating A Horizontal Index For Your Blog, for a practical example of the above exercise.

>> Top

4 comments:

Mary said...

Two questions for you:

1) I've just used "center" rather than the more complex table commands described here. I've also just used "br" to force line breaks. Are these problematic to use?

2) How do you get your post title to be a permalink? If you've already explained how in a previous post, please let me know and I'll look for it.

Thanks!

Chuck said...

Hi Mary,

Two good questions.
1) The "center" element has been deprecated, and you're advised to use style elements instead. I added information to my article, above.

2) I wrote about the post title and permalinks a while ago. See if that post is any help.

T & L Mayfield said...

This site is a great source of info! Thanks Chuck :)

I am having problems centering my blog header... its jpeg image that I uploaded in the new blogger by editing that section. However, this doesn't give me any html to work with, so I'm unsure of how to get my header centered. Right now its to the left and REALLY annoying!! Any suggestions? Thanks in advance for your time!

Janet said...

Your site is FABULOUS! Thank you thank you thank you. I put it in my favorites.
eurojanet.blogspot.com