• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 184
  • Last Modified:

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.
  • 3
  • 3
1 Solution
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<style type="text/css">
 a, a:link    {background-color:orange;text-decoration: none;display:block;height:25px;text-align:center;}
 a:visited {text-decoration: none;}
 a:hover   {background-color:yellow;text-decoration: none;}
<td><a href="somelink.html">Click here</a></td></tr>
thecode101Author Commented:
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.
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

thecode101Author Commented:
Thanks for your help, I will give you the points since you help give me the right idea. What I did instead was use:

 width:500em;  //If there is a better way to make it fill the width of the cell let me know =)
 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

thecode101Author Commented:
I tried that but it does the same thing as 100% it only covers the text and not the width of the cell.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now