So I'm trying to do a sliding door CSS menu -- basically one image that you move the background position on when it's hovered or when it's active.
However, usually when I move to the next link using:
#xmenu li.ypart {width:80px; height:35px;}
#xmenu li.ypart a {background-position:-33px 0px; }
It takes from the last link to whatever width I specify. See the MAP icon on the image below? I'm trying to link it so that the link doesn't go all the way from the SEND FEEDBACK link to the map button. I just want the link to be that square.
So any ideas?
If I understand correctly, you should make the link (the <a> element) a block element and give it a specific width and height (and maybe relative/absolute positioning, depending on how your layout is set up). That way, the hit area for the link will be confined to those dimensions.
Something like this for the markup:
...
Map
...
And something like this for the CSS:
#xmenu li.ypart a { display: block; width: 40px; height: 35px; }
Related
This is a longer story I'm trying to cut short. Generally I'm playing around with a website menu that is supposed to partly slide under a partly transparent background gif image, and fully reveal itself only upon mouseover. To do that, I'm using the z-index parameter on both the background image and the menu. But since you can't use z-index on a body background image, I'm using a "regular" image, which I'm setting to 100% width and height - AND for the z-index paramenter to work, I need to specify "position" as well. It seems though that with that combo, I'm basically creating an invisible shield that'll make all links untouchable. I've cooked it down to the following lines:
<style>
#style {
position: absolute;
width:100%;
height:100%;
}
</style>
<div id="style"></div>
test
If you try this, you will see that the "test" link is unclickable (cross-browser).
Does anyone have an idea how I can solve this? Thanks!
<style>
#style {
background-color:#ccc;
position: absolute;
width:100%;
height:100%;
}
a {position:relative} /*won't change position of the link, but shows link above.*/
</style>
<div id="style"></div>
test
<style>
#style {
position: absolute;
width:100%;
height:100%;
z-index: -1;
}
.test {
z-index: 99;
}
</style>
<div id="style"></div>
test
Will work too, along with campino2k's answer.
Thanks for the replies, which pointed me in the right direction. It seems like the div does indeed create an invisible shield, and that shield is (more or less) inpenetrable when it comes to underlying links.
Click through a DIV to underlying elements
#Logan: I'm afraid that approach doesn't work for me. You're suggesting to simply raise the link above the div shield - that, however, defeats the original purpose I've described above (the one with the background image and the menu sliding underneath it).
#campino: I thought this was it, but adding a z-index definition to "style" broke it again. The fact that you colored the entire div field helped me understand what you obvously already knew: As long as the div is over the link, it's not clickable, period.
So all in all, I'm concluding that my approach doesn't work. For the actual project I'll probably cut up my asymmetric background image into several pieces, so the div doesn't cover the entire screen, and is only where I absolutely need it.
I think setting a z-index, though it might work doesn't really address the problem but a kind of a hack that achieves what you want.
The root cause of unclickable links is mostly an element that is improperly positioned through floating, display, or position property. This element is displayed in the foreground of your link creating a shield that prevents you from clicking the link.
The solution to this I found is to use javascript/jquery to console.log or alert the id or class of the element in the foreground when you click.
$('*').click(function (){
alert('class = ' + $(this).attr('class') + ' id = '+ $(this).attr('id'));
});
above will alert the element in the foreground. Now that you know the cause look at its style.
When using the like or send widget on a Fan Page (no mater if you use iframe tag or fbml for it) the overlay for commenting is positioned always to the right. see
http://twitpic.com/4q7ggi for example.
I cant find a way to get the widget to respect the 520px boundary of the facebook tab.
see http://www.facebook.com/pages/Ludwig-Test/127771653944246?sk=app_101150316644842 for an example.
Anyone an idea how to solve this ?
TIA
Rufinus
Try adding this to your css:
.fb_edge_comment_widget {
margin-left: -350px;
}
This will move comment box to the left, but the little arrow pointing to the button will move too (which you could try to cover with another element). It will only work if you're using XFBML, not an iframe.
Here's an example.
I had to move the little arrow to the bottom, and that's how i did it.
1) Move your popup window to the desired position. Use the !important statement to overwrite default styles.
.fb_edge_comment_widget {
top: -224px !important; left: -246px !important; height: 191px;
background: url(../img/arrow-down.gif) 0 100% no-repeat
}
This style also contains a new arrow image which replaces the bottom line of the popup window. It contains my own new bottom arrow, which is blue (#283E6C) by default and grey inside (#F2F2F2). We can use height to adjust the vertical position and move the background image to the bottom.
The image will look like this:
.
2) Apply overflow: hidden to the span that wraps the iframe, We'll be able to cut off parts of the iframe by applying margin-top in step 3, and replace them with our own.
.fb_edge_comment_widget > span {
height: 184px !important; overflow: hidden; border-top: 1px solid #000;
}
I'm using border-top to create my own upper border, since in step 3 we are cutting of the default border and arrow.
3) Move the iframe up a bit to cut off its upper border and arrow.
.fb_edge_comment_widget > span > iframe {
margin-top: -7px;
}
The result looks like this in my case:
If you're using the XFBML implementation of the Facebook Like button, you can use CSS to re-position the "flyout" menu relative to its original position near the Send button:
The above example using jsFiddle and this CSS:
.fb_edge_comment_widget {
margin-left: -343px;
}
Since the contents of the "flyout" are inside an iframe you won't be able to apply any CSS to it — meaning, moving the triangle indicator to the right side of the "flyout" isn't possible.
Web browsers have tightened security on cross-frame scripting due to spoofing and other hacks, so iframes are treated like separate HTML pages with their own CSS and JavaScript.
For any advanced CSS styling, you would have to inject the Facebook Widget's iframe using DOM Scripting ... and even then it may not work across browsers.
Not a great answer but the only option I have found is to wrap the widget in an absolutely positioned Div to keep it on the left side of the window
To fix it I strongly recommend to put the Facebook widget on the left side of your page. Any other solution could work for a certain period of time, but in the future will fail.
The reason is that Facebook updates its widget frequently.
I've used the div:hover CSS rule to achieve the desired affect - an image "swap" when the mouse hovers over a navigation image: www.scottmccarthydesign.com/dev.index.html
My setup here, however, is not actually a "swap." The main navigation image is a flattened jpeg of the entire desk (for faster loading), and there are empty divs over each item on the desk to map the image with links. When these empty divs are moused over, the div:hover rule fills the div with a .png that is meant to be placed precisely over the main desk image to give the effect of an image swap.
It works nicely in Firefox, but I do not understand why Safari is positioning the :hover image over the desk differently than Firefox is - each :hover image is about 1 pixel off, making it look like the seperate images on the desk are actually shifting a bit when moused over. Any suggestions??
I've had trouble using the :hover pseudo-class on elements other than <a></a>. You could use (jquery/javascript) to alter the class of the said <div> using onmouseover and onmouseout events.
With onmouseover, add a class that defines a certain background image. With onmouseout remove that class.
Even easier, use jquery .hover()
reposition your links after adding this to your css:
a div {
line-height: 0;
}
I've come across this issue before and found that it had to do with the size of the image. When the image is an odd-number pixel size on one of its dimensions, the calculations done by Firefox and Chrome/Safari (particularly when using center) are slightly different. Essentially, it has to do with sub-pixel rounding.
Simply add or subtract a pixel to your images on the axis that has an odd number length, to make them an even number (ie - instead of 100x123, make it 100x124) and you should be golden.
No need to use Javascript, this can certainly be achieved using just CSS. In my opinion, your best bet is to use the technique discussed in this article on CSS Sprites: http://www.alistapart.com/articles/sprites.
Essentially, for each item on your desk, place the hovered and non-hovered image in same image, one on top of each other, so that the top area has the non-hover state, and the bottom area has the hover state. Your code will probably look like this modified:
div#keyboard2 {
position: absolute;
left: 89px;
top: 256px;
width: 67px;
height: 160px;
background: url(../images/keyboard.png) 0 0 no-repeat;
}
#keyboard2:hover { background-position: 0 100%; }
Your desk image will then be empty, and of your items will just be on top of it.
How can I do to have an image as the background for all links? I want to have a nice box representing buttons, but I cannot figure this out.
I have tried:
a {
font-size: 40px;
background: url('images/shooting-stars/shooting-star-link.png') no-repeat left top;
}
But this is not working, image is not displaying.
"I want to have a nice box representing buttons, but I cannot figure this out." - I don't understand this part.
Anyway, your css looks fine from here, are you sure the image exists? This is a working example with the exact same code, just an image that I'm sure exists:
http://jsfiddle.net/3k9nm/
If you want to always show the image, even if the text is shorter, you should set a minimum width for the links. This does mean they'll have to be inline-blocks, you can't set width on a regular link (which is an inline element).
a {
display: inline-block;
min-width: 25px;
}
(25px was randomly chosen, fill in the width of your background image..)
Two things to try, is there any text in the actual <a> links? And if you use Firebug, you can check you've definitely got the right file path to the image...
HTML
<div id="example-link">
Link to journal article
</div>
CSS
#example-link a {
background: url('images/shooting-stars/shooting-star-link.png');
}
I have a semi-transparent PNG as a background image for a div that that I'm placing over some links. As a result, the links aren't clickable. Is there a way I can hover and click "through" the div that's on top? (BTW, to position to foreground div I'm using absolute positioning and z-index.)
Thanks!
Mike
Why not put the image in the BACKGROUND (you know, like the background-image property that they built for that reason)? The only way to do that is with some highly advanced scripting which would slow your page down, not worth it. You shouldn't be putting an image over your links.
One option would be to use :hover to bring the z-index of the link tags forward above the PNG.
div.container .links {
z-index:0;
}
div.container .background {
z-index:1;
}
div.container:hover .links {
z-index:2;
}
I haven't tested this but I imagine it will have the links behind the shadow when the container isn't hovering but will pull the links before the shadow when the container is hovering.
First, there shouldn't be any reason why you could not put the foreground transparency within the link itself, and thereby avoid the un-clickable problem. Let's take a simple example:
<img src="xxxx.jpg" alt="this link" />
With the new layer this then becomes:
<img src="xxxx.jpg" alt="this link" /><span class="button_overlay"></span>
(I've added class names to aid with coding illustration.)
The overlay would then be styled and positioned absolutely above the original link content. The overlay code piece is inline and follows the piece that belongs in the background, therefore it will naturally get layered above the prior code without extra coding.
The first thing to do is to apply some formatting properties to the anchor to keep the anchor inline but accept internal absolute-positioned elements. (The -moz- command is to support FireFox 2.)
.layered_button {
display: -moz-inline-block;
display: inline-block;
}
Then position your decorative semi-transparent layer over the button.
.button_overlay {
position: absolute;
left: 0px;
top: 0px;
width: XXpx;
height: XXpx;
background: url('xxxx.png') no-repeat 0px 0px;
_background-image: none;
}
The _background: property is a hack to remove the semi-transparent image from display on Internet Explorer 6 versions since there is an inherent problem with this browsers support of transparent PNG images. A regular GIF image could also be substituted if an alternate image is available for IE6 display.
One additional thing you should do is make sure all the content within the link provides the proper cursor interraction. (Some browsers, especially some Internet Explorer versions, do not provide expected cursor changes for markup within links.)
a:hover * {
cursor: pointer;
}
Your second option might be to use a JavaScript library to provide event handling beyond the basic HTML. The reason I suggest a JavaScript library is that most browsers still do not properly support CSS version 2 methods where you can apply the pseudo-class :hover to elements of the DOM other than anchors. The best way to approach this support for now is using libraries.
I particularly like jQuery and adding this hover property can be as easy as:
$("#button_block .layer_object").hover( // div layer hover action
function(){ }, // MouseOver
function(){ } // MouseOut
).click( // div layer clicked: go to address from original link
function(){ window.location = $("#button_block .layered_button").attr("href"); }
);
Alternately, you can make a click on the div layer act as a click on the link with:
$("#button_block .layer_object").click( // div click = anchor click
function(){ $("#button_block .layered_button").click(); }
);
[The reference to #button_block is assuming the two objects reside in the same wrapper with an ID of button_block, and .layer_object is the independent div placed over the link.]
this problem was solved here: Click through a DIV to underlying elements