|
|
Posted by ironcorona on 11/24/82 11:47
Rob Stampfli wrote:
> Suppose you have a container of unknown or variable size.
> How would you specify a link tag inside it such that it
> takes up the entire container, both horizontally and
> vertically, without affecting the containers size unless
> it has to?
>
> For instance, suppose you have a table cell that spans
> several rows and columns. Its ultimate size is determined
> by the surrounding cells. How would you define a <a>...</a>
> sequence such that placing the cursor anywhere within the
> table cell and clicking would cause the browser to reference
> the link? (Spanning the entire container horizonally seems
> pretty easy, but I can't figure out a way to completely
> and seamlessly span it vertically.)
Just for a laugh I came up with this filthy, filthy hack. Under no
circumstances should this be implemented [doesn't work in IE]! I got it
working in Firefox 1.5.0.2 and in the beta version of Opera 9 on XP. I
mainly just wanted to see what the finished product should look like: :)
<html>
<head>
<title>test</title>
<style type="text/css">
table {
margin:0 auto;
width=400px;
height:200px;
text-align:center;
}
td {
width:100px;
background-color:#ddf;
border-collapse:collapse;
vertical-align:middle;
}
td.mid {
width:200px;
background-color:#fdf;
}
td.mid:hover > a#seen {background-color:#dfd;}
td.mid:hover > a#unseen {background-color:#dfd;}
td a#seen {
display:block;
width:200px;
height:100px;
background-color:#fdf;
}
td a#unseen {
background-color:#fdf;
display:block;
height:100px;
}
a:hover {
background-color:#dfd;
}
</style>
</head>
<body>
<table><tr>
<td>
</td>
<td class="mid">
<a id="unseen" href="#"></a>
<a id="seen" href="#">Hello world</a>
</td>
<td>
</td>
</tr></table>
</body>
</html>
--
ironcorona
Navigation:
[Reply to this message]
|