|
|
Posted by Rob Stampfli on 11/13/24 11:46
In article <4456d214$1@quokka.wn.com.au>,
ironcorona <iron.corona@gmail.com> wrote:
>Rob Stampfli wrote:
>> In article <44559756$1@quokka.wn.com.au>,
>> ironcorona <iron.corona@gmail.com> wrote:
>>> 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
>>> 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.
>
>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
World" verbiage is not vertically centered within the <a>...</a>,
but that's another matter.
>
>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:orange;
>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
Navigation:
[Reply to this message]
|