Css Globe

Delicious | Digg | Stumble | Reddit | Float | Subscribe to RSS Feed

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.

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.

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

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

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?

Subscribe to our RSS feed or share it with your friends.

Delicious | Digg | Stumble | Reddit | Float | Subscribe to RSS Feed

Comments

• PENIX on 29 Jan, 2008 wrote:

  That really is a lot simpler than putzing around with the padding. Thanks for the tip.

• Jordan Arentsen on 29 Jan, 2008 wrote:

  Very nice, just wanted to mention that you misspelled "height" as "hieght" in the title.

• Jermayn Parker on 30 Jan, 2008 wrote:

  The only problem that I can see with it is when you increase the font-size.

• cssglobe on 30 Jan, 2008 wrote:

  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 on 31 Jan, 2008 wrote:

  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 on 31 Jan, 2008 wrote:

  wow...Great article. I have been looking for something thing like this from few days. Thanks for sharing.

• Tom on 1 Feb, 2008 wrote:

  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 on 1 Feb, 2008 wrote:

  @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 on 2 Feb, 2008 wrote:

  Really a great article..
  I'll use line-height in my upcoming works..
  Thanks...

• Kodowanie stron XHTML CSS on 2 Feb, 2008 wrote:

  Good CSSing ;)

• Sangesh on 4 Feb, 2008 wrote:

  Small CSS codes making web pages look quite beautiful.
  :) loved this. You guys do things very good.
  Thanks a lot.

• Jordan on 5 Feb, 2008 wrote:

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

• frank on 12 Feb, 2008 wrote:

  thanks for the post :)
  
  very usefully

• chrmou on 11 Mar, 2008 wrote:

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

• Analogue on 14 Mar, 2008 wrote:

  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 on 10 Apr, 2008 wrote:

  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 on 11 Jun, 2008 wrote:

  Good CSSing ;)
  

• Niklaus Krevedkos on 11 Jun, 2008 wrote:

  Small CSS codes making web pages look quite beautiful.
  Thanks!

• Andy Andreef on 14 Jun, 2008 wrote:

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