|
|
Posted by ironcorona on 11/13/54 11:46
Rob Stampfli wrote:
>> ironcorona <iron.corona@gmail.com> wrote:
>> I'm stumped by your code. I can't work out what is keeping the "Hello
>> World" link in the centre (vertically).
>
> 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.
>> here's
>> some code, very similar to your own where what I proposed 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.
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.
--
ironcorona
Navigation:
[Reply to this message]
|