Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set a:link height/width with css?

Tags:

html

css

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?

like image 844
UpCat Avatar asked May 13 '11 09:05

UpCat


People also ask

How do you increase the width of a link in HTML?

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.

How set dynamic width and height in CSS?

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.

Can we give height and width in anchor tag?

An anchor is an inline element by default so you can't add dimensions to it unless you change its display property.


2 Answers

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; } 
like image 103
Stijn Janssen Avatar answered Sep 27 '22 17:09

Stijn Janssen


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.

like image 32
Cobra_Fast Avatar answered Sep 27 '22 18:09

Cobra_Fast