Wrapping on Horizontal CSS Menu

[thindenim]

Hi there,

I have a subnav bar on my site, which is a horizontal css list menu. Problem I have is that if the menu items go wider than the page it wraps down to the next line. This is what I want it do (I don't want nowrap), however, it cuts off items in the middle, i.e. on this page: -

Hair Products

The "Curling Tongs" menu item starts on the first line and finishes on the second. Does anyone know any way round this? What I after is if a full <li> doesn't fit, then it goes onto the next line. Quite hard to explain, but hopefully you get the idea!


Thanks,
David

[tw]

Set the a element to display: block, e.g.:

#subnavbar li a {
display: block;
}

[thindenim]

Unfortunately that doesn't do the trick as the display is already set to inline. If it's set to display:block all the links go underneath each other.

[jannmirch]

Someone else, with more smarts than me may be able to tell you a way to control it with CSS, but rather than beating your head against a wall in the meantime, set up a second list under the first so you can manually control the line break.

[tw]

Originally Posted by thindenim

Unfortunately that doesn't do the trick as the display is already set to inline. If it's set to display:block all the links go underneath each other.

No, you've set the <li> to display inline. Set the <a> to display: block and keep the <li> inline.

[iany]

Hi thindenim

Couple of things. You won't be able to do this as you suggest in CSS. However, two things could help. Specify the width of the <li> element in the subnav div. As you know the width of the subnav you can work out the number that can be accommodated in that width. Remember to add the padding and margins to the overall. In that way you will force any extra <li> into the next line.

Couple of other points while we are on the subject.

You haven't specified a background colour in the body code. Always good idea as not every one uses the default colours in their browsers. Also you have a non-valid style element at line377 .RecentlyViewed_Txt - vertical align not recognised.

You might also want to run your html through a validator - as round there is a missing <ul></ul>, I think after the subnavbar div.

If you want to discuss further, send me a PM and we can chat tomorrow (friday)

Regards

Ian

[thindenim]

Hi TW, unforfunately that doesn't do the trick either

I may just break the list apart. It's a database loop so will need to split that up into an outer and inner loop or something

Will check the code Ian, thanks.

[holyhttp]

You can wrap your navigation menu by just floating the list item instead of having them inline:
#subnavbar li {
float:left;
margin-right:5px;
background-image:url(../i/layout/arrow_pink.gif);
background-repeat:no-repeat;
background-position:center left;
padding-left:14px;
line-height:18px;
}

because li is now floated it might be a good idea to specify the height of #subnavbar. A height 36px should be enough to contains the 2 lines i.e double of the <li> line-height.

[iany]

Originally Posted by holyhttp

You can wrap your navigation menu by just floating the list item instead of having them inline:

Don't you still require to have display:inline with the float to prevent IE6 doubling the left margin?

See :
IE Doubled Float-Margin Bug - CSS fixes and workarounds

Ian

[weegillis]

You may be making an issue of something that is very minor, cosmetically. Even with wrapping, your link retains its integrity. What's more, if you solve the issue at the current font size, it may simply re-appear when text size is adjusted.

If you don't want link phrases to wrap, use the old standby: the non-breaking space,

 

within the phrase. Then the entire link phrase will drop to the next line.

[iany]

thindenim

As I mentioned earlier, specifying the width of the subnavbar li helps with this situation.

See IY e-solutions -girlznight test

where I have mocked up the menu. Style info is at top of page.
Two additions to your style (and addition of wrapping <u></ul>)

Using float:left does not work in FireFox as you need to specify the height of subnavbar <u>. Unfortunately, this also limits the number of menu items that you could have, unlike your option which would, if you wished allow a third layer.

Cheers

Ian