Need CSS solution for vertical menu subitem word wrap |
|
KeithAdv
|
Hey folks--please forgive what might seem like a double post. I asked this earlier in the Wordpress section but maybe it should have been here since it is Artisteer-specific. I'm using Artisteer 3.0 and Wordpress 3.1.<br>
<br>
This is one of those questions for the CSS gurus. I envy you guys.<br>
<br>
What I want "sounds simple." (Famous last words.) <br>
<br>
I want to have lengthy subitems in the vertical menu. Therefore, I sometimes need them to wrap as two lines. The default is that subitems must be one line--they don't wrap, and lengthy ones simply run out of the sidebar. Ugly.<br>
<br>
Right now, I'm using a vertical menu plug-in. It wraps O.K. but I think that solution is inelegant. I don't have too much control over how it looks (and it sorta looks clunky). I'd prefer to use the vertical menu that Artisteer let me design!<br>
<br>
Abland has been helping me and we have gotten so tantalizingly close that it makes me believe there IS a solution, although I haven't found it yet.<br>
<br>
We're focusing on style.css in the section where the vertical submenu rules begin. This is the code we're looking at:<br>
<br>
ul.art-vmenu ul a <br>
<br>
{ <br>
display: block; <br>
white-space: no-wrap; <br>
height: 32px; <br>
overflow: visible; <br>
background-image: url('images/vsubitem.gif'); <br>
background-position: 25px 0; <br>
background-repeat: repeat-x; <br>
padding: 0 0 0 25px; <br>
line-height: 32px; <br>
color: #636D50; <br>
font-size: 11px; <br>
margin-left: 0; <br>
} <br>
<br>
<br>
Abland suggested I change...<br>
<br>
white-space: no-wrap; to white-space: normal; <br>
height: 32px; to min-height: 32px;<br>
<br>
That got me wrapping (yay!) but there was a line-spacing problem. The second (wrapped) line appeared all the way past the subitem separator line and landed right on top of the next item.<br>
<br>
Then we tried this change...<br>
<br>
display: block; to display: inline;<br>
<br>
The result was the separator lines did expand to accommodate both lines. But there were two problems now. First, the line-spacing problem remained---my "wrapped" lines still looked like triple-spacing! And now they were no longer aligned. The second "wrapped" line was at the left margin.<br>
<br>
I believe the truth is out there!  Anyone else interested in taking a swing at it?<br>
|
| |
KeithAdv
|
Ee-yikes! Sorry about all the <br>'s in there. The preview mode showed that message as perfectly formatted! Don't know what happened.
|
| |
KeithAdv
|
What I don't understand is why "line-height" has no apparent effect here. The original, default setting (as displayed above is)
line-height: 32px;
I can change that to anything I want but the spacing for the wrapped lines never changes. No matter what I put in there, the 32px action remains, causing the second line of my subitem menu to plonk down on top of the next subitem.
Can anyone figure out why that's not working or at least if I'm barking up the right tree?
|
| |
KeithAdv
|
(Sorry for the cross-post, but hope this helps someone.)
I sort of solved it! It's a little inelegant, but it's enough to let me use the Artisteer vertical menu instead of a plug-in.
I WAS barking up the right tree with line-height, more or less. Here's what I did:
Once again, I'm editing style.css in the section where the vertical submenu rules begin. The first change I made was in the section that begins:
ul.art-vmenu ul a
In that section, I changed
white-space: no-wrap; to white-space: normal;
THEN I went to the section that begins:
ul.art-vmenu ul a:link, ul.art-vmenu ul a:visited, ul.art-vmenu ul a:hover, ul.art-vmenu ul a:active, ul.art-vmenu ul span, ul.art-vmenu ul span span
...and THERE I changed
line-height: 32px; to line-height: 14px;
(My font size in this menu is 11px, FWIW) Now, what I get for that are vertical menu subitems that support ONE line-wrap, which is good enough for me. (If the item goes to three lines, it overlaps the separator bar.)
The one thing I lose is that the subitems that appear on one line are no longer prettily vertically centered. But I'm OK with that trade-off for now. I'm as shocked as you are that I figured this out--hope it helps someone else.
|
| |
Amine
|
I was looking for this solution since logntemps
thx
|
| |
KeithAdv
|
You're very welcome! I'm as surprised as anyone that I actually figured it out!
|
| |
|
|