Code Snippet - Making the Navstrip fluid.

[facetofcathy]

Title: Fluid Navstrip
Credit to: n/a
Base style: All
Type: Code Snippet
Best resolution: Display widths of 20em and up
Tested in: Firefox, Chrome, Opera
Features: Cells and contents of the navstrip table wrap as required by the user's display.

This is a code snippet that will work on any layout/style (barring any conflicts with other styles applied to the navstrip). The purpose is to make the navstrip wrap at larger font sizes or smaller screen widths rather than triggering a scrollbar as it does normally.


Screepcaps of the code on my wide screen display, first at 16px font size and then at 32px. I have a minimum font of 14px, so users may see smaller text in the first example.






With a narrower display, the wrapping starts at smaller font sizes.


The content of each cell in the navstrip table wraps as well, and you can get below a 20em display width without any scrollbars. There is padding added, a font size in ems, and a generous line-height. The result has a little more space around the log out button, which may help with accidental log outs for some users.

There is a 1px bit of visible body background colour at the right, left and bottom edges some of the time in all tested browsers, but I see that with my background image as well.

This code should work correctly in all browsers except IE7 and lower.

Padding, font-size and line-height can be customized at will.


Code for the fluid navstrip:

html body {
 padding-top: 0; 
 margin-top: 0;
  }

#lj_controlstrip {
  position: relative;
  height: auto;
  }

#lj_controlstrip td {
  display: inline-block;
  padding: 0.4045em 0.809em;
  white-space: normal;
  }

#lj_controlstrip td,
#lj_controlstrip a {
  font-size: .8em;
  line-height: 1.618em;
  }

#lj_controlstrip_userpic {
  vertical-align: middle;
  }

samjohnsson pointed me to the IE7 fix I couldn't find earlier. Adding zoom: 1; *display:inline; to #lj_controlstrip td should make IE7 display the inline-block correctly.

ETA: I've discovered that my style has a 1px border on body, so I've taken the -1px offset off this code, as it's not generally needed.

Comments

[corinthian]

Oooh nifty.

Do you know of any way to make the navstrip not push everything down on the page? I have all the navtrip related layoutting woes.

[facetofcathy]

I'm not sure I really understand what you mean.

If you mean that you want the #canvas area to butt right up to the navstrip, then the answer is to mess with the padding-top on html body You have to use that specific selector syntax to get it to work, body isn't enough.

You can see that I set it to 0 for this bit of code, but I've made other changes that make that work. It's at 45px in the base style, and you need to knock that down to about 13, I think. You'll need to test it.

If I've totally missed your point, which happens to me all the time, let me know.