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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Hi thecode101,
You could use padding:
(I changed the css somewhat here and added padding)
a {display: block; height:25px;background-col or:blue;pa dding:10px ; }
a:link {text-align:center;text-de coration: none;}
a:visited {text-decoration: none;}
a:hover {background-color:yellow;t ext-decora tion: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.
You could use padding:
(I changed the css somewhat here and added padding)
a {display: block; height:25px;background-col
a:link {text-align:center;text-de
a:visited {text-decoration: none;}
a:hover {background-color:yellow;t
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.
ASKER
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.
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;
width:auto;
ASKER
I tried that but it does the same thing as 100% it only covers the text and not the width of the cell.
ASKER
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?