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
Related
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 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.
This is my code :
HTML
<div class="myDiv">text under link!</div>
<a class="myLinkTransparent" href="#"> </a>
<a class="myLinkRed" href="#"> </a>
CSS
.myDiv
{
position:relative;
z-index:40;
width:310px;
}
.myLinkTransparent
{
z-index:50;
position:absolute;
top:0px;
left:0px;
width:100px;
text-decoration:none;
background-color:transparent;
}
.myLinkRed
{
z-index:50;
position:absolute;
top:0px;
left:100px;
width:100px;
text-decoration:none;
background-color:red;
}
both link with transparent and red background should be "linked".
But in fact, on IE (every version I try: 7,8,9) the link is "broken", such as a "hole" to the text above the link.
Why? And how can I fix this?
1 . The behaviour is not exactly as you expect originally due to Normalized CSS option set in JsFiddle by default (look at the left under JS frameworks choice and so). Lets remove it to guarantee we own all styles.
2 . However, just unchecking that won't fix it completely. You'll be able to sense it on the top left taking small width and height.
To fix the width, you need to set display:block;
3 . To fix the height, you need to set actual height. For example height: 35px;.
4 . After all this, you'll find the link is clickable only in areas that's not text, because the browser knows it's transparent, it thinks it's click-through also.
This behaviour is described here: http://haslayout.net/css/No-Transparency-Click-Bug
You need to apply the below fix (copied from article, just changed filename):
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="non-existing-or-so.png",sizingMethod="scale");
.
The modified fiddle (tested in IE9 standards modes for IE9, IE8, IE7:
http://jsfiddle.net/Meligy/PPdbc/11/
Not sure but may be a bug.
You can try the workaround below
set background-color as green in myLinkTransparent class
Then set opacity to zero just by setting filter:alpha(opacity=0); in myLinkTransparent class
.myLinkTransparent
{
z-index:50;
position:absolute;
top:0px;
left:0px;
width:100px;
text-decoration:none;
background-color:green;
filter:alpha(opacity=0);
}
What I am trying to do is to stack an 'a' tag on top of a 'p' tag using the z-index property. So my html goes like this
<div id="personalText" >
edit
<p id="descText">{{profile.desc}}</p>
</div>
and my CSS goes like this
#editButton
{
position:relative;
z-index:2;
}
#descText
{
position:relative;
margin-top: 5px;
margin-bottom:5px;
z-index:1;
}
I believe this should stack the a on top of the p tag but that is not happening. Can anybody please explain what is that I am doing wrongly?
position: relative doesn't detach the element from the layout, so by default the element still takes up the same spot it would otherwise. relative has two purposes: to offset an element relative to its "real" position in the layout (which would require setting top, left, etc), and to serve as a non-static value so that child elements with position: absolute would position themselves relative to it.
With all that said, what you probably want in order to do what you're trying to do, is to set position: relative on the parent, and position: absolute on the edit link (at least). But that'd probably be quite ugly, as the text would likely overlap and be unreadable.
You have to also put
#personalText
{
position:relative;
}
#editButton
{
position:absolute; /* change */
top:0; /* new */
left:0; /* new */
z-index:2;
}
As Mihalis Bagos states, you need to push your #descText element upwards.
Here's the resulting CSS:
#editButton
{
position:relative;
z-index:2;
}
#descText
{
position:relative;
margin-top: 5px;
margin-bottom:5px;
bottom:25px;
z-index:1;
}
Here's the jsFiddle resulting from it.
This is a perfect use for JavaScript:
CSS
.hidden { display: none; }
jQuery
$('#descText').hover(function() {
$(this).find('a').removeClass('hidden');
}, function() {
$(this).find('a').addClass('hidden');
});
DEMO
Here's how you can put the <a> tag on top of the <p> tag: http://jsfiddle.net/gSWJB/1/
The example shows one possible use case: putting the link on top of the description, where the link might only be shown when the user hovers over it.
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.