CODEWITHSUNDEEP
javascripthtmlcss
culter
culter

Reputation: 5697

<a> doesn't work within a <div>

I have a button with three states (three different images) and it works and looks great except the primary function of a button - link to other document:)

When it's clicked, nothing happens. Do I need to use javascript or <input> or <button>?

I've tried it with <button> tag, but that three states didn't work.

And <a id="backbutton">... doesn't work either.

#backbutton{ width: 100px; height:100px; background-image: url('../obrazky/fs/back_up100.png'); }
#backbutton:hover{ background-image: url('../obrazky/fs/back_hover100.png'); }
#backbutton:active{ background-image: url('../obrazky/fs/back_down100.png'); }


<div id="backbutton"><a href="index.html"></a></div>

Upvotes: 2

Views: 2173

Answers (5)

kapa
kapa

Reputation: 78671

The easiest (and cleanest) way is to not include that div there, just put display: block; on the link. That will make it become a block element, so, well, behave like a div would.

<a id="backbutton" href="index.html"></a>

And to the CSS:

#backbutton { display: block; width: 100px; height:100px; ... }

jsFiddle Demo

And to answer your sidequestion: for linking to another document, the right element to use is an a with its href attribute pointing to the other document. The button tag and the button variations of the input tag (button, submit, reset) are for defining actions that the user can take on the page (like submitting a form - which as a sideeffect might take you to a different page).

Upvotes: 3

spraff
spraff

Reputation: 33395

You have nothing inside the a tag. Stick in a <span style="width:100%"> or something like that.

Edit: Gaby is right, this isn't a portable solution. Some other inline item, then. An invisible img?

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195992

Use 

#backbutton a{display:block;width:100%;height:100%;}

to make the link inside the div to fit its container..

Upvotes: 4

sarahhodne
sarahhodne

Reputation: 10116

Try to add the following CSS:

#backbutton a { width: 100%; height: 100%; margin: 0; padding: 0; }

The problem is that the <a> tag, which is the actual pushable link, doesn't have any content and therefore doesn't take up any space, so there's nowhere to click. I believe this CSS will expand it to the full size of the div#backbutton.

Upvotes: 0

Tom Gullen
Tom Gullen

Reputation: 61727

<div id="backbutton"><a href="index.html"></a></div>

There is nothing to click on! Try:

<div id="backbutton"><a href="index.html">Go home</a></div>

Or:

<a id="backbutton" href="index.html"></a>

And then add:

display:inline-block;

To the backbutton class.

Upvotes: 2

Related Questions