Here's what I'm trying to accomplish...
div1 needs a bg image
div2 needs to be transparent so we see the div1 bg image
div2 also needs to display an image when a:hover is satisfied
Here's what I tried and it only seems to work in IE...
---------- HTM ----------
<body>
<div id="div1">
<div id="div2">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"link.htm" title="Link #1"><img alt="Blank spacer image" src="img-blank.gif" title="Blank spacer image" /><p>Visit the site...</p></a>
</div>
</div>
</body>
-------------------------
---------- CSS ----------
#div1 {
background: transparent url("img-visible.gif") no-repeat 0% 0%;
height: 239px;
margin: 0 auto;
min-height: 239px;
min-width: 585px;
padding: 0;
text-align: center;
width: 585px;
}
#div2 {
background-color: transparent;
height: 239px;
margin: 0;
min-height: 239px;
min-width: 585px;
padding: 0;
text-align: center;
width: 585px;
}
#div2 a,
#div2 a:link,
#div2 a:visited {
background-color: transparent;
margin: 0;
padding: 0;
text-align: center;
}
#div2 a:hover {
background: transparent url("img-hover.gif") no-repeat 0% 0%;
margin: 0;
padding: 0;
text-align: center;
}
-------------------------
Am I missing something?
Thanx.Apart from a <p> enclosed by <a>, not valid, I see no problem.Sheesh!
Can't believe I missed that.
However, still only works in IE.
Any other suggestions?
Thanx.do you need
background-color: transparent;
??
use text-indent instead of that spacer image
I don't think IE works with the hover thing unless it's on A, there are a couple fixes for thatWhat exactly doesn't work?
Results in IE, Moz, FF and Opera were identical.In IE, things work as I would like them to.
When the page loads, I should be able to see the bg image in DIV1. When the hover state is active over DIV2, which is contained inside DIV1, the background should change from the "blank" image to the "visible" image, displayed over the bg image in DIV1.
I hope that makes sense.
Thanx.Try it like this, you may need to change some heights/widths a little:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>css popup</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
#div1 {
background: transparent url("../Images/mainBackground.gif") no-repeat 0% 0%;
height: 320px;
margin: 0 auto;
min-height: 320px;
min-width: 800px;
padding: 0;
text-align: center;
width: 800px;
}
#div2 {
background-color: transparent;
height: 239px;
margin: 0 auto;
min-height: 320px;
min-width: 80px;
padding: 0;
text-align: center;
width: 80px;
}
#div2 a,
#div2 a:link,
#div2 a:visited {
background-color: transparent url("../Images/transparent.gif") no-repeat 0% 0%;;
margin: 0;
padding: 0;
text-align: center;
display:block;
width:80px;
height:80px;
}
#div2 a:hover {
background: transparent url("../Images/myImage.gif") no-repeat 0% 0%;
margin: 0;
padding: 0;
text-align: center;
}
-->
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"link.htm" title="Link #1"><br /><span>Visit the site...</span></a>
</div>
</div>
</body>
</html>
Basically you are doing the same as Pure CSS Popups 2 (<!-- m --><a class="postlink" href="http://www.meyerweb.com/eric/css/edge/popups/demo2.html">http://www.meyerweb.com/eric/css/edge/popups/demo2.html</a><!-- m -->)Dude...
AWESOME!!!
What the heck was I missing?! Was it only the [display:block]?!
Thank you so much!My pleasure.
Check through all the changes and look at the link I gave you.
div1 needs a bg image
div2 needs to be transparent so we see the div1 bg image
div2 also needs to display an image when a:hover is satisfied
Here's what I tried and it only seems to work in IE...
---------- HTM ----------
<body>
<div id="div1">
<div id="div2">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"link.htm" title="Link #1"><img alt="Blank spacer image" src="img-blank.gif" title="Blank spacer image" /><p>Visit the site...</p></a>
</div>
</div>
</body>
-------------------------
---------- CSS ----------
#div1 {
background: transparent url("img-visible.gif") no-repeat 0% 0%;
height: 239px;
margin: 0 auto;
min-height: 239px;
min-width: 585px;
padding: 0;
text-align: center;
width: 585px;
}
#div2 {
background-color: transparent;
height: 239px;
margin: 0;
min-height: 239px;
min-width: 585px;
padding: 0;
text-align: center;
width: 585px;
}
#div2 a,
#div2 a:link,
#div2 a:visited {
background-color: transparent;
margin: 0;
padding: 0;
text-align: center;
}
#div2 a:hover {
background: transparent url("img-hover.gif") no-repeat 0% 0%;
margin: 0;
padding: 0;
text-align: center;
}
-------------------------
Am I missing something?
Thanx.Apart from a <p> enclosed by <a>, not valid, I see no problem.Sheesh!
Can't believe I missed that.
However, still only works in IE.
Any other suggestions?
Thanx.do you need
background-color: transparent;
??
use text-indent instead of that spacer image
I don't think IE works with the hover thing unless it's on A, there are a couple fixes for thatWhat exactly doesn't work?
Results in IE, Moz, FF and Opera were identical.In IE, things work as I would like them to.
When the page loads, I should be able to see the bg image in DIV1. When the hover state is active over DIV2, which is contained inside DIV1, the background should change from the "blank" image to the "visible" image, displayed over the bg image in DIV1.
I hope that makes sense.
Thanx.Try it like this, you may need to change some heights/widths a little:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>css popup</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
#div1 {
background: transparent url("../Images/mainBackground.gif") no-repeat 0% 0%;
height: 320px;
margin: 0 auto;
min-height: 320px;
min-width: 800px;
padding: 0;
text-align: center;
width: 800px;
}
#div2 {
background-color: transparent;
height: 239px;
margin: 0 auto;
min-height: 320px;
min-width: 80px;
padding: 0;
text-align: center;
width: 80px;
}
#div2 a,
#div2 a:link,
#div2 a:visited {
background-color: transparent url("../Images/transparent.gif") no-repeat 0% 0%;;
margin: 0;
padding: 0;
text-align: center;
display:block;
width:80px;
height:80px;
}
#div2 a:hover {
background: transparent url("../Images/myImage.gif") no-repeat 0% 0%;
margin: 0;
padding: 0;
text-align: center;
}
-->
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"link.htm" title="Link #1"><br /><span>Visit the site...</span></a>
</div>
</div>
</body>
</html>
Basically you are doing the same as Pure CSS Popups 2 (<!-- m --><a class="postlink" href="http://www.meyerweb.com/eric/css/edge/popups/demo2.html">http://www.meyerweb.com/eric/css/edge/popups/demo2.html</a><!-- m -->)Dude...
AWESOME!!!
What the heck was I missing?! Was it only the [display:block]?!
Thank you so much!My pleasure.
Check through all the changes and look at the link I gave you.