How Do I? : Control Line Breaks and Line Height in an list item in Responsive Layout

[SpringMountain]

http://jsfiddle.net/SpringMountain/2Wkgf/2/

As the display gets larger, I’d like to be able to control where the line break is for the copy in the navigation. What is the best way to do this? I was thinking using

 or 
 

but I imagine there is a more elegant way that doesn’t alter the HTML.

I am also trying to keep nav boxes with the borders the same height. I used line-height in order to make the single line nav elements (contact and clients) the same height as the 2-line nav elements. As the display gets larger, the boxes change in height, but at different times (dependent on how long the copy is), and the use of line-height comes back to haunt me when the screen is large enough for the 3 middle navs to be on a single line.

Wondering if I should 1. use line-height a bunch on media queries. 2. have fixed heights. 3. or am I approaching it all wrong?

I just removed a bunch of < divs > from the existing nav, trying not to add more.

I have a related follow-up ready but hopefully this question will answer the next one too.

Thanks in advance!

[SpringMountain]

http://jsfiddle.net/SpringMountain/2Wkgf/18/

I’ve made some progress since the first post, but haven’t yet figured out the elegant approach to executing this.

Here’s the issue: As my layout responds to different display sizes, the width of the navigation list items grows, thereby changing the break point for multiple-word navigation items. I want to control the line breaks as the page grows.

In the past I’d be able to force a line break or div the poop out of it, but now I’m building a responsive site and am trying to use the most simple HTML I can. No breaks, no excessive divs was the original approach. My goal is an unordered list with no divs in the nav element.

This would be much easier if the client didn’t insist on the layout as it is (separate borders for the image and the nav copy). I want to deliver the same site she has now, with some nav style changes on the mobile queries, but exactly the same nav for desktop views.

After some work, I met at the point where my philosophy and my skills worked best and added some divs to the navigation. I made significant progress. (see paclag.com/2012). I’m almost there, but as I fix one issue another pops up and I am indeed in search of some sage advice.

Do I add individual classes to each nav element and deal with their display state as they grow?

Am I correct that I cannot put a css border on a background image?

Should I try the new border-image property?

I could create different navs in HTML and show/hide them appropriately, but this seems excessive/redundant.

[SpringMountain]

solved!

i added classes to my links and used the white-space: pre-line; , along with some line-height and padding to make up for the difference in alignment for 1 and 2 line nav tabs and it is working well.

[Author]

Posts