how to make a width,height,and background color for a link

Question

I've made a widget that contains some categories to be looks like this vertical menu :

enter image description here

so I've used this way :

a {

    width:200px;
    height: 30px;
    background-color: #eee;
    border: 1px solid #836262;
    text-decoration: none 


  }

I've written this to change the background color on hover since "category" is the class of the link tag :

.category:hover {

               background-color: #ccc;
               cursor: pointer;


           }

but I've failed and the widget appeared :

enter image description here

why the width and height of the link not 200 and 30 px ??

you need to apply those styles to a block level element, wrap up the anchors in list elements and hide the list icon with list-style:none — Mike McMahon, Nov 23 '13 at 21:32
`a` is an inline element, you need to change its display to either `inline-block` or `block` in order for `height`/`width` to be taken into effect. See this answer.. http://stackoverflow.com/questions/19920253/why-can-input-element-be-sized-if-they-are-inline-elements/19920304#19920304 — Josh Crozier, Nov 23 '13 at 21:34

score 3 · Accepted Answer · answered Nov 23 '13 at 21:33

3

You need to add display: block to the a.

answered Nov 23 '13 at 21:33

philwills

score 2 · Answer 2 · edited Nov 24 '13 at 00:22

2

You need to use display: inline-block/block; for an anchor tag to take in any size styling.

Here's a quick fiddle with your menu, This code is not really for usage it still needs tweaks to be usable.

edited Nov 24 '13 at 00:22

kero

answered Nov 24 '13 at 00:03

youssef

score 1 · Answer 3 · answered Nov 23 '13 at 21:56

1

may be some priorities in css you didn't pay attention about. to make sure use

!important;

like this:

width:200px !important;

!important gives the highest priority.

answered Nov 23 '13 at 21:56

Muath

3 Answers3