hmm, your css gradient commands seem wrong

chrome is peculiar in its implementation of gradients, in most browsers, gradient type is specified outside the brackets, while in webkit it is specified inside the brackets, also, with css gradients you have to define the direction of the gradient

I would suggest using a css gradient generator to generate your code, so as to implement multi-browser support and make sure you have the correct syntax, here's an example of some code i generated from the colorzilla gradient generator for one of my projects

background: #474747; /* Old browsers */
background: -moz-linear-gradient(top, #474747 0%, #282828 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#474747), color-stop(100%,#282828)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #474747 0%,#282828 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #474747 0%,#282828 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #474747 0%,#282828 100%); /* IE10+ */
background: linear-gradient(to bottom, #474747 0%,#282828 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#474747', endColorstr='#282828',GradientType=0 ); /* IE6-9 */

as for divs being on top of each other, you can apply position: absolute to them in order to get them to stack

dont think I am an expert by any means, but here is what you can try

1. try to display all divs you want on top of each other as inline-block, so that they can first occupy the same line

2. then set all divs to position: absolute

p.s. remember that to absolutely position an element, you have to actually specify where to position it, eg

div { position: absolute; top: 20px; left: 20px; }

this will absolutely position the div 20px from the top and 20px from the left of its parent container

another important mistake you are making is this

div class="bottom layer"

div class="top layer"

to select this divs you need this css

.bottom

.top

or

.layer

or

.bottom .layer

.top .layer

by typing .bottom layer in your css you are selecting a layer property in your .bottom div, which basically doesnt exist

also your containers have child divs with the same class, which causes you problems cause you apply the same css to parent and child elements, set one to id

        <div id="bottom"> <-
// dont set the parent and child divs to have the same class name, 
// that causes your problems
            <div class="bottom"></div> <-
            <div class="Partyscouter"></div>
            <div class="PS-Logo"></div>
            <div class="iPhone"></div>
            <div class="Skyline"></div>
        </div>
        <div id="top">
            <div class="top"></div>
            <div class="Phones"></div>
            <div class="text">FIND YOUR PARTY TONIGHT.</div>
        </div>


#top {
    z-index: 2;
    position: absolute;
    top:20px;
    bottom: 20px;
    display: inline-block;
}

#bottom {
    z-index: 1; 
    display: inline-block;
    position: absolute;
    top:20px;
    bottom: 20px;
}

if i helped even a little bit then I am glad, ill take a look tonight and see if I can help you with what you are trying to accomplish

Michelle,

Thank you very much for your help with gradients. Would you happen to know why my divs are acting funny? I would like them on top of one another, and the text to be placed to the right, since other elements will be placed in the empty spaces.

I applied the absolute position to both the main div nesting the other divs, as well as the specific div layers with gradients, and things still look off. Do you think you can show me revised code, so I can learn? Thank you!

Thank you again Michelle. You've made the process more understandable

Update:

Okay, so I've been fixing the code, and I've gotten closer to the desired product.

http://cssdesk.com/b6vP2

I finally got the main div layers to line up correctly, and I included all of the images except one. But I still need:

-Top layer to have top border transparent for the purpose of the phone to look like it's sliding from behind that area.

-Animations to be checked over to see that they're actually functional. I'm looking to have them initiate at the completion of the page loading, and only occur once, not infinite. When the rest of this layout is developed, i'll most likely be looking to have things activate once they're scrolled to.

-Find out how to position divs correctly, such as the phone, text, and each of the other elements that will be moving or static. Box shadow to have no right/left peaking corners, and be pretty diffused towards the top.

-Make sure I understand how the bottom and top div are interacting with one another. They seem to be positioned differently vertically. Is this because of the z-index placement?

Thank you!