Post by oatmeal on Jan 3, 2012 13:24:37 GMT -5
Introduction
The basic gist of all of these will be: LEARN TO USE STYLE TAGS. Doing this requires some basic knowledge about what the style tags do. Style tags place whatever is inside of them inside of a div. When you write:
You get this:
Which, in HTML coding, will look like this:
So, now that that lesson is over and done with, I actually have an awesome reference that you can refer to whenever you want to know how to code something. And no, most people don't know ALL of these off the top of their head, so don't feel like a poop for going on a cheat sheet.
w3schools CSS tutorial and HTML styles information
Finally, all my table coding is open source and free to use. I don't care if you use the coding to learn how to code.
Perfect Margins
First, the secret to perfect margins without style tags is to make the area for the words to go into about 35px from the edge. However, do you really want to limit your artistic skills in that way?
Margins are easy to code and easy to figure out and can really polish the look of a table.
I will now show a table that had its margins figured to both exemplify how a table looks with its margins figured and how the margins were coded. Here is the example:
Pay attention to the places where margins appear in the coding:
Stylin' the Text
Now, I really enjoy styling text and font. Before I dive you into the whole world of fonts and text and coding them, I need to give a few tips.
1. Serif fonts such as Georgia and Times New Roman are hard to read when they are small. Save the posting to non-serif fonts such as Tahoma and Arial
2. Give enough contrast between the background color and the words. Readability should be the first thing on your priority, not if the colors match. Black or the darkest shade of the background color looks best on light and medium shades. Medium colors look best on dark background. Light colored fonts look best on medium backgrounds. Remember not to give too much contrast. Too much gives eyestrain
3. An easy way to increase readability is to add a touch more space between letters or lines. Use letter-spacing or line-height to change these.
4. Justified or left-aligned text is easier to read than centered or right-aligned text, especially in huge chunks.
***NOTE***
This guide is not complete by a longshot, but if you have a topic you want me to cover next, please drop me a PM.
The basic gist of all of these will be: LEARN TO USE STYLE TAGS. Doing this requires some basic knowledge about what the style tags do. Style tags place whatever is inside of them inside of a div. When you write:
[div style="border: 1px solid black; margin: 5px 40px; padding: 5px;"]This text is inside of a box that has a black border.[/div] You get this:
This text is inside of a box that has a black border.
Which, in HTML coding, will look like this:
<div style="border: 1px solid black; margin: 5px 40px; padding: 5px;">This text is inside of a box that has a black border.</div>So, now that that lesson is over and done with, I actually have an awesome reference that you can refer to whenever you want to know how to code something. And no, most people don't know ALL of these off the top of their head, so don't feel like a poop for going on a cheat sheet.
w3schools CSS tutorial and HTML styles information
Finally, all my table coding is open source and free to use. I don't care if you use the coding to learn how to code.
Perfect Margins
First, the secret to perfect margins without style tags is to make the area for the words to go into about 35px from the edge. However, do you really want to limit your artistic skills in that way?
Margins are easy to code and easy to figure out and can really polish the look of a table.
I will now show a table that had its margins figured to both exemplify how a table looks with its margins figured and how the margins were coded. Here is the example:
| [atrb=border,0,true][atrb=cellPadding,0,true][atrb=cellSpacing,0,true][atrb=width,460,true][atrb=background,http://i437.photobucket.com/albums/qq94/NuckyGirl/almiratop.png][atrb=height, 331] perfect margins exemplified;; |
| [atrb=background,http://i437.photobucket.com/albums/qq94/NuckyGirl/almiramid.png] This table is a great table to show how to style margins effectively. The top part of the table is actually a background. Remember that the style tag puts text in a div? If the image is a background, than the div will go OVER the image. Thus, giving it this pretty effect with the text going over the faded part of the picture. You do this with giving a margin negative pixels. This tells the margin to go (in this case) -110px above where the margin would have gone without the coding. Most of my tables, with rounded corners, have negative pixels for the top and bottom to compensate for how the table is cut because of rounded corners. For reference, these are the images for the table: Header - I cut this generously since I could fix it with style codes. Background Image Footer Image [style=border-top: 1px solid #4c6666; margin-top: 3px; padding: 3px 5px 0px;]Words: words Tagged: tag Notes: The line above this note section is actually a border for another div! Divs are nestable in the updated code, which makes this an easy feature to implement. Credits: White wolf from Dawnthieves |
| [atrb=background,http://i437.photobucket.com/albums/qq94/NuckyGirl/almirabottom.png][atrb=height, 25] |
Pay attention to the places where margins appear in the coding:
[center][table][tr][td][atrb=border,0,true][atrb=cellPadding,0,true][atrb=cellSpacing,0,true][atrb=width,460,true][atrb=background,http://i437.photobucket.com/albums/qq94/NuckyGirl/almiratop.png][atrb=height, 331][div style="font: 11px Georgia serif; letter-spacing: 2px; font-weight: bold; color: #172323; margin: 60px 8px -60px; border: 1px solid #4c6666; background-color: #fff; opacity: .5; padding: 2px"]perfect margins exemplified;;[/div][/td][/tr][tr][td][atrb=background,http://i437.photobucket.com/albums/qq94/NuckyGirl/almiramid.png][div style="margin: -110px 15px -10px; font: 11px Tahoma; color: #283535; line-spacing: 120%; text-align: justify;"]
POST GOES HERE
[style=border-top: 1px solid #4c6666; margin-top: 3px; padding: 3px 5px 0px;][b]Words:[/b] words
[b]Tagged:[/b] tag
[b]Notes:[/b] The line above this note section is actually a border for another div! Divs are nestable in the updated code, which makes this an easy feature to implement.
[b]Credits:[/b] [url=http://averic.lima-city.de/Freephoto/Freeph-Wolf-448.jpg]White wolf[/url] from [url=http://averic.lima-city.de/Website/English/Freephoto-Main.htm]Dawnthieves[/url][/div][/style][/td][/tr][tr][td][atrb=background,http://i437.photobucket.com/albums/qq94/NuckyGirl/almirabottom.png][atrb=height, 25][/td][/tr][/table][/center]Stylin' the Text
Now, I really enjoy styling text and font. Before I dive you into the whole world of fonts and text and coding them, I need to give a few tips.
1. Serif fonts such as Georgia and Times New Roman are hard to read when they are small. Save the posting to non-serif fonts such as Tahoma and Arial
2. Give enough contrast between the background color and the words. Readability should be the first thing on your priority, not if the colors match. Black or the darkest shade of the background color looks best on light and medium shades. Medium colors look best on dark background. Light colored fonts look best on medium backgrounds. Remember not to give too much contrast. Too much gives eyestrain
3. An easy way to increase readability is to add a touch more space between letters or lines. Use letter-spacing or line-height to change these.
4. Justified or left-aligned text is easier to read than centered or right-aligned text, especially in huge chunks.
This is an example of some text in a box. I made it small so you can better see the changes to the styles
[div style="border: 1px solid black; margin: 5px 150px; padding: 5px; font: 10px Tahoma; color: black; background: silver; text-align: justify;"]This is an example of some text in a box. I made it small so you can better see the changes to the styles[/div]This is an example of some text in a box. I made it small so you can better see the changes to the styles. Now, I've added one pixel of spacing between each letter.
[div style="border: 1px solid black; margin: 5px 150px; padding: 5px; font: 10px Tahoma; color: black; background: silver; text-align: justify; letter-spacing: 1px;"]This is an example of some text in a box. I made it small so you can better see the changes to the styles. Now, I've added one pixel of spacing between each letter. Letter spacing is figured by pixel.[/div]This is an example of some text in a box. I made it small so you can better see the changes to the styles. This time, I put more space between the lines. Line-height is determined with percentages.
This is an example of some text in a box. I made it small so you can better see the changes to the styles. This time, I put less space between the lines. I also added the letter-spacing back in.
[div style="border: 1px solid black; margin: 5px 150px; padding: 5px; font: 10px Tahoma; color: black; background: silver; text-align: justify; line-height: 150%;"]This is an example of some text in a box. I made it small so you can better see the changes to the styles. This time, I put more space between the lines. Line-height is determined with percentages.[/div]***NOTE***
This guide is not complete by a longshot, but if you have a topic you want me to cover next, please drop me a PM.