• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1463
  • Last Modified:

Can CSS set the height for a hyperlink?

I have a hyperlink that uses a css file to set the height but the height property is not working?
0
joshuadavidlee
Asked:
joshuadavidlee
  • 7
  • 4
  • 2
  • +2
1 Solution
 
BongSooCommented:
You might need to look at the line-height of your font, not knowing more about what your actual issue is.
0
 
joshuadavidleeAuthor Commented:
well my font height is small (12) but I want the hieght of the control to be 30 with a border around it, meaning it would look like it has ALOT of padding
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
fuzzboxerCommented:
You would need to set the link to be a block level element.

<a href="#" style="display:block; height:30px; width:50px; border: 1px solid #000;">Test</a>

Depending on how you want it to look, you would probably want to add padding and set the text to align in the center.

0
 
joshuadavidleeAuthor Commented:
ok how do i put that in a css file? and how do i do a hover also? and is the "#" required?
0
 
fuzzboxerCommented:
What are you trying to accomplish here?  If you want to build a menu, I can point you to plenty of examples with code all ready to go.  If you simply want to apply this to a bunch of links on a page, it's pretty easy to add to your CSS file.

.linkstyle a {
display:block;
height:30px;
width:50px;
border: 1px solid #000;
}

.linkstyle a:hover{
background-color:#990;
color:#fff;
}

Then in your HTML you would structure you link like so:  <a href="mypage.html" class="linkstyle">Test</a>
0
 
joshuadavidleeAuthor Commented:
if u r familiar with the new vista breadcrumbs menu , then thats what i am trying to reproduce in asp.net
0
 
fuzzboxerCommented:
I'm not familiar with Vista's breadcrumb menu, but I do know how breadcrumb menus work.  What does the Vista menu do that you want?  Are you willing to use a different breadcrumb menu?
0
 
joshuadavidleeAuthor Commented:
the vista one is like a normal breadcrumb but it has arrows between each item that show u the items below each parent item.  Basically its a treeview that looks like a breadrcumb menu.

but let me try your above solution for hyperlinks as display:block
0
 
fuzzboxerCommented:
Well, if you are willing to make concessions on looking "exactly" like Vista, here are a bunch of CSS Menus I recommend:  http://www.cssplay.co.uk/menus/

You will want to look under the Multi-Level CSS Only category.  I suggest the MKII or any of the Professional drop down menus.
0
 
joshuadavidleeAuthor Commented:
i cant seem to get the text to center inself vertically?  is there soemthung unique about a block element when it comes to centering text vertically?
0
 
LeeKowalkowskiCommented:
You can only center text vertically by setting the line-height to match the overall height, however, this is unsuitable for wrapping content.

You may need to float:left instead of display:block too, unless you want the links to be on separate lines.

--
Lee
0
 
joshuadavidleeAuthor Commented:
so r u saying i cant center text in either situation?
0
 
LeeKowalkowskiCommented:
You can vertically center if it never wraps, or if you use a table for that bit.  

Just having a sensible line-height (1.2 - 1.8) and float:left or display:inline-block (Firefox not very good at inline-block though), and equal vertical padding would center the text vertically, but if the contents have different number of lines, then the links will have unequal heights.

Either way, having wrapping text inside 1 link will not look brilliant, either live with it, avoid it, or use a table instead.

--
Lee
0
 
joshuadavidleeAuthor Commented:
actually i found the answer
what you use ia a block element, then say you want a height of 30, then you make your block element height 25 instead plus you add a top padding of 5 then it produces the desired effect. 25+5 = 30
0

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

  • 7
  • 4
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now