Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.4 is a product of Lussumo. More Information: Documentation, Community Support.
-
Hi there,
I'm busy trying some stuff at my own experiment-website. Getting background images in a div to change using css is ofcourse dead-easy. But how do I go about
getting the divs to link to anywhere? I've tried several things but I can't get it to work. I've also tried putting the background inside the div as an image, which makes linking
really easy but I want a hover to happen. Which doesn't really work with an image.
Check it here
The things that should hover and link are only hovering.
Now does anyone have a solution for this problem? I'd like to solve this using css and html only, no javascript please!
Thanks in advance,
Jorrit
ps: I seem to recall having made this work once before, which is why I am under the impression that it is possible, I could be wrong though. As you can see webdesign isn't really
my main speciality! -
Hi Jorrit,
just insert a link inside the div like this:
<div><a href="..."></a></div>
Your css should look like this:
a {
display:block;
height:inherit;
width:inherit;
}
Now your allready hovering div is linking too :)
Dave. -
Thanks a lot, I knew it probably was something really easy... Shame I didn't think of it myself! Well on to work, lets see when I encounter the next
problem.
Thanks,
Jorrit -
Hmm, this does seem to have a major drawback... It's quite ahrd ot get my textlinks to work normally! They tend to display as a block too, I've tried working around this using 'classes' for either the text links or the hover-image-links, however it never seems to get it. No matter what class i give my links, they'll always pick up the 'display: block' part in the normal a{ } definition. I've ofcourse tried using different 'display: ;' settings through classes, but the block seems to overrule.
Any way to circumvent this?
-Jorrit -
I can't imagine, that this problem can't be solved with classes. The following should work:
<div class="hover"><a href="..."></a></div>
div.hover a {
...
}
Have you tried something like this? It should also work, if you asign the class to the link itself, like this:
<div><a class="hover" href="..."></a></div>
and then apply the style with the following selector:
a.hover {
...
} -
Why use divs at all in this case? Just use "a" tags, and make them "display: block;". Then, you can use the same positioning as you would with a div without the extra markup.
Apply the background image to the link, change it on hover, and use a negative text-indent to hide the text of the link.
-
That's absolutely true! Didn't occure to me.
1 to 7 of 7