View Full Version : liquid layout, problem with

10-16-2011, 05:16 AM
I was wondering, just wondering, if there was a way to keep the horizontal layout of this page's breadcrumb menu title (the one with the arrows), and have it wrap somehow. it's getting pretty long. I used float:left on the li elements. but I am sure there is some sort of wrap css I could use with this that I am not thinking of.


10-16-2011, 05:56 AM
oops, wrong url. it's http://JesusnJim.com/cool-products/computer/laptops/college-laptops.html

it's just a slightly longer list of menu items. I can change the structure of the ul and li items to be a simple list I think.

for a simple list instead of recursive ul-li items, look here:
http://jesusnjim.com/cool-products/computer/laptops/test.html uses different file location of book-code.css (thus different file).

10-16-2011, 08:58 AM
Hi Jim

It should wrap to the width of the element it is sat in. But why do you have an opening ul before every list item? I'm sure that can't be helping matters.

Something like;

<li>[ <a href='/index.html' class='user'>Home</a> ]... </li>
<li>[ <a href='/cool-products/index.html' class='user'>Cool Products</a> ]... </li>
<li>[ <a href='/cool-products/computer/index.html' class='user'>Computer stuff</a> ]... </li>
<li>[ <a href='/cool-products/computer/laptops/index.html' class='user'>laptops</a> ]... </li>

I do find your code a little like wading through treacle I'm afraid.

10-16-2011, 10:49 AM
I just got the problem solved in the test file. had to do about 10 changes to the css and the html.
- change recursive list to plain list. original author of tree menu did this to handle treatment of adjacent items, which supposedly IE doesn't do.
- addition of :before and :after to handle
- addition of :last-of-type to handle highlighting of last menu item
- stripped out square brackets and ellipsis from html, moved to css
- addition of white-space:normal on the :before and white-space:nowrap on the li
- addition of float:left to li (already had display:inline, but display:inline alone caused havoc in ff7)
- maybe some other stuff I forgot

now I have to modify my menu bot's breadcrumb recursion to generate a straight li list instead of a nested ul-li list.

I still have one problem left which I haven't figured out yet:
look at the light gray #eee background color for .breadcrumbs_on and .breadcrumbs_off, in the test file (2nd link of 2nd post) this should cover the whole rectangle of that menu section, there should be no white. I am getting partial. there is 4px padding, if that makes any difference, and that doesn't seem to be obeyed.
am I experiencing a browser bug? this does this in IE8 also.

10-16-2011, 11:04 AM
am I experiencing a browser bug? this does this in IE8 also.

No, it happens in all browsers. Because you have floated the list items they are removed from the page flow so the grey is no longer wrapping it. Try the old;

overflow: hidden; height: 1%;

fix on your styles

10-17-2011, 02:08 AM
do you have any suggestions for reorganizing the code to make it more readable?
any rules of thumb?

10-17-2011, 04:04 AM
solved the problem with white, turns out float:left was the problem, and I didn't really need it, I had display:inline for the li tags, and that was enough for wrapping of the breadcrumbs. you can see it in the first link's menu system now.

10-17-2011, 04:19 AM
the nested UL-LI structure was in O'Reilly's CSS Cookbook for a breadcrumb menu. I have since modified it to use a linear layout and it works perfect. most of that css is in book-code.css under anything labelled breadcrumb. I made it a GPL3 Open Source menu.

book-code.css also contains tab menus.