Use CSS display: hidden; to remove div

lorne17 · September 16, 2009, 8:54pm

Hello there,

I’m curious to know if it is possible to have one div below another (same size). The lower Div has an image in it that is a link. The div on top has a translucent image (a color tint) that is not a link. Is it possible to us CSS display:none; or visibility: hidden; (I tried both properties and both work the same) property to remove the higher div with rollover and be able to click the link in the bottom div?

I hope this makes sense.

Here’s my test page…it’s sort of working just flickers and the rollover is very inconsistant: http://www.slarc.com/test/test2.html

Here’s my code:

			<div id="tint4">
            <!-- end #tint4 --></div>
			<div id="box4">
                  <a href="http://www.google.com"><img src="Images/SplashImages/image1.jpg" /></a>
					<div id="title4">
                   		 <p>box4</p>
                 	 <!-- end #title4 --></div>
  	        <!-- end #box4 --></div>

My CSS:

#box4{
	font-size: 30px;
	position: absolute;
	left: 0px;
	top: 256px;
	width: 165px;
	height: 165px;
}
#tint4{
	background-image:url(Images/SplashImages/image0-invisibleTint.png);
	position: absolute;
	left: 0px;
	top: 256px;
	width: 165px;
	height: 165px;
	z-index: 100;
}
#tint4 {
  visibility: visible;
}
#tint4:hover {
  visibility: hidden;
}

I may just be approaching this entirely the wrong way, but I was hoping to stay away from js. Unless I should incorporate jquery or something.
Thanks,
Lorne

Raffles · September 16, 2009, 9:10pm

Apply the hover to a container instead:

<div class="tinted">
  <div class="tint">
  </div>
  <div class="info">
    <a href="http://www.google.com"><img src="Images/SplashImages/image1.jpg" alt="A modern-looking house" /></a>
  </div>
  <p>box4</p>
</div>

.tinted {
  position:relative;
}
.tinted div {
  position: absolute;
  left: 0;
  top:0;
  height:165px;
  width:165px;
}
.tinted .tint {
  z-index:2;
  background-image:url(Images/SplashImages/image0-invisibleTint.png);
}
.tinted:hover .tint {
  display:none;
}

Note that this won’t work in IE6, as it doesn’t support :hover on anything other than anchors (links). Also, don’t forget the alt text for images. Alternatively, you could simply use that image as a background on the “info” DIV, and make things a bit neater and simpler.

Not sure where the paragraph is supposed to appear, but it’ll be hidden by the boxes (as it is now).

lorne17 · September 16, 2009, 9:16pm

If you look at: www.slarc.com/test/test2.html it shows the <p> on top of the div. It’s a container and is set to a higher index.

I’ll try your suggestions now.

Thanks,
Lorne

Raffles · September 16, 2009, 9:30pm

Oh yeah, not sure how I missed that. In that case, you’d require this additional CSS:

.tinted p {
  position:absolute;
  bottom:0;
  right:0;
  font-size:4em;
}

PicnicTutorials · September 16, 2009, 9:36pm

Or you do it like this, and it does work in ie6. http://www.visibilityinherit.com/code/linked-image-swap-example.php

lorne17 · September 16, 2009, 10:11pm

Eric,

Is there a way to do this just backwards? This method looks great, however I need the my image that has a translucency to be the same on every page on these divs with a different image behind it. So basically I need the background image to overlap the actual image…therefore needing two divs, one over the top.

Do you know of a better method to accomplish this?

Raffles,
Your method seems to be working. I’m still tinkering with it.

Thanks,
Lorne

Raffles · September 16, 2009, 10:34pm

Regarding IE6, you’ll also have issues with that translucent PNG image. IE6 requires a JavaScript-based fix to make it play nicely with transparent PNGs. Perhaps the easiest solution is simply to create the tinted version offline, and simply use two images (or, even better, combine them into a single image and use CSS sprites).

lorne17 · September 16, 2009, 10:50pm

Yes, I have the IE6 working with my site. I have other pngs that have issues and have now been fixed.

What method would I use for CSS SPrites?

lorne17 · September 16, 2009, 11:30pm

Ok…so I got it workign the way I want.

Check it out: www.slarc.com/test/test.html

The boxes on the right are what my goal was. I tested it in ie6 and it didn’t work. It looks right, but my links are unclickable. I get this error:

IEPNGFix: Children of positioned element are unclickable

I don’t understand why? Cuz the png tint over the image still shows translucent and you can see the image below.

RyanReese · September 16, 2009, 11:47pm

Hi, this is a commmon side effect.

Give the anchors a position:relative; and see if they are clickable now.

That error was so annoying I went into the javascript file and deleted the code for that itself (making sure I didn’t scrwe with anything else)

lorne17 · September 16, 2009, 11:52pm

Well if I change all my positions to relative, then my boxes don’t sit in the correct locations?

Am I missing something here?

Also, what pop-up did you delete? The one I typed up? Or did you go into my JS?

RyanReese · September 16, 2009, 11:58pm

What are you tlaking about? I’m saying when I locally had that error (a year or so ago) I just got annoyed and went into the script ot make it stop whining.

I’m not understnading you.

You say the links aren’t clickable. The <a>. Put position:relative; on there.

lorne17 · September 17, 2009, 12:15am

Ha, that’s what I thought you meant. I was just clarifying about the js.

As far as putting position: relative on my <a> it didn’t work. I think I’m doing it wrong cuz I’m a bit lost.

Now I’m trying:

          <div class="image"> <a href="Images/Logo-Map.jpg" style="position: relative;" class="highslide" onclick="return hs.expand(this)"><img src="Images/SplashImages/image1.jpg" width="100%" height="100%" alt="BOX1" title="Click to enlarge" border="0" /></a>
            <p>box1</p>
            </div>

But that style=“position: relative;” didn’t work?

Thanks,
Lorne

RyanReese · September 17, 2009, 12:26am

Normally it does :).

My IE6 is strangely crashing for some reason so I can’t thoroughly test this.

Make sure the anchor/image have haslayout (try variable combinations) with position:relative;

I guess it’s time to ditch multipleIE’s…can’t read CC’s…crashes a lot…sigh.

[edit]Place this in
*{position:relative;zoom:1;}
If that makes it work (don’t worry about whatit breaks) then find out if it needs the position or the haslayout/combination of it both…[/edit]

PaulOB · September 17, 2009, 1:15pm

As far as putting position: relative on my <a> it didn’t work. I think I’m doing it wrong cuz I’m a bit lost.

I haven’t looked at your page but if adding position:relative still doesn’t allow you to click the links in IE6 then you have no choice but to add an intermediate element to hold the transparent png.

This means that your original element can be the positioned element and you nest an element inside this and apply the transparent png as a background to that element instead. This new element has no position:relative or position absolute applied but of course should have a height and width to match the png image.

This is a common problem with pngs in IE6 and the only optimal solution.

lorne17 · September 17, 2009, 2:46pm

Ok well right now I have my originaly Div at the lowest z-index and that is the <a href>. Then I have the same size div with the same elements at a higher z-index with my .png as the background. When I hover over that div, it disappears and allows me to select the link. However in IE6 the background div doesn’t disappear. So it doesn’t allow me to click the link.

I added Position: relative to the <a href> but didn’t work. Are you saying I should have one div that is the parent and has my linked image in it, then next a child div that holds my png background inside the parent div and not have any position applied to that?

I just want to make sure I’m understanding this correctly?

Thanks,
Lorne

RyanReese · September 17, 2009, 3:04pm

Paul is saying you have an element with a png background that has a position:relative or absolute.

You need to create an element inside that nad place the image on that element instead. Make sure it doesn’t have position:relative; or absolute (basically ths is another wrapping div. The extra element is needed unfortunately :()

lorne17 · September 17, 2009, 3:18pm

Ok, I think I already ahve that going on:

Basically the divs called: greentint, bluetint, orangetint, & yellowtint are inside the parent div called: tintbox1…2,3&4. In my CSS I have position:absolut; applied to the tintbox divs not the "color"tint divs. This is what I have and IE6 still doesn’t work.

What am I missing? I think I’m just confusing myself more and more.

Thanks for all the help on this guys,
Lorne

/***	Box Divs			***/
.tintbox1, .tintbox2, .tintbox3, .tintbox4{
	text-align: right;
	text-transform: lowercase;
	color: white;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	z-index: 10;
}
.tintbox1 div {
	position: absolute;
	left: 162px;
	top: 0px;
	height: 47px;
	width: 47px;
}
.tintbox2 div {
	position: absolute;
	left: 210px;
	top: 47px;
	height: 64px;
	width: 64px;
}
.tintbox3 div {
	position: absolute;
	left: 105px;
	top: 112px;
	height: 105px;
	width: 105px;
}
.tintbox4 div {
	position: absolute;
	left: 0px;
	top: 256px;
	height: 165px;
	width: 165px;
}
/***	TINT OVERLAP SWAP	***/
.greentint {
	z-index:20;
	background-image:url(Images/RightContainer/tint-green.png);
}
.bluetint {
	z-index:20;
	background-image:url(Images/RightContainer/tint-blue.png);
}
.orangetint {
	z-index:20;
	background-image:url(Images/RightContainer/tint-orange.png);
}
.yellowtint {
	z-index:20;
	background-image:url(Images/RightContainer/tint-yellow.png);
}
.tintbox1:hover .greentint {
	display:none;
}
.tintbox2:hover .bluetint {
	display:none;
}
.tintbox3:hover .orangetint {
	display:none;
}
.tintbox4:hover .yellowtint {
	display:none;
}
/***	BOX <p> TITLES	  ***/
.tintbox1 p, .tintbox2 p, .tintbox3 p, .tintbox4 p{
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	z-index: 30;
}
.tintbox1 p{
	font-size: 14px;
	position:absolute;
	bottom: -3px;
	right: -1px;
}
.tintbox2 p{
	font-size: 20px;
	position:absolute;
	bottom: -5px;
	right: -1px;
}
.tintbox3 p{
	font-size: 26px;
	position:absolute;
	bottom: -6px;
	right: -2px;
}
.tintbox4 p{
	font-size: 32px;
	position:absolute;
	bottom: -7px;
	right: -1px;
}
.tintbox1 img, .tintbox2 img, .tintbox3 img, .tintbox4 img, {
	width: 100%;
	height: 100%;
}

          <div class="tintbox1">
            <div class="greentint"></div>
            <div class="image"> <a href="Images/FirmProfile/Logo-Map-White-bg.jpg" class="highslide" onclick="return hs.expand(this)"><img src="Images/FirmProfile/Logo-Map-small.jpg" width="100%" height="100%" alt="BOX1" title="Click to enlarge" border="0" /></a>
                <p>where</p>
            </div>
        </div>
		  <div class="tintbox2">
            <div class="bluetint"></div>
		    <div class="image"> <a href="Images/FirmProfile/Spiral-large.jpg" class="highslide" onclick="return hs.expand(this)"><img src="Images/FirmProfile/Spiral-small.jpg" width="100%" height="100%" alt="BOX2" title="Click to enlarge" border="0" /></a>
                <p>how</p>
	        </div>
	    </div>
		  <div class="tintbox3">
            <div class="orangetint"></div>
		    <div class="image"> <a href="Images/Big-Corner-Logo.jpg" class="highslide" onclick="return hs.expand(this)"><img src="Images/SplashImages/image3.jpg" width="100%" height="100%" alt="BOX3" title="Click to enlarge" border="0" /></a>
                <p>what</p>
	        </div>
	    </div>
		  <div class="tintbox4">
            <div class="yellowtint"></div>
		    <div class="image"> <a href="Images/bg-Yellow.jpg" class="highslide" onclick="return hs.expand(this)"><img src="Images/SplashImages/image4.jpg" width="100%" height="100%" alt="BOX4" title="Click to enlarge" border="0" /></a>
                <p>who</p>
	        </div>
	    </div>

PaulOB · September 17, 2009, 3:25pm

When I hover over that div, it disappears and allows me to select the link.

You can’t hover divs in IE6 - did you mean a link?

lorne17 · September 17, 2009, 3:34pm

oh well I got help on that css…that’s prolly the issue. I basically have made the on hover make the "color"tint div disappear so I can click the image I’ve placed in the dev below that.

Is there an alternate way to fix that?

Thanks,
Lorne