Div question

HTML & CSS
1

Hello,

I have a simple question. I am tying to use a div to mask another div to prevent a user from clicking the child div.

  1. is this possible?
  2. if so - then what would i need to do in order to accomplish this?

Thank you.

2

This is very possible! It’s what flickr does to prevent saving photos :slight_smile:
The easiest way to accomplish this is to use an absolutely positioned div with transparent background and position it on top of the layer you want unclickable.

3

Thank you Ruben,

I tried after searching around on how to do what you asked for - howver failed to accomplish this.

Following is my div code - the first div i am using to mask the second (child div). I see a blue background (due to div one) - however it is not on top of the child div…


<div style="margin: 0px auto; width: 200px; height: 71px; top: 0pt; right: 0pt; position: absolute; background-color: #003366; text-align: center;">
    <object height="71" width="125" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,32,18" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
        <param name="flashvars" value="&amp;col1=0066FF&amp;col2=006600&amp;col3=eeffcc&amp;tzoffset=false&amp;gig_lt=1267554427501&amp;gig_pt=1267554429829&amp;gig_g=1" />
        <param name="src" value="http://www.widgipedia.com/widgets/alhabib/Digital-Clock-Islamic-Ornamental-Button-3409-8192_134217728.widget?__install_id=1267554388500&amp;__view=expanded" /><embed height="71" width="125" src="http://www.widgipedia.com/widgets/alhabib/Digital-Clock-Islamic-Ornamental-Button-3409-8192_134217728.widget?__install_id=1267554388500&amp;__view=expanded" flashvars="&amp;col1=0066FF&amp;col2=006600&amp;col3=eeffcc&amp;tzoffset=false&amp;gig_lt=1267554427501&amp;gig_pt=1267554429829&amp;gig_g=1" type="application/x-shockwave-flash"></embed>
    </object>
</div>
4

No, a parent doesn’t usually cover a child (I’m tempted to say a parent CANNOT cover a child, but then some wiz will come along and show just how to do that).

Normally it’s a sibling div.

If the box you want to cover up has a set height (as Flash usually does), then the sibling who comes afterwards gets the same height (not set in %) and pulled up over with a negative margin.

What I’m not sure of is z-index… or in that direction. IE is pretty famous for placing Flash in its own 9th dimension or something… a whole new page layer, if you will. People have trouble covering up Flash.

If this problem happens to you, you can try the usual trick of windowmode=“opaque” which seems to “bring it back down” to normal page level.

The sibling div may also need relative positioning to get it in a higher z-index (you can then also manually add a z-index too).

<div id=“parent”>
<object…>
</object>
<div id=“cover”></div>
</div>

object {
height: 400px; /or whatever/
}
#cover {
position: relative;
width: same as object
height: 400px;
margin-top: -400px;
}

5

setting the flash to: wmode=“transparent” and with your both assistance mask was succussfully implemented

Thank you!

6

If your Flash IS transparent background, then this will work.

But if your Flash ISN’T transparent background, it will still work (keep the Flash “down”) but it “costs” more for the browser.

7

i guess i spoke too early - in this world of multi-browser - there is more pain than choice for developers.

once again - IE has displayed its superiority by failing to mask the flash. i will try to play around and see what else can be done.

8

I seem to recall similar threads, and I’m sure there’s one where Paul O’B gave some detailed code for the poster to try out to get around this… it’s a fairly common issue… usually setting the windowmode does it.
You may be forced to use what’s called an IFrame Shim, and there is a recent thread about that I think in CSS where the poster had select dropdowns staying above a dropdown… and there are some links to the shim and to one of Paul’s solutions to that.

*edit here it is: http://www.sitepoint.com/forums/showthread.php?t=663161

9

Just out of interest, is that to stop someone hovering/clicking the info button?

10

I’ve an idea…but not sure if its workable. It goes something like this…

html:


<div class="container">
	<object height="71" width="125" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,32,18" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
	...
  </object>
	<div class="mask">
	</div>
</div>

css:


div.container {position:relative;z-index:0}
div.mask {position:relative;top:0px;left:0px;height:71px;width:125px;background:url(image.jpg);z-index:1}

I’m learning too so…ya…no promises…

11 

div.container {position:relative;z-index:0}
div.mask {position:relative;top:0px;left:0px;height:71px;width:125px;background:url(image.jpg);z-index:1}

[/QUOTE]

I would make .mast position: absolute, and those z-indices are probably not needed. The image would need to be a .gif or .png to have any transparency; otherwise the containing div contents will be hidden altogether.

12

Yes you are right. I’m still pretty raw with css. I guess that would work just fine.