|
|
Posted by Chris Lieb on 12/15/72 11:46
ironcorona wrote:
> 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
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
Navigation:
[Reply to this message]
|