First, thanks Adam, Zach, Jeff, Jeff, and Pat for all the great tips! Well I feel better now, actually, because I should have mentioned in my previous email that the first thing I tried was using display:block and float:left. Good to know I was at least on the right track. :-)
So, it looks like display:inline-block solved the list item wrapping issue. BUT (and note the big BUT), the client wants the individual rows of sub-nav items to be centered like they currently are. So, though setting the li's as inline-block solved the wrapping issue, floating them also meant that all the rows of nav items were aligned left. CSS-Tricks to the rescue! I found this 2007 hack from Chris Coyier<http://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/>that contained the missing link. Turns out, the sub-nav ul needs to be wrapped in a div with margin:0,auto and a value I've not used before: display:table. Though Chris' example uses image buttons, the net effect was exactly what I needed to achieve: none of the list items' content wraps and the ones that don't fit drop to the next line. There's not much explanation in to display:table other than it just "works." And that works for me. Cheers, Art Thompson, Jr Logical Things, Inc design + technology + strategy 512-777-1158 [email protected] www.logicalthings.com - Founded 2000. We design, build and host microsites, landing pages, eblasts and whatever comes next. - Wanna connect? facebook.com/logicalthings linkedin.com/in/logicalthings twitter.com/logicalthings - Need to send us large files? dropbox.yousendit.com/logicalthings - On Mon, Jun 11, 2012 at 6:14 PM, Pat Ramsey <[email protected]> wrote: > I'd tryJeff's idea of setting the LI's display to inline-block first, then > if there are still issues, block, with float: left on the LIs. You may nee > to set overflow:hidden for the UL if you float the list items. > > Cheers! > > Pat > > > > On Jun 11, 2012, at 6:12 PM, Jeff wrote: > > Try inline-block. -jeff > > > > "Art Thompson, Jr." <[email protected]> 於 Jun 11, 2012 5:46 PM 寫道： > > Hi Refreshers, > > I created a simple WP site for a client a while back and have recently > noticed a display anomaly in the sub-nav items that I was hoping to get > some help with. First, take a look at a sample page of the site: > > http://www.datagraphicdesign.com/select-projects/chopard/ > > Simple enough. The sub-nav is dynamically built using inline list items. > The problem is that they're wrapping mid-list item due to the constrained > ul width, which was requested by the client. I've tried using CSS > white-space and even a, *gulp*, nobr tag, but all that happens is that all > of the li's just display in one long line without wrapping at all. This is > terribly frustrating. > > All I want is for the contents of each li to remain intact with the ones > that don't fit within the container dropping down to the next line. And so > on. > > Any thoughts? > > Cheers, > > Art Thompson, Jr > Logical Things, Inc > design + technology + strategy > 512-777-1158 > [email protected] > www.logicalthings.com > - > Founded 2000. We design, build and host microsites, landing pages, eblasts > and whatever comes next. > - > Wanna connect? > facebook.com/logicalthings > linkedin.com/in/logicalthings > twitter.com/logicalthings > - > Need to send us large files? > dropbox.yousendit.com/logicalthings > - > > > > -- > Our Web site: http://www.RefreshAustin.org/ > > You received this message because you are subscribed to the Google Groups > "Refresh Austin" group. > > [ Posting ] > To post to this group, send email to [email protected] > Job-related postings should follow http://tr.im/refreshaustinjobspolicy > We do not accept job posts from recruiters. > > [ Unsubscribe ] > To unsubscribe from this group, send email to > [email protected] > > [ More Info ] > For more options, visit this group at > http://groups.google.com/group/Refresh-Austin > > > -- > Our Web site: http://www.RefreshAustin.org/ > > You received this message because you are subscribed to the Google Groups > "Refresh Austin" group. > > [ Posting ] > To post to this group, send email to [email protected] > Job-related postings should follow http://tr.im/refreshaustinjobspolicy > We do not accept job posts from recruiters. > > [ Unsubscribe ] > To unsubscribe from this group, send email to > [email protected] > > [ More Info ] > For more options, visit this group at > http://groups.google.com/group/Refresh-Austin > > > -- > Our Web site: http://www.RefreshAustin.org/ > > You received this message because you are subscribed to the Google Groups > "Refresh Austin" group. > > [ Posting ] > To post to this group, send email to [email protected] > Job-related postings should follow http://tr.im/refreshaustinjobspolicy > We do not accept job posts from recruiters. > > [ Unsubscribe ] > To unsubscribe from this group, send email to > [email protected] > > [ More Info ] > For more options, visit this group at > http://groups.google.com/group/Refresh-Austin > -- Our Web site: http://www.RefreshAustin.org/ You received this message because you are subscribed to the Google Groups "Refresh Austin" group. [ Posting ] To post to this group, send email to [email protected] Job-related postings should follow http://tr.im/refreshaustinjobspolicy We do not accept job posts from recruiters. [ Unsubscribe ] To unsubscribe from this group, send email to [email protected] [ More Info ] For more options, visit this group at http://groups.google.com/group/Refresh-Austin
