|
|
Posted by vunet.us on 06/13/07 20:17
On Jun 12, 6:08 pm, Ben C <spams...@spam.eggs> wrote:
> On 2007-06-12, Ben C <spams...@spam.eggs> wrote:
>
>
>
> > On 2007-06-12, vunet...@gmail.com <vunet...@gmail.com> wrote:
> [...]
> >> 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 cursor:pointer
> > 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.
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>
Navigation:
[Reply to this message]
|