Link to home
Start Free TrialLog in
Avatar of thecode101
thecode101

asked on

Creating a box around link

I am new to CSS and I was wondering if there is anyway to have a colored box around a link. The box will have a specfic background color, specfic height of 25, and no specfic width (it should adjust to fit the width of the cell it is in). The text in the box should be centered in the middle of the box. If you need more information please let me know. Thanks.
ASKER CERTIFIED SOLUTION
Avatar of Daydreams
Daydreams

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of thecode101
thecode101

ASKER

Daydreams,
Thanks for your help that is what I want, except the text is not vertically aligned in the middle of the box. Is there anyway to make this change?
Hi thecode101,

You could use padding:

(I changed the css somewhat here and added padding)

a {display: block; height:25px;background-color:blue;padding:10px; }
a:link    {text-align:center;text-decoration: none;}
a:visited {text-decoration: none;}
a:hover   {background-color:yellow;text-decoration:none;}

If you only want padding on the top and bottom, you can specify:
 padding-top:5px; padding-bottom:5px;

..or any value of padding you like.
Thanks for your help, I will give you the points since you help give me the right idea. What I did instead was use:

 display:table-cell;
 height:25px;
 width:500em;  //If there is a better way to make it fill the width of the cell let me know =)
 text-align:center;
 vertical-align: middle

Since the width is set to such a high number, the width of each cell that it is in will never be greater then that. So, it takes up the whole width of the cell.

I don't know why but 100% width didn't work for me.
>width:500em;  //If there is a better way to make it fill the width of the cell let me know

width:auto;
I tried that but it does the same thing as 100% it only covers the text and not the width of the cell.