border:
border values are used to create the thick border around the outside of your table. realize that borders
add to the space - meaning if you want to have a ten pixel border but leave your table at 400px wide you will need to remove 20 from the width and 20 from the height if you have it set. border can be used by itself and can contain all of the three aspects. it does not have to be listed in any particular order though my own preferred orders are #hexhex style ##px; and ##px style #hexhex;
* * div imagethis table has been crafted using the display from the non-scrolling table. this post is merely to show you how to add all the fun little things after creating the basic table. i included it here because once you've gotten the table part down i am certain the only thing you will need to come back for from time to time is the values.
there, now we have a table with a border. this border is 10px all the way around, solid, and is #111111. as you can see, it totally messes up our width of our box. in order to fix this, you will go into the bbcode tab, find the border size double it like we did with the padding and subtract that number from your width. For instance. 10px x 2 = 20px. My width is 290px so 290px-20px = 270px.
yayyy! And now we have our table the original width of 300px. it's sort of like science - yeah i know crazy danni talking about the crazy science. think of it this way:
i'm sure most of you have heard of the conservation of mass - it basically states that nothing is ever created or destroyed, what you start with is what you end with. if you start with 300px but want to add a padding and a border you have to take that width away from the starting width. but just because you've removed it from there doesn't mean it's disappeared, it's just been converted into something else.
final border code: border: 10px solid #111111;
border-width is normally only used when you are attempting to use four different widths at once. the easiest way to do it is by using border-width: 0px 0px 0px 0px; and replacing the numbers with the correct number. the numbers are in order of top, left, bottom, right.
border-color is normally only used when you have used border-width. it can be used with either #hexhex or rgb ( ##, ##, ##);
border-style is normally only used when you have used border with. it can be filled with solid, dashed, dotted, double, groove, ridge, insert, or outset.
Yay, danni made a new table with the code listed above. this code is used to create multiple different borders or to eliminate the need for typing each border-left border-right border-top and border-bottom down. sometimes this is easier - believe me.
the order that the width goes in is top, left, bottom, and right. i created four different border lengths here, the top being 2px, left being 4px, bottom 6px and last but not least, the right being 8px.
i have all ready done so here, but do not forget that if you want to have your width your predetermined width that you will need to add the amounts you set in the left and right position and subtract it from the width. for example:
290 (my width) - (4+8) [my left and right] = 278px.
okay, now this table has a cute little border along the left of it. this is the simplest way to apply a border to one side. only one side. this is not necessarily recommended if you want to create four different borders. though if you want to create multicolored borders - for whatever reason - this is the recommended method as it allows you to create four separate borders with four separate colors.
i have all ready done so here, but do not forget if you want to keep the width of your table to subtract the individual width of this border from the width of your table. example: my width: 290 - my border: 10 = 280.
* Do not sweat it if proboards divides your border up as border-left-width: border-left-style: and border-left-color:. (or whatever side you are attempting to edit) if you have to edit it you can can either redo it as the border-left (or whatever) and proboards will likely reset it again or you can just edit each individual piece.
margin:
margins are not frequently used but can be helpful if attempting to overlap two tags. otherwise it can also be used to create padding around the outside of the tag rather than the inside. you can either place the margin: 0px; for a border that is the same size all the way around, a margin: 0px, 0px, 0px 0px; (top left bottom right) for one that is different or margin-top, margin-bottom, margin-left, and margin-right for individual margins.
* * div font span link imageyayyyyy. margin tables. okay so this margin table has a 20px margin around the entire table. it is only so big so that you can see how it pushes all the text above and below it away. look at all that space. there is no line space between each of these paragraphs and this box. this is all the margins taking affect.
as you have seen this can also be used to manipulate all the margin sides at once without messing without having to type out the entire margin-left right top bottom thing every single time. this is typically easiest when attempting to set a specific value away from one side of a box while overlapping another or pushing both boxes away, or overlapping another... you can do pretty much anything with css.
there, now you've probably like pfft nah danni, you lyin' - this is just a table with a huge space under neath it between that table down there. well it's not, young grasshoppa. actually - this is an example of using the margin: #px #px #px #px; method. I set it with a top margin of 50px, a left of 0px, a bottom of 50px, and a right of 0px. Now you're probably like PFFT Danni you craycray. that's not fifty pixels beneath this table, that's only twenty. well trust me, it's there. you just can't see it.
i used this second table to show you how tables can overlap each other but i did not want to cut off the table above so instead i used the margin. what the margin does is it fools the site into believing the table is actually bigger than it is. (or smaller, if you use the negative qualities. anyway, so for this second table i used margin: -30px 0px 50px 0px; and what this did was it made the 50px margin from the box above become a 20px margin by laying this sweet, baby box on top of the 30px. I know it's kind of confusing so think of it like a math problem.
if dean is fighting fifty demons and bobby comes in demanding that dean let him help fight thirty demons, how many demons does that leave dean with to fight by himself? - yep that's right, twenty. imagine dean is that badd ass box up there trying to take the fifty demons on by himself then along comes bobby -this box- going "no you idget, we're family let me help you." then bobby and dean kill thirty demons together and leaves dean with twenty demons left.
* yep that's right you totally just got taught math spn style.
much like the border and padding values you can specifically set each side to a specific size. often this is helpful when attempting to push the box away from something or to overlap to boxes. i will show you what i mean.
hey look. it's a wild jensen ackles. look, this box is super far away from that picture, like look at that - it's at least five - ten pixels. but have no fear, margin is here!
well would you look at that, the space is gone. all thanks to my little friend margin-top. all you have to do is take the position that you want shrank or grown and find that side. for the table it is margin-top but for the image it is margin-bottom. you can edit whichever one you want.
one thing to keep in mind though is that the box on the top will be the one that overlaps the box on the bottom. in coding terms, whichever is higher up on the coding list will be put first. you can use margin to shift the box to whatever position you want it in but it will be a lot of testing.
for this one all i had to do was put margin-top:-5px; into the coding for the box and then presto we had a cute little box that sat right up against our picture.
text-shadow:
this can be used to accomplish the affect around the links
or to remove it. if you want it removed around a link simply type in style="text-shadow:none;" behind the link. Please realize that this will
not work for the @tag system and so if you want accomplish that without the border you will need to hand link every account. there are two ways to create a shadow, using pixels and em. I myself do not have a lot of experience with em and so refuse to use it as i do not know how to completely manipulate it yet. if you choose to use em i will not be able to help you with any trouble shooting.
* * div span font linktext-shadow using pixels
text-shadow: #px #px #hexhex;
yep i put a table because most people want their text inside the table. if you don't then just place this coding in
outside of the div for the table. it's pretty simple though.
the first #px refers to which way you want it moved, to the left or to the right. in order to move it to the left you want to use negative numbers where in order to move it to the right you want to use positive numbers.
the second #px refers to which way you want it moved, to the top or the bottom. in order to move it to the top you want to use negative numbers where in order to move it to the bottom you want to use positive numbers.
basic shadowspersonally i recommend creating shadows
only inside of span, font, and link tags. i would never personally use the shadow tag on an entire div unless it was used as a header and only contained certain words. never for full paragraphs.
hey look a shadow. well here is your shadow you were looking for. this shadow is a 1px shadow and probably the largest i would ever go on a font this small. the larger your shadows get the harder it is to read. as if this is not difficult enough. personally this makes me want to cry because it strains my eys. but hey, some people like it so i want that option to be out there.heyyyy. it's another shadow but this one is a little easier to read. more makes it look like it's bolded, right? well maybe if you look kinda hard at it. but this is actually pretty simple to accomplish as well. it's a little easier on the eyes so if i had to choose i would definitely say use this one.outlining text using shadows.
removing text shadow from the links: this can only be done when using a href="link" style="text-shadow:none;" it will remove the shadow from the link that it has been applied to.
note that it will not work with the @tag system. you will have to individually link the account to remove it
but then the member will not receive the notification. the colors for our links can be found in the rules thread.
outlining text using shadows is what sets our links apart on the dark spring skin. if you have any desire to be able to use it all you need to use is use this code:
text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
it will look like this when completed:
hey there!
opacity:
opacity is used to make a tag transparent. in order to have solid transparency you need a 1 in the opacity. if you want it slightly transparent you want to start at .9 and work your way down. it will take two digit numbers behind the decimal point.
* * div span font link imageopacity is extremely simple. all you have to do is place opacity:.#; and that is it. i will display the opacity options using images below. these are only the .1 - .9 and do not include .15 .25 etc. they go in order from .9 - .1 as .9 is the most visible and .1 is the least.
text-decoration:
text decoration allows you to add an underline, line-through, or overline to the text. in order to accomplish each of them just put underline, overline or line-through behind text-decoration.
* * div span font link
text decoration is another one that is extremely simple. all text-decoration has the ability to do is to underline, strike through, and overline your text. you can also combine them. i will show you each affect and the words listed will be what you need to use to achieve that affect. ready?
overline
underline
line-through
overline underline
overline line-through
underline line-through
letter-spacing:
letter spacing will create spaces between your letters without you having to do so. it can be seen in example above with the header of this post. i recommend anywhere between a 2 and 10 pixel letter spacing, depending on the size of your font. you can also use negative numbers to squish the font together.
* * div span font link
letter spacing is only used for two things. the first is creating space between letters of a word and the second is to remove space between the letters of a word. that is it, that is all it will do. it can be used to squeeze a little more text into a line or to expand the words and fill an entire line that would not normally be filled. i will give an example of each and then we will move on.
this font has a letter spacing of one pixel applied to it. as you can see these letters are farther apart than the ones above and allow you to fill lines using less words.
this font on the other hand is squished together by a negative one pixel letter spacing that has been applied. one thing to keep in mind is that if you intend to use this that you always make sure you are using a big enough font. with a font that is too small this may become difficult to read.
word-spacing:
word spacing is a lot like letter spacing but instead of between each individual character it does it between words. it can make spaces larger or smaller and often helps spread text out if you are attempting to fit it evenly across one line. I recommend using a five to ten pixel word spacing but this is just my own personal opinion.
* * div span font link
word spacing is another thing that is only used for two purposes. removing space from a line or creating space in a line. as you can see above the letter spacing can sometimes be a little too finicky depending on what you are attempting to do and so word spacing may be more up your alley. i will give an example of each method and then we will move on.
this font has larger spaces between each of it's words while still allowing the words themselves to be set to the default setting. it makes reading a lot easier but can sometimes become a little too extensive if the spaces become too large between words. a 2px word-spacing has been applied to this font.
this font squished together and it is difficult to distinguish words. this can sometimes be a little too overbearing in small text but can do wonders with big text. this has a -2px word-spacing applied to it.
text-transform:
text transform can be used to set all letter to uppercase, all to lowercase, or to normal capitalization. in order to accomplish each just type uppercase, lowercase, or capitalize after the text-transform:.
* * div span font linktext-transform is the last of the values we will be discussing. this has the ability to force text to different values - such as uppercase, lowercase, or capitalize. i will show you want each of them does now and then we will be able to move on to the tables portion of this tutorial.
uppercase will make your text like this.
lowercase will make your text like this.
capitalize will make your text look like this.
