Lesson-6 (The Box Properties)
Width and Height
Possible Values:
number of pixels: {width:100px}
percentage: {width:25%}
The width property lets you define a width for a section of your page, such as a few sentences of text. If you set the width at 100 pixels, the text will wrap to the next line when it gets to a length of 100 pixels, much like a table:
<DIV style="width:100px">This section of text will be 100 pixels long</DIV>
This will give you the following:
This section of text will be 100 pixels long
As you can see, it cuts off much like a table cell does......but you won't have to worry about nested tables or 1x1 invisible images!
height
Possible Values:
number of pixels: {height:100px}
percentage: {height:25%}
The height property lets you give a section a specific height. If you set the height at 100 pixels, it should cut off the text after reaching a vertical length of 100 pixels, right? Well, it does....but you won't see it because by default everything is visible......
<DIV style="height:100px">This will<BR> have a<BR> height<BR> of 100<BR> pixels.</DIV>
Here you have the height set at 100, but even with all the line breaks, everything still shows up without a cut off:
This
will
have a
height
of
100
pixels.
So how do you know if the height property is really working? Well, if I were to fix it so that anything going past 100 pixels would not show up, we could see the height property work. So, I am going to use the overflow property. This is a property that lets us change what happens when something goes beyond our set width and height. I am going to set it to "hidden", so anything that goes beyond my 100 pixel cut off does not show up:
<DIV style="height:100px;overflow:hidden">This will<BR> have a<BR> height<BR> of 100<BR> pixels.</DIV>
This
will
have a
height
of
100
pixels.
Ah.....the text cut off after "100"! (You might even be able to see a tiny bit of the word "pixels" below it, if you have really good vision. I had to use a magnifying glass myself.....).
overflow
Possible Values:
visible
hidden
auto
When something has a width or height defined that is shorter than the element, this decides whether to hide the remaining part of the element, or show it. By default it is set to visible. But you can hide the overflow if you wish:
<DIV style="width:200px; overflow:hidden">
<NOBR>This just keeps going and going and going and going....</NOBR>
</DIV>
And anything beyond 200 pixels will be hidden! See how it cuts off below:
This just keeps going and going and going and going....
You could also make a scrolling area if you want to by setting it to "scroll"......
<DIV style="width:200px; overflow:scroll">
<NOBR>This just keeps going and going and going and going....</NOBR>
</DIV>
And you get this interesting little thing:
This just keeps going and going and going and going....
Possible Values:
none
solid
double
Oh yes, now we have borders too. The values above were the styles I was able to get to work so far, but there are supposed to be more....dotted, dashed, ridge, inset, outset, and groove. If you get one of those to work, let me know! The border-style lets you decide whether or not to show a border, and what style it should be if you use one. Setting this to "none" leaves no border, while the others will give you a border. Here is what the code for a solid border looks like:
<DIV style="border-style:solid">This will have a solid border.</DIV>
And you will get a long, solid border:
This will have a solid border.
Why is the border so much longer than we need it to be? Because we did not define a width for the section of text we put the border around....Let's use the width property we learned earlier in this section:
<DIV style="width:200px; border-style:solid">This will have a solid border.</DIV>
And now we have a much better fit!
This will have a solid border.
The "double" border style works the same way:
<DIV style="width:200px; border-style:double">This will have a double border.</DIV>
You get a nice little double border:
This will have a double border.
Oh, but now you want to change the border width itself....well read on below.....
border-width
Possible Values:
number of pixels
thin
medium
thick
This lets you decide how thin or thick your border will be. If you set the border-width to "thin", you will get a thin border:
<DIV style="border-width:thin; border-style:solid">This will have a thin, solid border.</DIV>
Now you have the nice thin border:
This will have a thin, solid border.
Of course, you can define the border-width in pixels as well:
<DIV style="border-width:12px; border-style:solid">This will have a thin, solid border.</DIV>
And now you have a 12 pixel border! Ouch!
This will have a 12 pixel solid border.
Possible Values:
color name
You can also choose what color you want your border to be. By changing the border-color, you can use any color you like:
<DIV style="border-color:red; border-style:solid">This will have a red, solid border.</DIV>
Now you have a bright red border!
This will have a red, solid border.
Now go color those borders!
Possible Values:
number in pixels
percentage
auto
This lets you define a left margin for an element. It will always start from the left side of the screen. Here is a section of text with a border and a left margin:
<DIV style="margin-left:50px; border-style:double">This has a left margin of 50 pixels.</DIV>
You will get the following, 50 pixels from the left of the browser window:
This has a left margin of 50 pixels.
This is pretty nice if you want to align a bunch of things down a certain part of the page......
margin-right
Possible Values:
number in pixels
percentage
auto
This is just like the margin-left, but it goes from the right side of the browser window:
<DIV style="margin-right:150px; border-style:double">This has a right margin of 150 pixels. Yes, it is pretty neat to have a right margin, isn't it?</DIV>
And you get this:
This has a right margin of 150 pixels. Yes, it is pretty neat to have a right margin, isn't it?
margin-top
Same as above, but defines the top margin. The default is 0.
margin-bottom
Same as above, but defines the bottom margin. The default is 0.
padding-left
Possible Values:
number in pixels
percentage
auto
The padding properties are much like the "cellpadding" property of a table, except these let you define the padding for the left, right, top, and bottom individually rather than all at once. Here is an example of the padding-left property:
<DIV style="padding-left:50px; border-style:double">This has a left padding of 50 pixels.</DIV>
And you will get the padding from the left inside the border:
This has a left padding of 50 pixels.
padding-top
Same as above, but defines the top padding. The default is 0.
padding-right
Same as above, but defines the right padding. The default is 0.
padding-bottom
Same as above, but defines the bottom padding. The default is 0.