User Profile

Customize

carriep63t2

Add Friend
Add Note
Track User
Send Message
Send V-Gift

Carrie's Test Journal

You don't belong here.

Created on 2003-08-27 21:32:21 (#1286110), last updated 2007-06-26

266 comments received, 60 comments posted

Basic Account [Gift]

15 Journal Entries, 6 Tags, 0 Memories, 0 Virtual Gifts, 7 Userpics

Basic Info

Name:	testing
Birthdate:	1975
Location:	Kenosha, Wisconsin, United States
Website:	My Website

Bio

Simple Tables
An important thing to remember when you are using these methods to modify your userinfo: spaces count. When you separate your codes with spaces, they will show up on your userinfo This can make tables look really bad. To avoid this, all of your code must "run together". Example...

This will show spaces and look weird:
<table>
<tr>
<td>
Stuff in your table
</td>
</tr>
</table>

This will not show spaces and look weird:
<table><tr><td>Stuff in your table</td></tr></table>

This is NOT the norm for "regular" html, but for your LJ userinfo it is important to "smush" all your code together.

Single Border

This one is pretty easy. There are no nested tables to worry about, and therefore less of a chance to leave something out. I have justified my text in this paragraph by using the <p align="justify"> tag. This is a tag you have to close at the end of the paragraph like this: </p> If you don't want the edges of the text to be so close to the sides, you can change the cellpadding number to a higher number. You can change the width of the outside border by changing the border="1" to a higher number. You can make the white "border" larger by increasing the cellspacing number. If you want your white border to be a different color, change the bgcolor="white" in the <table> tag. If you want your whole table to have a white background, then take out the bgcolor="darkred" out of the <td> tag. Here ya go:

<table border="1" bgcolor="white" bordercolor="darkred" width="100%" height="100%" cellpadding="5" cellspacing="1">
<tr>
<td bgcolor="darkred" valign="top">
<font color="white"><center><font size="+1">Single Border</font></center>
<p align="justify">This one is pretty easy. There are no nested tables to worry about, and therefore less of a chance to leave something out. I have justified my text in this paragraph by using the <p align="justify"> tag. This is a tag you have to close at the end of the paragraph like this: </p> If you don't want the edges of the text to be so close to the sides, you can change the cellpadding number to a higher number. You can change the width of the outside border by changing the border="1" to a higher number. You can make the white "border" larger by increasing the cellspacing number. If you want your white border to be a different color, change the bgcolor="white" in the <table> tag. If you want your whole table to have a white background, then take out the bgcolor="darkred" out of the <td> tag. </p></font>
</td></tr></table>

Double/Triple Borders

This is the same exact set of codes I used for the single border. The only thing I did differently was change the colors and numbers of a few things. I increased the size of the border in the <table> tag to 4. I changed the bgcolor in the <table> tag to yellow so it looks like a separate border. I changed the cellspacing in the <table> tag to 4 so it would be larger. I changed the bgcolor in the <td> tag to white so it matches the white background on the page. That makes the yellow bgcolor look like a border when it really isn't. Finally, I added a border and a bordercolor to the <td> tag. This is where I have hit a snag. I can't seem to increase the size of this border no matter what I try. Sorry about that, but there doesn't seem to be a way around it. Anyway, on to the code...

<table border="4" bgcolor="yellow" bordercolor="darkred" width="100%" height="100%" cellpadding="5" cellspacing="4">
<tr>
<td border="1" bordercolor="black" bgcolor="white" valign="top">
<center><font size="+1">Double/Triple Borders</font></center>
<p align="justify">This is the <i>same exact</i> set of codes I used for the single border. The only thing I did differently was change the colors and numbers of a few things. I increased the size of the border in the <table> tag to 4. I changed the bgcolor in the <table> tag to yellow so it looks like a separate border. I changed the cellspacing in the <table> tag to 4 so it would be larger. I changed the bgcolor in the <td> tag to white so it matches the white background on the page. That makes the yellow bgcolor look like a border when it really isn't. Finally, I added a border and a bordercolor to the <td> tag. This is where I have hit a snag. I can't seem to increase the size of this border no matter what I try. Sorry about that, but there doesn't seem to be a way around it. Anyway, on to the code...</p>
</td>
</tr>
</table>

This is a fun little thing to do with your userinfo tables. Give it a sidebar look. I have two of them in this example, but you can just remove one of the <td> tags to get rid of the second one. If you do this, change the colspan in the <table> tag to 2.

And again, you can change the look of this table completely by changing the cellpadding, cellspacing and border numbers as well as the bgcolors in the code.

Here ya go...
<table border="2" bgcolor="white" bordercolor="darkred" width="100%" height="100%" cellpadding="2" cellspacing="0" colspan="3">
<tr>
<td width="25%" bgcolor="white" valign="top"><small>
This is a fun little thing to do with your userinfo tables. Give it a sidebar look. I have two of them in this example, but you can just remove one of the <td> tags to get rid of the second one. If you do this, change the colspan in the <table> tag to 2.</small></td>
<td width="50%" bgcolor="white">
<center><img src="http://stat.livejournal.com/img/goat-normal.gif"></center>
</td>
<td width="25%" bgcolor="white" valign="top">
<small>And again, you can change the look of this table completely by changing the cellpadding, cellspacing and border numbers as well as the bgcolors in the code.</small></td>
</tr>
</table>

____________________________________________________________
-------------------------------------------------------------------
Images

easy

This is a simple image tag. It is aligned to the left of the text by using this code:

<img src="image" align="left"> and all of the text you are reading right now is in this spot.

I also justified the text by using this code: <p align="justify">and all of the text your are reading right now is in this spot.</p> The entire code looks like this:

<img src="image" align="left"><p align="justify"> and all of the text you are reading right now is in this spot.</p>

When you want to start a new paragraph that isn't next to the image, then insert a line break: <br>

Easy? Definately.

Image Mapping. This is very easy to do. The words on the picture of Opus are links. (you wont actually go anywhere if you click on them). All you need is a mapping tool. You can code an image map by hand, but really it's alot easier to use a program to do it for you. I use Adobe Imageready. It comes standard with Photoshop. You can use this online image mapper, too. Here is the code I used for this map so you can see what it looks like (no tables!! yay!!):

<IMG SRC="yourimage" WIDTH=330 HEIGHT=251 BORDER=0 ALT="" USEMAP="#opus1_Map">
<MAP NAME="opus1_Map">
<AREA SHAPE="rect" ALT="" COORDS="177,86,327,117" HREF="yourlink">
<AREA SHAPE="rect" ALT="" COORDS="195,48,305,80" HREF="yourlink">
<AREA SHAPE="rect" ALT="" COORDS="176,7,284,37" HREF="yourlink">
</MAP>

A bit harder

This method makes the text and the picture blend together a bit more smoothly. It's a little harder than the simple image tag, but I think the overall effect is nicer. This is a simple table with the background color of the table matching the background color of the image. If you don't have much text, you can align it to the top of the picture by using the [valign="top"] attribute. Here is the entire code for this particular look:

<table bgcolor="#D6F4D5" border="0" width="450" cellpadding="0" cellspacing="0">
<tr>
<td width="300"><img src="image"></td>
<td valign="top">All of the text your are reading right now is here</td>
</tr></table>

This will achieve the same effect as the sliced image below. It's easier to do, but very sloppy. This is just a table with a background image. There are three td's in this table. Two of them are empty. The first empty td is as wide as the space I need to left is. The second td is the text I wrote. The third td is empty and as big as the space I need to the right.
You can also use a textarea tag in this code instead of regular text. That code would look like this: <textarea cols="30" rows="5"> Your text here </ textarea> Leave the space out of the closing textarea tag! You can change the size of the textarea by adjusting the rows (height) and the cols (width).
<table background="backgroundimage" WIDTH=503 height="380" BORDER=0 CELLPADDING=0 CELLSPACING=0>
<tr>
<td width="200"> </td>
<td valign="top"><br><br>All of your text or textarea</td>
<td width="15"> </td>
</tr></table>

Connect

External Services: