~ Div layers ~
~ Div layers are an alternative to tables. You can do many things with Div layers, for example, the blogs in the graphics menu use transparent div layers.
~ Div layers also make great text areas. This is because they have their own scrollbar, that is separate from the scrollbars in the rest of the page. Sort of like an Iframe.
The code for an Div Layer is the following:
<div style="position:absolute; left:100px; top:100px; width:100px; height:100px;
background-color:#CCCCCC; overflow:auto">text goes here.</div>
Position:Asolute means that you can assign the div layer a coordinate in the
page, and it wont move from that place. It will be on top of anything else in
the page. No matter what the size of the browser screen is, the div layer wont
move from its place. The Absolute position is determined by the next part of the
code. (left:100px; top:100px; width:250px; height:100px;) You can change
the div's layer coordinate by changing the left, top, width and height
values.
The Overflow:Auto part keeps the div layer's pixel size the same and if you write more text than what fits into the div layer, scrollbars will be added, so the amount of text doesn't alter the size of the div layer.
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.
