kitster79 Posted March 19, 2009 Report Share Posted March 19, 2009 A couple of questions... 1. Can someone tell me how to make an empty div tag into a link itself? I have a background image in it and I would like it to change to a different background image when hovered over. I just dont know if there is a way the entire empty div act as a button. On another topic... 2. I have a simple text navigation as li elements. I would like the mouse to detect the link when any part of the li box (which is 100 x 30) is hovered over and not just the text itself. How is this done? Thanks in advance. Kit Quote Link to comment Share on other sites More sharing options...
LSW Posted March 19, 2009 Report Share Posted March 19, 2009 1. No, not as a background. It has to be an image. 2. Make the LI a block level element in the CSS. Check out Listamatic for ideas Quote Link to comment Share on other sites More sharing options...
kitster79 Posted March 19, 2009 Author Report Share Posted March 19, 2009 Oh really? Falken, do you know of a way? Quote Link to comment Share on other sites More sharing options...
Andrea Posted March 20, 2009 Report Share Posted March 20, 2009 Oh really? Falken, do you know of a way? What's wrong with what LSW said? Use the image in the html in your division, and you can make it a link - and Listamatic has all kinds of cool navigation lists that you could look at and learn from. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted March 20, 2009 Report Share Posted March 20, 2009 #1 and #2 look pretty closely tied together... basically, you can't make a link with just a div. However, you can set a width and height on a element, and give it "display:block" in the css, so it expands properly. In the first question, you could set the background image of that element, and then have it change on hover. You could also use text indent to hide the text inside the link (this is a bit better from an accessibility standpoint, because remember that screenreaders can't understand background images): link here .button a { width:100px; height:100px; display:block; text-indent:-9999px; background: url(imagehere) 0 0 no-repeat; } .button a:hover { background: url(imagehere2) 0 0 no-repeat; } (I haven't tested this code, but it should work) For the second question, do the same thing as above, but set the width and height and width to whatever you want, and you may need to remove the background image... depends on how you have things set up. link here Does that make sense? Quote Link to comment Share on other sites More sharing options...
kitster79 Posted March 20, 2009 Author Report Share Posted March 20, 2009 Nothings wrong Thelma. I was simply asking if there is an alternative. The trouble with making it an image in the HTML is that I cant have a hover state, right? Quote Link to comment Share on other sites More sharing options...
falkencreative Posted March 20, 2009 Report Share Posted March 20, 2009 Nothings wrong Thelma. I was simply asking if there is an alternative. The trouble with making it an image in the HTML is that I cant have a hover state, right? Not without a javascript based rollover, though it isn't that complicated. Quote Link to comment Share on other sites More sharing options...
kitster79 Posted March 20, 2009 Author Report Share Posted March 20, 2009 Thanks Ben. That's exactly what I was looking for - an alternative that helps me better achieve my goal. You the man! Quote Link to comment Share on other sites More sharing options...
kitster79 Posted March 20, 2009 Author Report Share Posted March 20, 2009 Ben, for the navigation buttons, what if I want to apply the class to the entire ul so that I don't have to add individual classes to each button in the navigation. I tried this but it didnt work... #navWrapper ul a { width: 62px; background-image: url(../images/test.jpg); background-repeat: no-repeat; background-position: 0 0; } Quote Link to comment Share on other sites More sharing options...
kitster79 Posted March 20, 2009 Author Report Share Posted March 20, 2009 Actually, scratch that. I do need different bg images for each button. However, I'm trying to apply the same thing that worked for the thumbnail button to the main navigation, but I think I'm a bit confused as i'm not having the same success as with the thumbnail buttons. I have uploaded my efforts so for...what am I doing wrong? (I only started working on the HOME button) http://vojodesign.com/proofs/PCM/web Quote Link to comment Share on other sites More sharing options...
falkencreative Posted March 20, 2009 Report Share Posted March 20, 2009 You almost have it... just remember that "height:44px; width:63px;" needs to go on the "#navWrapper ul li.home a" not on "#navWrapper ul li.home a:hover", and then adjust from there. Quote Link to comment Share on other sites More sharing options...
kitster79 Posted March 20, 2009 Author Report Share Posted March 20, 2009 Hmm, that helped, but for some reason I can't get the text to push down towards the bottom. I have tried adding top-padding to every tag but its not doing anything!! Sorry for my ignorance. I have re-uploaded the latest files. Do you know what's up? http://vojodesign.com/proofs/PCM/web Quote Link to comment Share on other sites More sharing options...
jlhaslip Posted March 20, 2009 Report Share Posted March 20, 2009 (edited) NavWrapper ul { height: 24px; } or adjust accordingly. Edited March 20, 2009 by jlhaslip Quote Link to comment Share on other sites More sharing options...
kitster79 Posted March 20, 2009 Author Report Share Posted March 20, 2009 Thanks, that pushed the text down, but now the hover state background image is too far down....man, this is confusing! See latest at same URL Quote Link to comment Share on other sites More sharing options...
falkencreative Posted March 20, 2009 Report Share Posted March 20, 2009 Here is what works for me... -- remove the height from "#navWrapper ul" -- remove the height from "#navWrapper li a" -- add "padding-top:20px; padding-bottom:9px; display:block;" to "#navWrapper li a" Quote Link to comment Share on other sites More sharing options...
kitster79 Posted March 20, 2009 Author Report Share Posted March 20, 2009 Yes Ben! That worked a treat. Thanks for your help everyone! Quote Link to comment Share on other sites More sharing options...
Wickham Posted March 20, 2009 Report Share Posted March 20, 2009 (edited) you can't make a link with just a div You can, see the lower empty div with the border in item 3b here:- http://www.wickham43.net/specialeffects.php#highlightedlinks I used a background-color for an empty div that changes on hover and I expect background-images could be used instead. The empty div example works in IE6 provided it has a width (and a height if necessary). Edit: on second reading of Ben's solution, I think it's almost exactly the same as mine, including a way to help screen readers by having link text placed off-screen so that it doesn't show over the background-images. Edited March 20, 2009 by Wickham Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted March 20, 2009 Report Share Posted March 20, 2009 (edited) #1 and #2 look pretty closely tied together... basically, you can't make a link with just a div. However, you can set a width and height on a element, and give it "display:block" in the css, so it expands properly. In the first question, you could set the background image of that element, and then have it change on hover. You could also use text indent to hide the text inside the link (this is a bit better from an accessibility standpoint, because remember that screenreaders can't understand background images): link here .button a { width:100px; height:100px; display:block; text-indent:-9999px; background: url(imagehere) 0 0 no-repeat; } .button a:hover { background: url(imagehere2) 0 0 no-repeat; } (I haven't tested this code, but it should work) For the second question, do the same thing as above, but set the width and height and width to whatever you want, and you may need to remove the background image... depends on how you have things set up. link here Does that make sense? I was like - hey - that's all the code you need!? You guys may remember we did this a while back with Billy. I have my demo of it here. So I tested the code Ben (and Wickham), and while it works, it flickers bad in IE6, 7, and 8. The original posters site flickers bad in IE as well. Mine does not. I imagine it's because (in mine) the first image is on the div and not the anchor. Here - test this - use your own images of course - see if you can find a fix for it - I couldn't. { visibility: inherit; } Testing <br /><!--<br />#one a {<br />display:block;<br />height:250px;<br />width:350px;<br />background:url(../code/images/a.jpg) 0 0 no-repeat;<br />}<br />#one a:focus, #one a:hover, #one a:active{<br />background:url(../code/images/b.jpg) 0 0 no-repeat;<br />}<br />--><br /> Edited March 20, 2009 by Eric Quote Link to comment Share on other sites More sharing options...
falkencreative Posted March 20, 2009 Report Share Posted March 20, 2009 Usually, to get rid of any flicker (which is caused by forcing an extra image to load on hover), I make both the normal state and the hover state one image, and then just adjust the positioning of the background image. For example, I create one image, with the normal state in the top half, and the hover state in the bottom half. Then, I can do something like this: a { background: url(urlhere) top left no-repeat; } a:hover { background: url(urlhere) bottom left no-repeat; } In the case of this thread though, based on how Kit is using it, any potential flicker shouldn't matter, since there is a background image to hide it. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted March 20, 2009 Report Share Posted March 20, 2009 (edited) In the case of this thread though, based on how Kit is using it, any potential flicker shouldn't matter, since there is a background image to hide it. Hi, It's the three boxes in the middle of the page with the play button right? They flicker in IE. Edited March 20, 2009 by Eric Quote Link to comment Share on other sites More sharing options...
falkencreative Posted March 20, 2009 Report Share Posted March 20, 2009 It's the three boxes in the middle of the page with the play button right? They flicker in IE. Good point. I thought Kit was just using it for the navigation (which doesn't appear to be fixed yet) but he is also using it for those three boxes. It flickers in Firefox too -- it's just that the rollover file takes a couple seconds to load. Quote Link to comment Share on other sites More sharing options...
kitster79 Posted March 20, 2009 Author Report Share Posted March 20, 2009 (edited) Ben/Eric, FYI - I updated the HOME and ABOUT buttons with Ben's recommended fixes and they look good now. Yes, you're right Eric, the three boxes in the middle have hover states - but for me only the far left box flickers - strange. So, Ben are you now saying that your second to last post suggestions SHOULD work on fixing the flicker problem now? Edited March 20, 2009 by kitster79 Quote Link to comment Share on other sites More sharing options...
falkencreative Posted March 20, 2009 Report Share Posted March 20, 2009 The images will only flicker as they are downloaded for the first time. Once the images are cached by the browser, there shouldn't be any flicker. For the three boxes on the home page, if you combine the normal state and hover state into one image, with the normal state being in the top half of the image, and the hover state being in the bottom half, you could do something like this: a { background: url(urlhere) top left no-repeat; } a:hover { background: url(urlhere) bottom left no-repeat; } Alternatively, you could follow Eric's example, which uses two separate images. Basically, the element would have a background image which would then be removed using CSS when you hovered over it, showing the background image in the div below. It isn't complicated: http://www.visibilityinherit.com/code/linked-image-swap-example.php/PCM/web/ Either way will work. Quote Link to comment Share on other sites More sharing options...
kitster79 Posted March 20, 2009 Author Report Share Posted March 20, 2009 Perfect! Let me know if there is any flickering on your end now... http://vojodesign.com/proofs/PCM/web Thanks for all your help Quote Link to comment Share on other sites More sharing options...
falkencreative Posted March 20, 2009 Report Share Posted March 20, 2009 Looks good to me Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted March 20, 2009 Report Share Posted March 20, 2009 Only IE6 flickered for me. Quote Link to comment Share on other sites More sharing options...
LSW Posted March 20, 2009 Report Share Posted March 20, 2009 That flicker is because your on such an OLD browser... maybe it was just the Hamster powering everything, he stumbled. I use IE7 on Vista... course my Malamute has to power that!!!!! Things a frigging resource slug. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted March 20, 2009 Report Share Posted March 20, 2009 That flicker is because your on such an OLD browser... maybe it was just the Hamster powering everything, he stumbled. I use IE7 on Vista... course my Malamute has to power that!!!!! Things a frigging resource slug. Yes and no. The browser is old, but there are two ways to do it so that it does not flick at all. My demo for instance... Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.