In the navigation bar shown in the screenshot, I'm trying to get the height of each of the list items to fill the entire navigation bar and to scale depending on the user's browser size or screen resolution. Can this be done? I've tried adjusting the padding and height of the <li> tag in the navigation bar but both do not work.

2 answers

0
points
This was chosen as the best answer

This should get you started: http://www.boldfishdev.com/doctype/zoz/

The ul is a % high and the li's a factor of that, I put a border on the ul so you can see it.

You might want to move the logo out of the list for better effect and maybe set min-height (works for some browsers)

Answered almost 6 years ago by Tony Crockford
  • Yup works perfectly now thanks. Jonathan Chua almost 6 years ago
0
points

make the <a> display:block; and set some dimensions on it - percentages perhaps or em's - and set some variable widths on the sidebar and it will all move accordingly.

Answered almost 6 years ago by Tony Crockford
  • I'm not too sure what you mean by "set some dimensions on it". Are you referring to the height? In which case I don't think it works. Also for the width of the sidebar I want it to be constant, thus making it variable width is not an option. Jonathan Chua almost 6 years ago
  • I'm sorry I thought you wanted it to scale. set the <a> to display block and width:100% and see if that works for you, height should be set to twice the font size and line-height to the same for vertical centering, but beware lines that wrap onto two lines. Tony Crockford almost 6 years ago
  • Actually re-reading your question, you'll need to set the ul to a % height and then set the li's to a factor of that height 7 would be 14% (approx) and then set the a's to 100% width& height so they fill the boxes. Tony Crockford almost 6 years ago