logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 10-16-2011, 04:16 AM   #1
jmichae3
 
Join Date: Dec 2010
Posts: 366
Default liquid layout, problem with

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.

http://jesusnjim.com/cool-products/c...-a-new-pc.html
jmichae3 is offline   Reply With Quote
Old 10-16-2011, 04:56 AM   #2
jmichae3
 
Join Date: Dec 2010
Posts: 366
Default

oops, wrong url. it's http://JesusnJim.com/cool-products/c...e-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/c...tops/test.html uses different file location of book-code.css (thus different file).

Last edited by jmichae3; 10-16-2011 at 05:22 AM.. Reason: add more
jmichae3 is offline   Reply With Quote
Old 10-16-2011, 07:58 AM   #3
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

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;

Code:
<ul>
<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>
   </ul>
I do find your code a little like wading through treacle I'm afraid.
Corrosive is offline   Reply With Quote
Old 10-16-2011, 09:49 AM   #4
jmichae3
 
Join Date: Dec 2010
Posts: 366
Default

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.
jmichae3 is offline   Reply With Quote
Old 10-16-2011, 10:04 AM   #5
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

Quote:
Originally Posted by jmichae3 View Post
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;

Code:
overflow: hidden; height: 1%;
fix on your styles
Corrosive is offline   Reply With Quote
Old 10-17-2011, 01:08 AM   #6
jmichae3
 
Join Date: Dec 2010
Posts: 366
Default

do you have any suggestions for reorganizing the code to make it more readable?
any rules of thumb?
jmichae3 is offline   Reply With Quote
Old 10-17-2011, 03:04 AM   #7
jmichae3
 
Join Date: Dec 2010
Posts: 366
Default

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.
jmichae3 is offline   Reply With Quote
Old 10-17-2011, 03:19 AM   #8
jmichae3
 
Join Date: Dec 2010
Posts: 366
Default

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.
jmichae3 is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 07:56 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com