CSS nerds to the rescue

23 views
Skip to first unread message

Art Thompson, Jr.

unread,
Jun 11, 2012, 6:46:35 PM6/11/12
to Refresh Austin
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:


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
-
Founded 2000. We design, build and host microsites, landing pages, eblasts and whatever comes next.
-
-


Zach Anderson

unread,
Jun 11, 2012, 6:59:32 PM6/11/12
to Refresh Austin
I'd switch the display of each <li> to block and float them all left,
along with their cleared container.

I think that would just leave some alignment issues to work out.

The alternative would be replacing all the spaces with &nbsp;, but the
block option seems easier to maintain depending on how the page is
generated.

Hope it helps.


On Jun 11, 5:46 pm, "Art Thompson, Jr." <a...@logicalthings.com>
wrote:

Jeff

unread,
Jun 11, 2012, 7:12:19 PM6/11/12
to refresh...@googlegroups.com, Refresh Austin
Try inline-block. -jeff


--
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 Refresh...@googlegroups.com
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 Refresh-Austi...@googlegroups.com
 
[ More Info ]
For more options, visit this group at http://groups.google.com/group/Refresh-Austin

Pat Ramsey

unread,
Jun 11, 2012, 7:14:11 PM6/11/12
to refresh...@googlegroups.com
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

Art Thompson, Jr.

unread,
Jun 11, 2012, 11:54:02 PM6/11/12
to refresh...@googlegroups.com
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 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
-
Founded 2000. We design, build and host microsites, landing pages, eblasts and whatever comes next.
-
-




Janet Swisher

unread,
Jun 13, 2012, 8:51:49 AM6/13/12
to refresh...@googlegroups.com
On Mon, Jun 11, 2012 at 10:54 PM, Art Thompson, Jr.
<a...@logicalthings.com> wrote:
> CSS-Tricks to the rescue! I found this 2007 hack from Chris Coyier 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."

Remember table-based layout? "display:table" lets you still do that,
but with CSS. It implicitly treats the children of the element it is
applied to as table cells in a table row. (There are also "display:"
values that correspond to all the other table-related elements, if you
want to go that route:
https://developer.mozilla.org/en/CSS/display#Values )

--Janet

Art Thompson, Jr.

unread,
Jun 13, 2012, 11:25:52 AM6/13/12
to refresh...@googlegroups.com
Thanks, Janet, for enlightening me to this pretty handy feature set. And for keeping such tidy docs. :-)

Cheers,

Art Thompson, Jr
Logical Things, Inc
design + technology + strategy
-
Founded 2000. We design, build and host microsites, landing pages, eblasts and whatever comes next.
-
-




Reply all
Reply to author
Forward
0 new messages