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.

[coldtrance]

you have no css, meaning your profile has no default text or text color

[PoeticInsanity]

yeah, so i have to have a CSS for anything to work? I thought the default was black, or if u defined it as a dif color it would still work?

[waccoon]

Check your positioning and make sure it's not somewhere off-screen. Make sure there aren't any DIVs covering it up.

[PoeticInsanity]

ok, question on DIVs covering other DIVs. The DIVs go in order they are written correct?
Ex:
DIV1
DIV2
DIV3

DIV3 is on top of DIV2 and DIV1
DIV2 is on top of DIV1
DIV1 is the background
right?

I appreciate all the help

[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.

[coldtrance]

try putting font classes in your css.
example:

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

or:

.Main { position:absolute; left:50%; top:125px; width:800px; z-index:1; margin-left:-400px; padding:0px; border:0px; background-color:transparent; font-family: arial narrow; color: 000000;}

[waccoon]

try putting font classes in your css.
example:

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

or:

.Main { position:absolute; left:50%; top:125px; width:800px; z-index:1; margin-left:-400px; padding:0px; border:0px; background-color:transparent; font-family: arial narrow; color: 000000;}

I dunno how that would help, since the text isn't there at all. I'm pretty sure it's a positioning problem.

[duplicatex0x0x0]

Divs are made up of levers the layers are affected by the z-index of each div.

background - 0 (bottom)
1st div - 1 (on top of bottom)

[waccoon]

Divs are made up of levers the layers are affected by the z-index of each div.

background - 0 (bottom)
1st div - 1 (on top of bottom)

Read my previous post. :/

[PoeticInsanity]

Thanx, I'm not too familiar with DIVs. Actually this is the first time I've tried using them, and was unaware of the z-index. That seems like it should work. Thanx for the help.