Is there a way to make the entire area of a <div> be a proper link?
Right now I'm doing this with javascript using the onclick but this is not good since if I middle click it (on firefox) it doesn't open at all
views:
121answers:
3
+3
A:
What do you have inside the DIV? If it's just text and other inline elements, you can just do:
<div><a href="#" style="display: block;">....</a></div>
Paolo Bergantino
2010-06-28 22:22:15
+11
A:
Your best choice would probably be to turn a link into a block element.
CSS:
#mylink { display: block; }
HTML:
<a href="#" id="mylink">Some Content</a>
derekerdmann
2010-06-28 22:23:16
+1. Let the links do the linking job.
Agos
2010-06-28 22:24:29
because divs are just undifferentiated blocks?
sreservoir
2010-06-29 01:28:51
With this, can I still have `<img>`, `<h1>` etc inside the link block?
shoosh
2010-06-29 06:33:05
Yes you will. Anything that can go inside a normal link can go inside one with a block style.
derekerdmann
2010-06-29 11:12:52
Actually, no. When I put a `<h1>` inside an `<a>` the page fails validation.
shoosh
2010-06-30 07:56:04
"Anything that can go inside a normal link can go inside one with a block style."That still stands. `<a>` tags should not contain block elements.
derekerdmann
2010-06-30 10:43:41
A:
You can make the link a block element or you can do:
<a href="#" style="display: block">
<div>content</div>
</a>
Edit: this fails w3c validation even tho you defined the anchor tag to be "block". I don't know if this is actually against the spec (block elements inside of inline elements) or if the W3C validator simply ignores the style tag and parses it as if it were still an inline element. Does anyone know which the case is? Either way making the anchor tag a block element is the simplest solution <a style="display: block"></a>
mynameiscoffey
2010-06-28 22:50:49
Even if the anchor tag is defined as block it still fails the W3C Validation, I did not know this, learn something new every day.
mynameiscoffey
2010-06-29 01:09:42