Just a simple question: how do I make one <DIV> partially overlap another one? Right now, the one I want to have underneath the other is overlapping the other, if that makes sense :).
Is there a trick for this?
- Edit -
I already found my answer, now I know what z-index is for. But I have a new question, it seems it isn’t possible for me to layer a <DIV> containing a flash-graphic beneath a <DIV> containing an image. Is this just not possible, or am I using the z-index attribute the wrong way?
I posted my code below:
<div align="center" style="position: absolute; left: 50%; top: 10%; margin-left: -380; width: 760; border-top: 1px solid #000000;" background="images/bodybg.gif">
<div id=logo style="position: absolute; left: 0px; top: 0px; border-left: 1px solid #000000;">
<img src="images/main_01.gif">
</div>
<div id=menu style="position: absolute; left: 168px; top: 30px; z-index: 0;">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
WIDTH=477 HEIGHT=152>
<PARAM NAME=movie VALUE="Prelim3.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="Prelim3.swf" quality=high bgcolor=#FFFFFF WIDTH=477 HEIGHT=152
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></EMBED>
</OBJECT>
</div>
<div id=tagline style="position: absolute; left: 168px; top: 17px; z-index: 32;">
<img src="images/tagline.gif">
</div>
<div id=news style="position: absolute; left: 0px; top: 150px; z-index: 1299939">
<table width="200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="25" height="21" background="Images/menulefttop.gif">
</td>
<td background="Images/menutopbg.gif">
</td>
<td width="25" height="21" background="Images/menurighttop.gif" style="background-repeat: no-repeat;">
</td>
</tr>
<tr>
<td background="Images/menuleftbg.gif">
</td>
<td bgcolor="#aaa8a8">
<!-- The content for the menu goes here -->
<table cellspacing='4' cellpadding='0' bgcolor='#EEEEEE' width='100%' align='center'>
<tr>
<td><font face="Times New Roman" size="1"><b>Rage Site is up!</b></font></td>
</tr>
<tr>
<td><font class="body" size="1">Posted on June 12 2002,4:54 </font></td>
</tr>
<tr>
<td ALIGN="LEFT">
<hr noshade size='1' color='#000000'>
<font class="body" size="1">[ <A
HREF="http://www.rageskatepark.com/cgi-bin/ikonboard/ikonboard.cgi?act=ST&f=11&t=1">View Post</a> |<A
HREF="http://www.rageskatepark.com/cgi-bin/ikonboard/ikonboard.cgi?act=SF&f=11">Read more news...</A> ]</font> </td>
</tr>
</table>
<!-- End of the content area for the menu -->
</td>
<td background="Images/menurightbg.gif" style="background-repeat: repeat-y;">
</td>
</tr>
<tr>
<td height="21" background="Images/menuleftbottom.gif">
</td>
<td background="Images/menubottombg.gif">
</td>
<td background="Images/menurightbottom.gif" style="background-repeat: repeat-y;">
</td>
</tr>
</table>
</div>
</div>