DIV help, The text will not show Options

[PoeticInsanity]

I am in the process of making a DIV layout for a myspace contest site. The only problem is I can't get the text to show. I was just using random text to test it with so the text means nothing, but here is the code.

<style type="text/css">
.Main { position:absolute; left:50%; top:125px; width:800px; z-index:1; margin-left:-400px; padding:0px; border:0px; background-color:transparent;}

.Background {position:absolute; left:50%; top:0px; width:800px; z-index:1; margin-left:-400px; padding:0px; border:0px; background-color:transparent;}

.Music {position: absolute; left:0px; top:0px; background-color:transparent; border:0px; padding:0px;}

.table {position: absolute; left:50%; top:50%; background-color:transparent; border:0px; padding:0px;}

</style>


<DIV class="Background">
<img src="http://i64.photobucket.com/albums/h165/PoeticInsanity16/background.jpg" width="800px" height="900px"/>
</div>

<DIV class="Main">
<img src="http://i64.photobucket.com/albums/h165/PoeticInsanity16/steve_rock.jpg" width="800px" height="550px"/>
</DIV>

<DIV class="Music">
<embed allowScriptAccess="never" src="http://crash.onlinestoragesolution.com/music/(Weezer)%20-%2004%20-%20Island%20In%20The%20Sun%20(1).mp3" type="audio/x-pn-realaudio-plugin"
name="video" console="Clip1" autostart="true" controls="ControlPanel" border="0"
width="176" height="30" align="center" loop="true"></embed>
</DIV>

<DIV class="table">
blah blah blah
</DIV>


its probably something simple, but I'm missing it. please help, thanx.

[waccoon]

No - those "DIV#" things are just the names of the DIVs. It doesn't matter what you put in them. <DIV class="pudding"> would work, you would just have to work with a "pudding" in your CSS. You can add a "z-layer" tag to your DIVs. Think of the "z-layer" as the third dimension when you're positioning your DIVs (or like a deck of cards). The number of the Z-layer determines which layer goes on top of another. 1 is the "bottom"-most layer, if you have a 2 and a 3 overlapping that layer, than the 1 will be on the bottom, 3 will be on top and 2 will be in between.

Example:

<div style="top: 100;left: 225;position: absolute;z-index: 1">
<img src="http://www.createblog.com/images/logo7.gif">
</div>

That's the first table, numbered with a 1.

<div style="top: 95; left: 225;position: absolute;z-index: 2;">
<span style="font-size: 12px;font-weight: bold;">testing 123</span>
</div>

The DIV has a Z-Index of 2, which means its going to be placed on top of the layer you made before.