This tutorial is brought to you by GMScripts! GMScripts is a buddy of ours and they offer fantastic services. Go check ‘em out!
Before you follow the tutorial remember after every <div> you need to set </div> stating the end of the div. And the coding below is all centered on editing the <div> with a style in it like this <div style=”">.Finally the properties names will be linked between table and div by color.
Required: basic html, text/html program, and a geared brain to learn
General Notes: divs with no set width is actually a width of 100%; If no height then the div”s height is set by the text size (text-size: #px)
1. Tables have a cellpadding, border, width, height.
- <table cellpadding=”5″ width=”500″ border=”1″ height= “320″ bgcolor=”blue”>
2. Now to get cellpadding in a div you just call it padding
- <div style=”padding: 5px;”>
- or <div style=”padding: 5px 10px 8px 10px;”>
3. The first padding code sets all sides the same, while when you add four different numbers it will set the sides different starting from the top going clockwise.
- <div style=”padding: top right bottom left;”>
- <div style=”padding: 10px 8px 25px 8px; “>
4. Now time to add a border which is simple.
- <div style=”border: 1px solid #121212;”>
- <div style=”border-left: 1px dotted #121212;”>
- <div style=”border-top: 1px dashed #121212;”>
- <div style=”border-right: 1px inset #121212;”>
- <div style=”border-bottom: 1px solid #121212;”>
5. Border comes with a few looks.
- Names (solid, dashed, dotted, inset, outset, double)
- You can look up more but these are the basics for all browsers
6. Border has many names.
- border // used for all sides to look the same
- border-left // used to define left of div
- border-right // used to define right of div
- border-top // used to define top of div
- border-bottom // used to define bottom of div
7. So to setup anytime of border you need three things they are:
- Size (ex: 1px = 1 for table)
- Look (ex: solid = tables look)
- Color (ex:#000000 or Black)
8. Okay, now test out what you know you can even combine some into the same style=”" tag of a div
- <div style=”border-left: 1px solid #020202; border-top: 5px dashed #323232;”>
- Remember after every setting (border, padding, border-left,etc) add a “:”
- And when done adding the info after the “:” add a “;” to tell that´s the properties are done.
9. Now to set height and width, these two mean what they say.
- <div style=”height: 250px; width: 102px;”>
10. Height and Width require one thing to be setup and that is the size or the amount of space they will take up.
- Height: (size); // I would set a number and add px (pixel) because it is a basic measurement for all operating systems and browsers
- Width: (size); // I would set a number and add px (pixel) because it is a basic measurement for all operating systems and browsers
11. Try adding Height and Width into you div now
- <div style=”border-left: 1px solid #020202; border-top: 5px dashed #323232; height: 135px; width: 250px;”>
- The div should take Shape Now
12. Finally we need a background color or background image.
- <div style=”background-color: #121212;”>
- <div style=”background: url(image.jpg) left top no-repeat #121212;”>
13. First let”s start off with just a basic color before we start adding images to the background
- Background-color // Requires a Color Hex (#121212) or a color name (Gray)
14. Now you know color for background Try it Out.
- <div style=”border-left: 1px solid #020202; border-top: 5px dashed #323232; height: 135px; width: 250px; background-color: #121212;”>
15. Now time to add the image into the background.
- Background // Background is like background-color, but background can have multiple properties.
- Properties of background (url, color, location, repeat);
- Property “url(i)” // It requires a location for the image inside the parenthesis
- Property “color” // color is not a name but is ment to be a hex (#121212) or a color name (Gray)
16. So to use background here is a few examples
- <div style=”background: #121212;”>
- Instead of calling an image you just set a color in which it will act like background-color
- <div style=”background: url(image.png) center center no-repeat #121212;”>
- You can see we call an image then I have “center center” these are for an (x,y) location.
- After the “center center” you will see “no-repeat” this is say image do not repeat. // instead of using repeat try others like the following (no-repeat, repeat, repeat-x, repeat-y) as their names state that´s what they will do.
- Now your lost why I have “#121212″ in the code, well to make it simple it is like setting a paper under your hand. The hand is the image and the color (#121212) is the paper.
17. Now that you have the knowhow to finish you div how about you try to add an image now
- <div style=”border-left: 1px solid #020202; border-top: 5px dashed #323232; height: 135px; width: 250px; background: url(image.png) center top no-repeat;”>
