What is a div element? A div element is a block of content that can be positioned anywhere on your site by using absolute positioning and the <div> tag. The purpose of div elements is to hold content, whereas frames hold pages. This content can be placed anywhere on your site and it can even overlap. The content can consist of images or html. All of the style elements like scrollbar color and font color can be controlled by a simple style sheet.
How do I make a basic div block? This is the code for a basic div:
[code]<div id=layer1 style="position:absolute; top:20; left:20; width:300; height:300; z-index:1; padding:5px; border: #000000 2px solid; background-color:#000000; background-image:url(yourfilename.gif); layer-background-image:url(yourfilename.gif);">
Content goes here (images, text)
</div>[/code]
In the above code, there are a few variables that need to be defined:
id: This is just the number of your div. It helps you sort out easily which div element is which when you have many layers. It's also useful for identifying layers so that you can have different style attributes in your style sheet for each div element.
Top: This is the number in pixels that your div element will be positioned horizontally from the top of the page. If you give "top" a number value of "20," your div element will be 20 pixels down from the very top of your page.
Left: This is the number in pixels that your div element will be positioned vertically from the left of your page. If you give "left" a number value of "20," your div element will be 20 pixels left from the very left side of your page.
Width: This is the width of your div element in pixels.
Height: This is the height of your div element in pixels.
Z-index: This is the order in which your div elements are stacked, or overlapped. The number 1 would be the first layer, and the layer closest to the background of your site. The number 2 would be stacked on top of number 1, etc. You can remove this tag if you are using layers that you do not want to overlap.
Padding: This is the margin of your div element in pixels. For instance, if you have text in your div element, you'll need margins so that the text doesn't go from one end of the div element to the other. This tag acts just like the cellpadding tag for tables.
Border: This is the border of your div element in pixels. If you don't want a border, remove this variable. You can have a border that is solid, dottted, dashed, double, groove, ridge, inset, or outset.
Background-image: This is the background image of your div element for IE.
Layer-background-image:This is the background image of your div element for Netscape.
How do I make a div element that scrolls? Adding the "overflow:auto" tag to your div element will make it scrollable, like a text area:
<div style="position:absolute; left:100px; top:100px; width:100px; height:100px; background-color:#ffffff; overflow:auto;">
Your text and images would go here
</div>In the above code, you can position the div element by adjusting the numbers in bold.
How do I change the div scrollbar color? (IE only)
You can use this method to change the color of your individual div element scrollbars. Using a style sheet makes your scrollbars all the same color. If you want a different color for a particular div, you can use this method, substitute your own 6 digit color number where you see bold text:
<div style="position:absolute; left:100px; top:100px; width:100px; height:100px; background-color:#ffffff; overflow:auto; scrollbar-face-color : #000000; scrollbar-highlight-color : #000000; scrollbar-3dlight-color : #000000; scrollbar-shadow-color : #000000; scrollbar-darkshadow-color : #000000; scrollbar-track-color : #000000; scrollbar-arrow-color : #000000;">
Content here
</div>
