if you check out http://www.alabu.com/twincity/ notice that the separators and buttons dont extend the full width of the menu, any ideas? thanks... menu data file is at http://www.alabu.com/twincity/java/menu_data.js
~Hal
vertical menu width problem
The separator is going the full width..of the item which is what it does. I tried a number of things which I'll list here with there results.
1. itemwidth="100%"; result: no change.
2. adding separatorwidth=150px; result: goes across the menu but text is shifted all the way left.
3. itemwidth=150; result: again text is shifted all the way left.
4. itemwidth=150; align="center"; result: separator goes all the way, the text is centered but it's centered based on the width of each 'word or words' so the words do not align directly under each other at their beginning point.
I figured two options to get the separator all the way across and keep the text as it is:
1. make a spacer image about 40px wide by 25px high and transparent so it won't show, then insert it in the code like this But, that will always leave 40pixels at the left side, even if the font size is larger; The 40 pixels width is what worked with my font settings.
2. make each item of images, so it would be two images per item one in the dark blue and one in the goldie color for the mouseover.
The one option I have been trying but so far no luck is to try and use css text-indent. The problem is it applies to block elements [I'm not sure what all of them are] I tried h6 that will work but it also makes the item height higher than your 25px. I also tried the paragraph code. In IE5.5 it will work perfectly if you don't close it, but you have to close it to get it to work in other browsers and that also makes the item height too high. I don't know what other things are block elements and if any of them don't add space to the height.
One thing not elegant but should work no matter what is done with the text size or resolution is to use non-breaking line spaces to put all the text in the same position under each other.
Hope some of this might be workable for you.
Ruth
1. itemwidth="100%"; result: no change.
2. adding separatorwidth=150px; result: goes across the menu but text is shifted all the way left.
3. itemwidth=150; result: again text is shifted all the way left.
4. itemwidth=150; align="center"; result: separator goes all the way, the text is centered but it's centered based on the width of each 'word or words' so the words do not align directly under each other at their beginning point.
I figured two options to get the separator all the way across and keep the text as it is:
1. make a spacer image about 40px wide by 25px high and transparent so it won't show, then insert it in the code like this
Code: Select all
aI("image=spacer.gif;text=Home;url=http://www.alabu.com/;onclass=ignore;status=Back To Home Page;");2. make each item of images, so it would be two images per item one in the dark blue and one in the goldie color for the mouseover.
The one option I have been trying but so far no luck is to try and use css text-indent. The problem is it applies to block elements [I'm not sure what all of them are] I tried h6 that will work but it also makes the item height higher than your 25px. I also tried the paragraph code. In IE5.5 it will work perfectly if you don't close it, but you have to close it to get it to work in other browsers and that also makes the item height too high. I don't know what other things are block elements and if any of them don't add space to the height.
One thing not elegant but should work no matter what is done with the text size or resolution is to use non-breaking line spaces to put all the text in the same position under each other.
Hope some of this might be workable for you.
Ruth