CODEWITHSUNDEEP
htmlxhtmlhyperlinkxhtml-transitional
Piotr Ciszewski
Piotr Ciszewski

Reputation: 1801

<div> within <a>

I have made a simple fragment of html, which contains this:

<a href="#"><div>Something here</div></a>

It obviously alert me that div cannot be inside an <a> tag. I have used a div, because I want the whole box (div in this case) to be a button. So the subclass :hover and a proper button area applies to the whole box, not only a text inside. As far as I remember divs can be used inside tags in html5. I use XHTML 1.0 Transitional. Is there anything I can replace a div with to avoid errors in the code? or should I change xhtml to html5? will it work good without touching the rest of the code? thank you.

Upvotes: 4

Views: 14992

Answers (5)

Nagibaba
Nagibaba

Reputation: 5358

It is way more easier at least

`<div onclik="window.location.href='url'">
</div>`

Upvotes: 0

Jake
Jake

Reputation: 1067

You could try using 'span' elements within the 'a' element instead of divs...

You can apply styles to the span so that it behaves just like the div you wanted (e.g. rich content which is also overally a link).

AFAICS, the only difference between span and div are the default styles, and the elements they're allowed to be children of. But I am willing to be corrected by more learned contributors...

Upvotes: 1

Akhilesh B Chandran
Akhilesh B Chandran

Reputation: 6608

You could use display:block.

An example is as follows:

HTML:

<a href="#" class="btn"​​​​​​​​​​​​​​​​​​​​​>Button</a>​​​​​​​​​​​​​

CSS:

​a.btn{
    display: block;
    background-color: Green;
    width: 50px;
    height: 25px;
    text-align: center;
    text-decoration: none;
    color: White;
}
a.btn:hover{
    background-color: lightGreen;
    color: Black;
}

​ You can test it live here: http://jsfiddle.net/YdCzY/

Upvotes: 6

Anish Gupta
Anish Gupta

Reputation: 2226

Try using this:

HTML:

<a id="block-a" href="#">Something here</a>

CSS:

#block-a {
    display: block;
}

Upvotes: 1

Chris
Chris

Reputation: 4368

Use 

<div onclick="..">...</div>

or a display: block; on your a-tag (http://green-beast.com/blog/?p=74)

Upvotes: 0

Related Questions