How do I link an entire <div> or <li>?

[mestremind]

html:<ul id="default">
<a href="folio.html"><li class="b1"></li></a>
<a href="cast.html"><li class="b2"></li></a>
<a href="#"><li class="b3"></li></a>
<a href="contact.html"><li class="b4"></li></a>
</ul>

How can I link an entire <div> or <ul>/<li> tag that does not contain anything inside. The tags are controlled by css. I would like to link the entire <div>, <li> Example: <a href="contact.html"><div id="contact"></div></a>, Is this legal, I can get this to work in Safari but it will not work in firefox. CSS code for it is:

css:
ul{
margin:0px auto;
padding:0;
list-style:none;
width:637px;
}

#default li.b1 {
background:url(../images/menu/default/out_01.png) top center;
width:131px;
height:58px;
list-style:none;
float:left;
display:block;
}

#default li.b1:hover {
background:url(../images/menu/default/over_01.png) top center;
width:131px;
height:58px;
list-style:none;
float:left;
display:block;
}

Thank you.

[chazzwick]

Quote:

Is this legal?

Lol, dont worry noone will arrest you for doing that. However, its not valid html. If you want to link an entire <li> or <div> which has nothing inside, you will need to use javascript:

Code:

[AshtonSanders]

alternatively, and extra work:

is making sure your <li> doesn’t have any padding, and put the <a> inside with a "display:block" and any other declarations you need to make it fill the <li> (Height? Width?)

For a good example, the tabs at the top of the page (Artiles, forums, …) are <a>’s inside of <li> but you don’t even notie the li’s

Ashton Sanders

[TheDoc]

It should be possible without JS as well:

HTML:

Code:

Link Name

CSS:

Code:

div.name a {
height:100px;
width:200px;
display:block;
background:black;
text-indent:-99999px;
}

An area of 200x100px with a black background should be clickable.

[Chris Coyier]

Yeah I would avoid wrapping DIV’s or LI’s or any other block level element in an anchor. Anchors are inline elements, and that can cause weird results. Even if you redeclare them as block level, that doesn’t help much with CSS off.

Your best bet, like The Doc kinda said, is just to put all the stuff inside the anchor to begin with, and if you need internal tags, use spans.

Code:

Big Link Area
This whole area is clickable

a { display: block; }

[Author]

Posts