Background tricks

[Zimmermann]

How do I accomplish something like what I've attached? One color on the left part of the screen, another on the right part, a line exactly in the middle and my flash animation exactly in the middle.

Thanks

[SlowRoasted]

make the default background color green. make a div layer with white and make it the size to cover half the screen. make sure you set the margins to 0px. make another div with a higher z-index than the white div and set the bgcolor to purple and give it the dimentions you want and textalign center. then put the flash in a div with z-index above all the others and center it...

[Zimmermann]

*confused* I know how to set default background and set the margins to 0px. But I don't understand the other things. Can you make an example? :)

(remember it has to look the same in 800x600, 1024x768 etc.)

[SlowRoasted]

okay, set your background color to that green you want and then put this in your body.


<div style="background-color:#ffffff; width: 50%; height: 500px; z-index: 1; "></div>

then you can do another one but change the color to purple and change the height and width. set the purpl z-index to 2 or anything greater than 1. that will make it a layer above the white div.

[Zimmermann]

everything works except the purple box is not on top of the white box



<div style="background-color:#ffffff; width: 50%; height: 50px; z-index: 1; "></div>
<div align="center"><div style="background-color:#000000; width: 40px; height: 50px; z-index: 2; "></div>
</div>

[SlowRoasted]

try this out


<div style="background-color:#ffffff; width: 50%; height: 50px; z-index: 1; ">
</div>


<div style="text-align= center; z-index: 2;"><div style="background-color:#000000; width: 40px; height: 50px;"></div>
</div>

i think the z-index needs to be in the div with the align=center on it.

[Zimmermann]

nope, it's the same :stunned: