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

[the_shoshanna]

oh wow, THANK YOU.

[facetofcathy]

You are most welcome.

[denise]

ooooooh. we should probably adopt that into the site-wise CSS. *G*

[facetofcathy]

I would be so chuffed if you did, you have no idea.

The padding might not be popular with everyone, however.

[denise]

We could probably leave that out if it annoys people!

[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.

[rosees]

:D Thank you so much I'm memming this!

[marahmarie]

[...] 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.

Bookmarking this post for that info alone. I have the navstrip tricked out within an inch of its admittedly precarious life on my journal, so I'm not even sure if I can or how I would work the code snippet in, but considering how my navstrip appears in IE7 (looks like I coded it blindfolded) I guess it's worth a try.

And yeah, corinthian is talking abut how enabling the navstrip (on some styles if not all - I'm not sure how system-wide this bug is) tends to push the header down so it lays on top of the content/overlaps the sidebar/does other funky things to your layout.

Disabling it altogether (like I do to view other people's journals) can have the opposite effect, as I found out last week in helping someone on css_code - it's absence can push everything at the top of the page together, squeezing header against navlinks against sidebar against content so there's no room at all at the top of the page for normal padding values. Strange stuff, indeed. :)

[facetofcathy]

IE7 is supper weird. Lot's of things are broken in it, so this might be it, who knows.

I guess what's going on then is that some styles are taking away the padding for the navstrip without allowing for the fact that some people use it. And then making elements positioned absolutely, which I'm not very fond of--too many chances for problems. That would be hard to fix.

And, I didn't know about that comm (there's so many for styles) so I've subbed to it now too, so thanks.