Link tags within a container

Discussion in 'HTML' started by Rob Stampfli, May 1, 2006.

  1. Rob Stampfli

    Rob Stampfli Guest

    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
    Rob Stampfli, May 1, 2006
    #1
    1. Advertising

  2. Rob Stampfli

    ironcorona Guest

    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.

    --
    ironcorona
    ironcorona, May 1, 2006
    #2
    1. Advertising

  3. Rob Stampfli

    Rob Stampfli Guest

    In article <44559756$>,
    ironcorona <> 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. 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
    Rob Stampfli, May 1, 2006
    #3
  4. Rob Stampfli

    dorayme Guest

    In article <ZSt5g.24534$>,
    (Rob Stampfli) wrote:

    > In article <44559756$>,
    > ironcorona <> 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. 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...)

    --
    dorayme
    dorayme, May 1, 2006
    #4
  5. Rob Stampfli

    Rob Stampfli Guest

    In article <>,
    dorayme <> wrote:
    >In article <ZSt5g.24534$>,
    > (Rob Stampfli) wrote:
    >
    >> In article <44559756$>,
    >> ironcorona <> 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. 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...)


    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
    Rob Stampfli, May 2, 2006
    #5
  6. Rob Stampfli

    Neredbojias Guest

    To further the education of mankind, (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.)

    --
    Neredbojias
    Infinity has its limits.
    Neredbojias, May 2, 2006
    #6
  7. Rob Stampfli

    ironcorona Guest

    Rob Stampfli wrote:
    > In article <44559756$>,
    > ironcorona <> 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.

    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.

    --
    ironcorona
    ironcorona, May 2, 2006
    #7
  8. Rob Stampfli

    Rob Stampfli Guest

    In article <4456d214$>,
    ironcorona <> wrote:
    >Rob Stampfli wrote:
    >> In article <44559756$>,
    >> ironcorona <> 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: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
    Rob Stampfli, May 2, 2006
    #8
  9. Rob Stampfli

    ironcorona Guest

    Rob Stampfli wrote:
    >> ironcorona <> 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: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.


    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
    ironcorona, May 2, 2006
    #9
  10. Rob Stampfli

    Chris Lieb Guest

    ironcorona wrote:
    > Rob Stampfli wrote:
    > >> ironcorona <> 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: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.

    >
    > 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
    Chris Lieb, May 2, 2006
    #10
  11. Rob Stampfli

    ironcorona Guest

    Chris Lieb wrote:

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


    --
    ironcorona
    ironcorona, May 2, 2006
    #11
  12. Rob Stampfli

    ironcorona Guest

    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>
    &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>

    --
    ironcorona
    ironcorona, May 2, 2006
    #12
  13. Rob Stampfli

    Toby Inkster Guest

    ironcorona wrote:

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

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, May 3, 2006
    #13
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Ranganath

    Custom Tags within Custom Tags.

    Ranganath, Oct 17, 2003, in forum: Java
    Replies:
    2
    Views:
    440
    Ranganath
    Oct 21, 2003
  2. Kwasi
    Replies:
    13
    Views:
    586
    Kwasi Yeboah via JavaKB.com
    Dec 1, 2004
  3. Chris

    table-tags within div-tags

    Chris, Feb 9, 2004, in forum: HTML
    Replies:
    5
    Views:
    13,240
    Chris
    Feb 10, 2004
  4. Donald Firesmith

    html tags within meta tags allowed?

    Donald Firesmith, Jan 5, 2005, in forum: XML
    Replies:
    5
    Views:
    867
    Andy Dingley
    Jan 8, 2005
  5. puzzlecracker
    Replies:
    8
    Views:
    288
Loading...

Share This Page