Link tags within a container

R

Rob Stampfli

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.)

Rob
 
I

ironcorona

Rob said:
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

in the css:

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

I only discovered the fun things you can do with the anchor tag, if you
set it to display as a block, a few weeks ago.
 
R

Rob Stampfli

in the css:

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

I only discovered the fun things you can do with the anchor tag, if you
set it to display as a block, a few weeks ago.

This doesn't seem to work for me. Take a look at:

<http://cboh.org/spantest.html>

What I'm looking for is a way to make the <a> object span
the entire center block (horizontally and vertically),
instead of just the center slice of the center block --
a way to make the entire center block pink, if you will,
and such that clicking anywhere in the block should take
you to embedded href.

Note that the width parameter seems superfluous in practice,
although I would think it should still be necessary. The
"display:block" appears to make the <a> object 100% wide,
but I can't figure out how to do the equivalent with its
height. (Sure, I could code "200px" as the height, but
that would not work if the exterior container changed size.)

Rob
 
D

dorayme

This doesn't seem to work for me. Take a look at:

<http://cboh.org/spantest.html>

Try this:

<table><tbody><tr>
<td style="width: 100px;height:100px"> &nbsp;</td>
<td style="width: 200px;">
<a style="display: block; height:
100%;padding-top:50%;padding-bottom:50%;"
href="spantest.html">Hello World</a>
</td>
<td style="width: 100px;">&nbsp;</td>
</tr></tbody></table>

(I just added to your code...)
 
R

Rob Stampfli

Try this:

<table><tbody><tr>
<td style="width: 100px;height:100px"> &nbsp;</td>
<td style="width: 200px;">
<a style="display: block; height:
100%;padding-top:50%;padding-bottom:50%;"
href="spantest.html">Hello World</a>
</td>
<td style="width: 100px;">&nbsp;</td>
</tr></tbody></table>

(I just added to your code...)

Thanks for your suggestion. It's getting closer, but if you
look at the results:

<http://cboh.org/spantest2.html>

you'll see adding padding increases the height of the container,
and as the text in the cell increases (folds onto multiple lines),
the height increases even more. The vertical size apparently
becomes 100% of the original container height, plus the height
of the text. Surely there must be a way of expand the <a> tag
vertically without increasing the container height (unless there
is so much text involved that it becomes necessary to do so).

Rob
 
N

Neredbojias

To further the education of mankind, (e-mail address removed) (Rob Stampfli)
vouchsafed:
Surely there must be a way of expand the <a> tag
vertically without increasing the container height (unless there
is so much text involved that it becomes necessary to do so).

You are talking about changing the link height in an inversely proportional
manner, and AFAIK that can't be done. (Without script.)
 
I

ironcorona

Rob said:
This doesn't seem to work for me.

I'm stumped by your code. I can't work out what is keeping the "Hello
World" link in the centre (vertically). I've taken out everything that
could be responsible for it and it's still hanging there, looking at
me... Try it out. It's freaky as hell. It's the code from this page:
http://cboh.org/spantest.html
And it's what caused my suggestion not to work.

Just one thing; if you've set the width and height properties for a box
you don't need a non-breaking-space to hold it open. Anyway, here's
some code, very similar to your own where what I proposed above worked
(it's a little simplified from your version):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>test</title>
<style type="text/css">
table {margin:0 auto;}

td {width:100px; height:200px;}

td a {display:block; width:100%; height:100%; background-color:eek:range;
text-align:center;}


a:hover {background-color:yellow;}
</style>
</head>

<body>

<table border="1"><tr>
<td>
</td>

<td style="width:200px;">
<a href="#">Hello world</a>
</td>

<td>
</td>
</tr></table>

</body>
</html>

There's no good way to get the link in the centre (vertically) so this
is as close as I can get. I might suggest using an image instead of
link text.
 
R

Rob Stampfli

I'm stumped by your code. I can't work out what is keeping the "Hello
World" link in the centre (vertically). I've taken out everything that
could be responsible for it and it's still hanging there, looking at
me... Try it out. It's freaky as hell. It's the code from this page:
http://cboh.org/spantest.html
And it's what caused my suggestion not to work.

I belive the answer is that, unless specified otherwise, what goes
in the <td> defaults to being vertically centered. In your example
below, the <a>...</a> is still vertically centered within the <td>,
but with a height of 100%, it is immaterial. Of course, the "Hello
Just one thing; if you've set the width and height properties for a box
you don't need a non-breaking-space to hold it open. Anyway, here's
some code, very similar to your own where what I proposed above worked
(it's a little simplified from your version):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>test</title>
<style type="text/css">
table {margin:0 auto;}

td {width:100px; height:200px;}

td a {display:block; width:100%; height:100%; background-color:eek:range;
text-align:center;}


a:hover {background-color:yellow;}
</style>
</head>

<body>

<table border="1"><tr>
<td>
</td>

<td style="width:200px;">
<a href="#">Hello world</a>
</td>

<td style="height:400px">

^^^^^^^^^^^^^^^^^^^^---- Try adding this property
</td>
</tr></table>

</body>
</html>

There's no good way to get the link in the centre (vertically) so this
is as close as I can get. I might suggest using an image instead of
link text.

Try adding the "height:400px" property, as I've done above, and
look at what happens.

(Or just pull up <http://cboh.org/spantest3.html>)

This is beginning to make sense to me: It appears the browser
is calculating 100% of a height at some point in its process
of laying out the page, but it calculates it prematurely. In
the above (modified) example, my browsers give the <a>...</a>
a height of 200px, even though the table row winds up being
400px high eventually.

Admittedly, there are potential problems to going back and
recalculating the height. For instance, if I specify a height
of 110%, it would theoretically cause the table to grow without
bounds. But the way they do it now -- and since both Mozilla,
Opera, and Konqueror all seem to be consistent in this respect,
I suspect it is the way it is defined in the standards -- is
really counterintuitive to me.

So, my guess is the reason your example worked is that you gave
the height in the internal stylesheet, so it was known when the
height property of the <a>...</a> was evaluated, whereas I gave
the height on an inline style attribute, apparently after the
height of the <a>...</a> had already been finally determined.

Rob
 
I

ironcorona

Rob said:
I belive the answer is that, unless specified otherwise, what goes
in the <td> defaults to being vertically centered.

*smacks forehead* Of Course! Yep, you're right. I even knew that.
Thanks for the reminder.
^^^^^^^^^^^^^^^^^^^^---- Try adding this property


Try adding the "height:400px" property, as I've done above, and
look at what happens.

I've already set the height for all td's to 200px so adding in the
height:400px; (on the right hand cell) seems to push it out to 600px of
height. I didn't expect that to happen at all. The link is being
calculated as being of 200px height (that has been set because *it's*
height is 100% of it's container td which is 200px) and then the table
has to resize itself to accommodate the new 400px td (which is the one
on the right). This seems to be resizing the table's height but not the
centre (one with the link in it) td.

So, for instance, if you use my previous example and then set put the
height rule into the td with the link in it (instead of the one on the
right):

<td style="width:200px; height:400px;">
<a href="#">Hello world</a>
</td>

This will overrule the height (for that td) set in the internal style
sheet and then the link background colour will fill up the entire td.
So, my guess is the reason your example worked is that you gave
the height in the internal stylesheet,

I'm not entirely sure that matters. The cascade nature of CSS is just
there to see which particular rule is applied *if* there are several
rules applied to the same element. It goes in the order: inline,
internal, external.
 
C

Chris Lieb

ironcorona said:
*smacks forehead* Of Course! Yep, you're right. I even knew that.
Thanks for the reminder.


I've already set the height for all td's to 200px so adding in the
height:400px; (on the right hand cell) seems to push it out to 600px of
height. I didn't expect that to happen at all. The link is being
calculated as being of 200px height (that has been set because *it's*
height is 100% of it's container td which is 200px) and then the table
has to resize itself to accommodate the new 400px td (which is the one
on the right). This seems to be resizing the table's height but not the
centre (one with the link in it) td.

So, for instance, if you use my previous example and then set put the
height rule into the td with the link in it (instead of the one on the
right):

<td style="width:200px; height:400px;">
<a href="#">Hello world</a>
</td>

This will overrule the height (for that td) set in the internal style
sheet and then the link background colour will fill up the entire td.


I'm not entirely sure that matters. The cascade nature of CSS is just
there to see which particular rule is applied *if* there are several
rules applied to the same element. It goes in the order: inline,
internal, external.

For the fun of it, try making the <a> be 'display: inline-block;'
instead of just block. I believe that this will allow you to define
width and height properties (not possible with inline) and also have
the <td> stay at your pre-defined 200px height. Note that inline-block
is not supported very well, but you might be able to get the desired
effect on a few browsers.

Chris
 
I

ironcorona

Chris said:
Note that inline-block is not supported very well

Yeah, I was never sure what inline-block did. It works in Opera but not
in FF and seems to work in IE7 (beta 2) [though I think it's ignoring
the rule. inline-block doesn't work in other circumstances].

And besides, it looks similar to one of the other solutions we've been
trying.
 
I

ironcorona

Rob said:
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>
&nbsp;
</td>

<td class="mid">
<a id="unseen" href="#"></a>
<a id="seen" href="#">Hello world</a>
</td>

<td>
&nbsp;
</td>
</tr></table>

</body>
</html>
 
T

Toby Inkster

ironcorona said:
Yeah, I was never sure what inline-block did. It works in Opera but not
in FF and seems to work in IE7 (beta 2) [though I think it's ignoring
the rule. inline-block doesn't work in other circumstances].

"inline-block" works in IE 6 too (and perhaps 5.x, but I can't recall).
Mozilla has the proprietary "-moz-inline-box" value which acts much the
same.

ISTR Safari supports it OK too, but my iBook is out of juice right now.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top