I just can't set the height and width of 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 am doing wrong?
You can't set the width and height of inline elements. You would have to set display: block on the a , but that will bring other problems because the links start behaving like block elements. The most common cure to that is giving them float: left so they line up side by side anyway.
Top header with 100% width and 50px height. Left navigation bar with 200px width and dynamic height to fill the screen. A container on the right of the nav bar and under the header with dynamic width and height to fill the screen.
An anchor is an inline element by default so you can't add dimensions to it unless you change its display property.
add display: block;
a-tag is an inline element so your height and width are ignored.
#header div#snav div a{ display:block; width:150px; height:77px; }
Anchors will need to be a different display type than their default to take a height. display:inline-block;
or display:block;
.
Also check on line-height
which might be interesting with this.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With