DIV Layers

Div layers are an alternative to tables, they make great text areas because they can be carefully positioned, and can have their own scrollbars seperate from the rest of the page, like an iframe. The code for a div layer looks like this:

<div style="position:absolute; left:100px; top:100px; width:250px; height:100px; background-color:#CCCCCC; overflow:auto">div text goes here.</div>

position:absolute says that the horizontal and vertical positioning of the layer, as determined by left and top, will always be the same, no matter what size the browser window is, or what else is on the page. The overflow:auto part keeps the div area it's assigned pixel width and height, and adds scrollbars for the text overflow.

Semi-Transparency
Say you have an image in your background, and you want a div layer for your text over the top with a semi-transparent colored background. This would let the background image show through the div layer, yet the text in the div layer would still be readable. Some examples are a few of my free layouts, flower and soft.

There are two ways you can do this. The first way is to incorporate the semi-transparent text area into the image. I explain how to do this in me image effects tutorial. Once you've made the image, you then need to position the text over the designated area with the left and top attributes. There is, however, an easier way, and it's done using the CSS alpha filter.

<div style="width:250px; height:100px; background-color:#CCCCCC; filter:alpha(Opacity=50); overflow:auto">div text goes here.</div>

Where it says Opacity=50 is where you set how transparent you want the area to be. 1 is more transparent, 100 is more opaque, 50 is right in the middle! You can read more about CSS filters, and the optional extra effects for the alpha filter, here.

Note that anything within this div layer will be semi-transparent, not just the background color; text and images will be, too.