Using lineheight with menus

posted on:January 29, 2008

Using lineheight with menus

Line-height is a property can help us solve menu problems really elegantly. While often we have to battle with paddings, box model, cross browser compliance, using line-height in combination with some other properties can reduce the need for additional markup and additional css definitions. Of course there are cases where this usage that I am about to demonstrate can’t be applied, but having this trick under your sleeve can be a good thing when you encounter a perfect situation.

Overview

Let’s repeat what line-height is. Line-height property sets the distance between the lines and of course aligns text in the vertical middle of that line.

line-height scheme

It can take values "normal", "inherit", length, numeric and percentage value.

p{
	line-height:normal;
}
// numeric
// sets a line height of a number multiplied by current font size
p{
	line-height:1;
}
// length
// set fixed line height 
p{
	line-height:10px;
}
// percentage
// sets a line height in percentages of current font size 
p{
	line-height:100%;
}

Usage

Being a designer most interesting value that line-height can take is using lengths (fixed heights).
I never use it when defining line height of entire document or any paragraph of text, but I use it when dealing with i.e. single links or menu items. Why? It gives me a chance to be a pixel precise and I like that kind of control a lot! Those of you who wants to keep things fluid and flexible might disagree with me on this, but i.e. if you want your vertical menu on the left to be exactly the same height as your header background image on the right, then you need pixel precision.

Menu with line-height

A really good choice for menus, something that most of use is using unordered list. It gives you 3 elements in hierarchy to work with, plus it structurally and visually separates links, so from accessibility point of view it’s all good. Oh yes, semantics. We got that covered too because list if links is – a list 🙂
So our menu’s source looks like this

<ul>
	<li class="first"><a href="#">Homepage</a></li>
	<li><a href="#">About Us</a></li>
	<li><a href="#">Services</a></li>
	<li><a href="#">Portfolio</a></li>
	<li><a href="#">Contact us</a></li>
</ul>

and for this example that would be all the markup we need… No need for additional spans or anything.

Vertical menu

In this example I will use menu next to an background image. Image has a fixed height of 214px and the goal is to get the menu to be the same height as well. That makes five menu items with 24px in height plus 1px top margins except for the first one (42px x 5) + (1px x 4) = 214 px.
Unstyled, our markup looks like this.

line-height scheme

When we add some styling to it, just to cover the basics. I’ll also add a fixed height background image.

ul#nav, ul#nav li{
	margin:0;
	padding:0;
	list-style:none;
}
ul#nav{
	background:url(bg.jpg) no-repeat 100% 0;
	height:214px;
}
ul#nav li{
	width:190px;
	margin-top:1px;
}
ul#nav li.first{
	margin:0;
}
ul#nav li a{
	display:block;
	width:100%;	
}

it looks like this

line-height scheme

Adding some colors, background images to menu items

ul#nav li a{
	display:block;
	width:100%;
	color:#0e85b0;
	background:#bae2f0;
}

will turn our menu into this

line-height scheme

Now, here comes the moment we waited for. What we’re aiming at is to set a clickable "button" of a certain height and width with properly aligned text in it. By setting a line height to desired value we get what we want. We’ll also use text-indent property to give the text a left offset.
With line-height property we force the menu item to be of a certain (fixed) height and with text-indent we move the text to the left. No paddings to mess with your dimensions.
The css looks like this

ul#nav li a{
	display:block;
	width:100%;
	color:#0e85b0;
	background:#bae2f0 url(arrow1.gif) no-repeat 10px 50%;
	line-height:42px;
	text-indent:25px;
}

and the result

Take a look at the demo

Pretty simple, isn’t it?

Downsides

As I mentioned at the beginning of this article there are a lot of cases that you can’t use this approach. In order for this to work as it should, you need your menu items to be one liners. As soon as the text goes into new line the things will not look good. Menu items will be to large and text-indent property works on first line only. I sometimes avoid that to happen with adding this:

	white-space:nowrap;
	overflow:hidden;

because I’d sometimes rather risk loosing couple of last letters then having things break up… That’s my designer side speaking 🙂

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

Share on Facebook Tweet this Delicious StumbleUpon Reddit Subscribe

Comments (19 Comments)

PENIX
January 29, 2008

That really is a lot simpler than putzing around with the padding. Thanks for the tip.
Jordan Arentsen
January 29, 2008

Very nice, just wanted to mention that you misspelled "height" as "hieght" in the title.
Jermayn Parker
January 30, 2008

The only problem that I can see with it is when you increase the font-size.
cssglobe
January 30, 2008

argh... that's what happens when you're typing too fast! Title corrected but too bad I can't correct all the incoming links. @Jermayn: I mentioned the risks of having things overflow the box and this trick don't work in those cases. When I work with this I usually increase the font size to a certain level as a test. If it holds I go with it...
Jermayn Parker
January 31, 2008

So do you enlarge it twice as a general rule?? It is however easier than fiddling around with paddings etc which is a pain!
An Jay
January 31, 2008

wow...Great article. I have been looking for something thing like this from few days. Thanks for sharing.
Tom
February 1, 2008

This works but i wouldnt agree that its a good idea, if the client wants menu items running onto 2 lines then you have to change it completely, messing around with padding is not exactly hard you only have to set 2/4 values and its done. This is a much better option as it works with infinite amount of lines. if you do menus like this with line height your asking for trouble.
cssglobe
February 1, 2008

@Tom: I repeated couple of times that this is something that can't be applied in every scenario. I wouldn't imagine using this with cms and user generated menu, but with simple static sites that have really short link words, why not? You can take this example, put it in your "library" and use it if you wish, that's it. I never said that this is the best possible solution.
Emre Sumer
February 2, 2008

Really a great article.. I'll use line-height in my upcoming works.. Thanks...
Kodowanie stron XHTML CSS
February 2, 2008

Good CSSing ;)
Sangesh
February 4, 2008

<em>Small CSS codes making web pages look quite beautiful. :) loved this. You guys do things very good. Thanks a lot.</em>
Jordan
February 5, 2008

Hi! I usually use height & padding, BUT, I will try to implement line-height on future projects - definitely lessens additional markup/css definitions.
frank
February 12, 2008

thanks for the post :) very usefully
chrmou
March 11, 2008

Hello, as i'm a newbee, i can't make it work. Could you be more specific please? Thanks a lot
Analogue
March 14, 2008

Yeah, I like this and can see good use for it - like a lot of code - it doesn't work in all situations.......that's why we have humans...to make informed decisions on what's right for a particular application. Keep it up man, there's some useful info on cssglobe.
Dogman
April 10, 2008

I'd been scratching my head (and pulling out hair) over why oh why was line-height not working on a list in IE6 .. this post helped confirm for me that it should be working .. well, I just realized what my problem was .. I'd neglected to close my list items .. doh!
Nikidon
June 11, 2008

Good CSSing ;)
Niklaus Krevedkos
June 11, 2008

Small CSS codes making web pages look quite beautiful. Thanks!
Andy Andreef
June 14, 2008

Small trouble that I can see with it is when you change the font-size.

Sorry, the comment form is closed at this time.