CSS for a Link to Occupy the Whole Cell

[vunet.us]

Hello,

I have a link (A tag) inside of a cell. I want this link to occupy the
whole area of the cell, such as width:100%, height:100%.

I cannot seem to come up with a cross-browser example. How would you
do it? Thanks.

<table><tr><td width=70 height=30>
<a href='' style=''>ha</a>
</td></tr></table>

 

[vunet.us]

and text of a link is in the middle centered... thannks

 

[Ben C]

Hello,

I have a link (A tag) inside of a cell. I want this link to occupy the
whole area of the cell, such as width:100%, height:100%.

I cannot seem to come up with a cross-browser example. How would you
do it? Thanks.

<table><tr><td width=70 height=30>
<a href='' style=''>ha</a>
</td></tr></table>

You can't set width or height on inline boxes, which are the kind the
<a> generates by default since it is display: inline.

Why not put the styles on the <td> instead?

 

[Ben C]

and text of a link is in the middle centered... thannks

Set vertical-align: middle on the td.

 

[vunet.us]

Set vertical-align: middle on the td.

what if I set display:block; for A?

 

[Ben C]

what if I set display:block; for A?

Yes you can do that but then it's going to be harder to get the text of
the link vertically centered.

If the text can be guaranteed to be all on one line you can set a
line-height on the <a> equal to the height you've set as well as setting
vertical-align: middle on it.

If you want text that breaks across lines but to have those lines
centered vertically in their container, you need a table-cell with
vertical-align: middle. Nothing else has quite the same behaviour. For
this reason it's desirable to keep your <a> inline and directly inside a
table cell.

You said you wanted your <a> width:100% and height:100% so it may well
be there's no point in making it display: block when it completely fills
the table cell anyway. Just decorate the table cell instead and leave
the <a> as inline.

 

[vunet.us]

Yes you can do that but then it's going to be harder to get the text of
the link vertically centered.

If the text can be guaranteed to be all on one line you can set a
line-height on the <a> equal to the height you've set as well as setting
vertical-align: middle on it.

If you want text that breaks across lines but to have those lines
centered vertically in their container, you need a table-cell with
vertical-align: middle. Nothing else has quite the same behaviour. For
this reason it's desirable to keep your <a> inline and directly inside a
table cell.

You said you wanted your <a> width:100% and height:100% so it may well
be there's no point in making it display: block when it completely fills
the table cell anyway. Just decorate the table cell instead and leave
the <a> as inline.

I am trying to create a button with a cursor:hand which actually is a
cell with a link. That's why I wanted to expand the A. How would you
suggest to go about this idea of mine? I hate using images for that
reason. Thanks

 

[Ben C]

I am trying to create a button with a cursor:hand which actually is a
cell with a link. That's why I wanted to expand the A. How would you
suggest to go about this idea of mine? I hate using images for that
reason. Thanks

I'm not sure where you got cursor:hand from. I can find cursorointer
in the CSS 2.1 spec and various other values for cursor, but not hand.

How about this:

<style type="text/css">
td
{
height: 200px;
width: 200px;
background-color: green;
}

a { display: block; }

.button
{
display: block; /* it's a span, so it can be
validly put inside an <a> */
width: 150px;
height: 100px;
border: 8px outset gray;
background-color: gray;
color: white;

margin: 0 auto; /* to centre it vertically */

line-height: 100px; /* to centre its contents
vertically */
vertical-align: middle;
white-space: nowrap; /* but its contents can't wrap */

text-align: center; /* centre contents horizontally */
}
.button:hover { cursor: pointer; }
</style>

...

<table>
<tr>
<td>
<a href="#">
<span class="button">Press Me</span>
</a>
</td>
</tr>
</table>

 

[Ben C]

I'm not sure where you got cursor:hand from. I can find cursorointer
in the CSS 2.1 spec and various other values for cursor, but not hand.

How about this:

<style type="text/css">
td
{
height: 200px;
width: 200px;
background-color: green;
}

a { display: block; }

.button
{
display: block; /* it's a span, so it can be
validly put inside an <a> */
width: 150px;
height: 100px;
border: 8px outset gray;
background-color: gray;
color: white;

margin: 0 auto; /* to centre it vertically */

line-height: 100px; /* to centre its contents
vertically */
vertical-align: middle;
white-space: nowrap; /* but its contents can't wrap */

text-align: center; /* centre contents horizontally */
}
.button:hover { cursor: pointer; }
</style>

...

<table>
<tr>
<td>
<a href="#">
<span class="button">Press Me</span>
</a>

Except now I come to think of it the span isn't necessary, just make the
anchor class=button and lose the span.

I confused myself because I had the <a> inside the button to start with.
But you want to follow the link wherever on the button you click, so
then I moved it outside, but now that it is outside there's no reason
for the span any more.

 

[vunet.us]

Except now I come to think of it the span isn't necessary, just make the
anchor class=button and lose the span.

I confused myself because I had the <a> inside the button to start with.
But you want to follow the link wherever on the button you click, so
then I moved it outside, but now that it is outside there's no reason
for the span any more.

Thank you so much...
However, this will not align to vertical middle:

a{
display:block;
border:0px;
margin:0;
line-height:100%;
vertical-align:middle;
white-space:nowrap;
text-align:center;
width:100%;
height:100%;
}

<table border=1><tr><td width=70 height=50>
<a href=''>ha</a>
</td></tr></table>

 

[The Professor]

Set the alignment of the cell at center and then place a table inside
the cell with the cellpadding and cellspacing set at zero and then place
your link inside the cell of the new table.

 

[Ben C]

Thank you so much...
However, this will not align to vertical middle:

a{
display:block;
border:0px;
margin:0;
line-height:100%;
vertical-align:middle;
white-space:nowrap;
text-align:center;
width:100%;
height:100%;
}

<table border=1><tr><td width=70 height=50>
<a href=''>ha</a>
</td></tr></table>

The problem is with line-height:100%.

Percentage line heights are percentages of the element's font size, not
of its container's height.