css link/hover issue

[neilkw]

Hi,

I'm progressing with learning css and loving it.
I am building a basic horizontal nav bar and assigning different bg colours for the link and hover states within a 25x10 pixel thin bordered box. I have then inserted the text and their corresponding a href links.
The issue I have is that I want the whole of the box not just the text itself to be an active link.
Typically download.com has exactly what I am trying to achieve in css in their left nav column (albeit vertical).

Hope this makes sense and that someone can help. cheers

[mwinter]

I am building a basic horizontal nav bar and assigning different bg colours for the link and hover states within a 25x10 pixel thin bordered box.

If the links are text- rather than image-based, don't specify the size using pixels. Use em lengths, instead (they will adjust better to different font sizes).

The issue I have is that I want the whole of the box not just the text itself to be an active link.

Normally, one can change the box layout to block using the display property:

.menu a {
  display: block;
}

However, if an ancestor of the links (usually the list item) uses the inline display property value, then this isn't a wise idea; placing block-level elements inside in-line elements is undefined. The usual solution here is to use floats.

Why don't you Google for one of the numerous CSS layout repositories? There will be plenty of examples for you to choose from.

Mike

[neilkw]

cheers mike. many thanks