SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard
    Join Date
    Jul 2001
    Location
    The Netherlands
    Posts
    2,617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Make a div overlap another one?

    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:

    Code:
    <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">
    &nbsp;
    </td>
    <td background="Images/menutopbg.gif">&nbsp;
    </td>
    <td width="25" height="21" background="Images/menurighttop.gif" style="background-repeat: no-repeat;">
    &nbsp;
    </td>
    </tr>
    				
    <tr>
    <td background="Images/menuleftbg.gif">
    &nbsp;
    </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&#33;</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;">
    &nbsp;
    </td>	
    </tr>
    <tr>
    <td  height="21" background="Images/menuleftbottom.gif">
    &nbsp;
    </td>
    <td background="Images/menubottombg.gif">
    &nbsp;
    </td>
    <td background="Images/menurightbottom.gif" style="background-repeat: repeat-y;">
    &nbsp;
    </td>
    </tr>
    </table>
    
    </div>
    
    
    </div>
    Last edited by Mark T.; Jun 20, 2002 at 08:41.

  2. #2
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The best way to overlap is to use set z-index of one DIV higher than the other. Then position them accordingly. z-index is the 3rd dimension in web design.

    You could also try using negative margins on one element.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  3. #3
    SitePoint Wizard
    Join Date
    Jul 2001
    Location
    The Netherlands
    Posts
    2,617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, let me explain a bit more. I got a hold of the z-index a bit now, and posted my code. Something seems to be wrong with it, or this thing does not apply to a <DIV> containing a .swf.
    The .swf is about 450px wide and 150 px high, but much of that space is not needed. Only a few elements stick out, and the other part is just whitespace. I want another element of my site, a part of the logo, to fill that whitespace up, but somehow it only moves behind the .swf, and not in front of it as I want it to do .

  4. #4
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can't overlap a SWF file. It can't happen.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  5. #5
    Grumpy Mole Man Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,066
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately swf contents (and ther plugins such as java applets) are always rendered at the "top" of the stack - there is no way of getting something else to overlap them as it will just appear to be underneath. I know this is true in IE, not sure about other browsers. In addition, select menus will also ignore z-index and always appear on top of everything else (this is a known issue, something to do with select boxes being rendered as windows widgets).

  6. #6
    <C²: web standards /> cybercodeur's Avatar
    Join Date
    Dec 2001
    Location
    Montréal
    Posts
    729
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I stand with Skunk on this one. I have yet to succeed in positionning a flash file or a form element underneath another positionned layer. As far as I know and as far as my researches have gone, this cannot be done... which is why all flash movies and form elements always end up showing over dhtml menus for instance...

    I pray every night that someone would prove me wrong on this, no doubt!
    Denis Boudreau <C²/> - Web Standards & Accessibility
    [+] ICQ number: 115649885 || Email: denis@cybercodeur.net
    [+] Daily Weblog on Web standards and accessibility : CYBERcodeur.net

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    agreed... no can do... i worked on this project for this large client that you've all heard of... well the client insisted on dhtml dropdown nav across the top of the page... and later decided to add banner ads to the pages... too bad a few of those (swf) banners burned through that lovely navigation.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •