I cannot get this link to be clickable for the life of me. When I take it outside of the 'lb' div it functions. I've applied z-index values and it doesn't change anything. I'm about to rip my hair out. Some help, please.
<div id="lb">
<div id="cntct">
<div id="map">
This is a link
</div>
</div>
</div>
CSS
#lb
{
position:relative;
top:-50px;
z-index:-20;
background-image:url(../src/images/Lbkg.jpg);
background-repeat:no-repeat;
height:650px;
overflow:auto;
}
#cntct
{
position:relative;
top:70px;
background-image: url(../src/images/cntct.png);
background-repeat:no-repeat;
background-position:center;
height:400px;
width:1000px;
margin:auto;
z-index:-10;
}
#map
{
position:relative;
top:45px;
left:50px;
width:600px;
height:400;
z-index:5;
}
try taking the top style off it - hard to tell with only the code you have posted, but it may be pushing it out of the div, meaning that something else (that is transparent) is overlaying it, and intercepting the click.
If you're using firefox/chrome/etc, you can try to right-click on the link, and inspect element (or similar command) - should open the DOM browser with the element you clicked on selected. If the link isn't selected in the DOM (ie some other element is selected) then that element is on top of the link, intercepting clicks...
Please try it:
Remove z-index property for #lb and #cntct.
Related
It's hard to explain without a picture, so if your willing to help, visit this page: http://www.laoistidytowns.ie/node/2
Ok, so on this photo I have the following CSS: (note this is just one picture, but i have classes for each placename)
.ballacolla
{
float:left;
position:relative;
width:200px;
height:200px;
margin-right:40px;
margin-bottom:46px;
}
.ballacolla a
{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
text-decoration:none; /* Makes sure the link doesn't get underlined */
z-index:10; /* raises anchor tag above everything else in div */
background-color:white; /*workaround to make clickable in IE */
opacity: 0; /*workaround to make clickable in IE */ <br>
filter: alpha(opacity=1); /*workaround to make clickable in IE */
}
.innerbox
{
position: absolute;
bottom: 0;
width:180px;
height:30px;
background-color:#000;
opacity:0.75;
filter: alpha(opacity=40);
padding-left:20px;
padding-top:10px;
z-index: +1;
}
p.boxtag
{
color:#fff;
}
HTML:
<div class="ballacolla"><div class="innerbox"><p class="boxtag">Abbeyleix</p></div></div>
.ballacolla = the dic square container
.ballacolla a = allows the div to be clickable
.innerbox = dark grey box on the bottom
.boxtag = the writing in the innerbox
My problem is the innerbox (grey box) disappears if the link is working. How do I stop the innerbox from disappearing?
Most likely, even with HTML5, you are having difficulties with the div in the link...mixing inline with block styles.
I would take a look at some of the other threads on here pertaining to that. This one points you to a good method of styling a span as a div using a special class and the display;block method: div inside anchor
you can always go for the onclick=(); event on the div as well and eliminate the a tag all together.
In your styles, it says opacity:0 for a tags. Add a class a below.
.field-items a{
background:none;
opacity:1;
}
Ok guys I figured it out. I had to close the tag right after the first div in my html. ie my html now looks like : <div class="abbeyleix"><div class="innerbox"><p class="boxtag">Abbeyleix</p></div></div>
the reason you don't have anything between the tag is because you actually are doing all the work in the CSS... such a simple fix, but it's working now, thank you all for your help
I have an image which has and inner border with opacity set to .7 and round corners, which works great. The only problem is i need to add a hover state to image. I have tried :hover but nothing seems to work.
The border needs to go blue and with a png overlay.
HTML:
<div class="box" >
<div class="imgWrap">
<img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2013/6/19/1371640593241/Morris-the-cat-009.jpg" alt="product1" >
</div>
</div>
CSS:
.box{
width:191px;
background:#FCFBDF;
margin: 0 auto;
}
img{
width:191px;
height:191px;
display:block;
border-radius:50%;
}
.imgWrap{
position:relative;
}
.imgWrap:after{
content:"";
position:absolute;
top:0; bottom:0; left:0; right:0;
opacity:0.5;
border: 10px solid rgba(248, 248, 255, 0.7);
border-radius:50%;
}
JS Fiddle here
http://jsfiddle.net/zangief007/52fFF/3/
I am guessing you tried to fire the hover state on the image like this :
img:hover{
.. your code ...
}
But as there is a pseudo element over it, you can never hover the image.
The workaround is to trigger the hover state on the pseudo element like this :
.imgWrap:hover:after{
border-color:blue;
background: url('PATH TO YOUR IMAGE');
}
DEMO
Add hover like this.
.imgWrap:hover{
width:250px;
}
PS : I am just adjusting the width based on hover. But you could do whatever you like in the hover.
Hope this helps.
Cheers!
EDIT : Assuming you don't need to modify the image with the cat, web-tiki's solutions seems better.
I think you may have to use some Javascript/Jquery, as long as you can't directly trigger a mouse hover on the image (because there is some element above).
Here is an example.
$(".imgWrap").hover(function(){
$('img').toggleClass("imgHover");
$('.imgWrap').toggleClass("imgHover");
$('.box').toggleClass("imgHover");
});
.imgHover{
width:300px;
height:300px;
}
try this in your JSFiddle. don't forget to add Jquery lib
http://jsfiddle.net/52fFF/11/
As example i just changed the size of the Box, the Circle and the image.
I have an image we're using for navigation at the top of a website. I used to set links for each section of the banner. I want to an achieve an opaque effect on hover for each part of the image. Is this possible? Thanks much, Dane.
You could slice the image into seperate images; one for each roll over, the image would still appear to be one image but would have different sections; for the hover you could then either use javascript or have it replace the image with another that appeared opaque
This site shows both the JS method and the CSS method...
http://www.webvamp.co.uk/blog/coding/css-image-rollovers/
just repeat it for each part of the image
You can have a div over each section. Each div would call a javascript event. This even can change the div's style. Something like this:
<javascript>
function changeCss(getId){
var getDiv = document.getElementById(getId)
getDiv.className ="myHover"
}
</javascript>
<styles>
.plain{
width:150px;
height:200px;
position:absolute;
top:0;
left:0;
z-index:1000;
background-color: #666699;
}
.myHover{
width:150px;
height:200px;
position:absolute;
top:0;
left:0;
z-index:1000;
background-color: #666699;
filter: alpha(opacity=80);
}
</styles>
<div onMouseOver="changeCss(this.id)" id="wait" class="plain">
<img src=""/>
</div>
This is just free hand and has not been tested. Give it a try and let me know if there are any issues.
I want to keep a div on another div, which is linked to any site.
here is my css
.link_div a {
float:left;
width:80px;
height:20px;
background:yellow;
}
.over {
position:absolute;
left:0;
top:0;
background:red;
width:80px;
height:20px;
}
here is html
<div class="link_div"> HELLO </div>
<div class="over"></div>
Is this possible to keep "Over" div on top and link should be on ?
This is an awesome post:
Click through a DIV to underlying elements
Adding this css to your .over should do it:
pointer-events:none;
plus for IE:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background:none !important;
You could get something like this then:
http://www.searchlawrence.com/click-through-a-div-to-underlying-elements.html
All credits go to this guy's post of course.
Please can anyone help me to put something over the iframe like div or canvas, my case is i have iframe from Photosynth.net, and i need to put like character over this iframe ??
and i use the z-index but still it's not working.
I have created a simple sample showing how to use CSS to position content over top of an iframe. It's just simple CSS layering:
<iframe src="http://phrogz.net/"></iframe>
<div id="over">HI MOM</div>
And then in your stylesheet:
iframe { width:100%; height:300px; border:3px groove #f00 }
#over { font-size:5em; position:absolute; top:20px; left:20px; z-index:2 }