How to set: link height / width using css?

Question

I just can't set the width and height a elements of my navigation.

 #header div#snav div a{ width:150px; height:77px; } #header div#snav div a:link{ width:150px; height:77px; } #header div#snav div a:hover{ height:77px; background:#eff1de; } 

Any ideas what I'm doing wrong?

Answer 1

add display: block;

a-tag is an inline element, so your heights and widths are ignored.

 #header div#snav div a{ display:block; width:150px; height:77px; } 

Answer 2

Anchors must have a different display type than their default value for height. display:inline-block; or display:block; .

Also check out line-height , which might be interesting with this.

Answer 3

Your problem probably is that a elements are display: inline by nature. You cannot set the width and height of inline elements.

You need to set display: block to a , but this will cause other problems because the links start behaving like block elements. The most common cure for this is to give them float: left so that they still line up side by side.

Answer 4

From the definition of height :

Applies to: all elements but not replaced by inline elements, column columns, and column groups

The a element is, by default, an inline element (and it is not replaced).

You need to change the display (directly using the display property or indirectly, for example, using float).

Answer 5

Thanks to RandomUs 1r for this observation:

changing it to display: inline-block; solves this problem. - RandomUs1r May 14, '13 at 21:59

I tried this for the top bar of the navigation menu, as shown below:

First create the "li" element as follows:

display: built-in unit;
width: 7m;
text-align: center;

Then create the element "a"> as follows:

width: 100%;

Navigation links now have the same width as the text centered in each link.