CSS-Discuss,
I've taken steps to make sure my code is not only valid, but also as
presentable as possible, for a situation in which I must admit I'm a
little over my head. I hope you will all find it easy to read.
The Current Situation:
I have some drop down menus which work, but involve cumbersome Java
script, and also heavily rely on gif image rollovers, which are a bit of
a bandwidth sucker. They also rely on proprietary menu generation
software which I would like to not have to rely on.
The working menus can be seen near the top left corner, here:
http://www.theloop.jp
This can be taken as a model of what I hope to achieve with CSS. I
realize that fundamentally my design relies on pixel-perfect layout,
which some might object to as less-than-ideal design. But please bear
with me.
The Plan:
I had hopes that I could accomplish the same effects with the "Son
Of Suckerfish" drop down menus, which promise not only be cleaner and
easier to maintain, but also more efficient, and theoretically more
cross-browser compatible. I had asked about the possibility here on this
list, back in May, but life prevented me from acting on it until now. In
any case, the current situation is that it looks very close to possible,
but if it is, it's a little beyond me.
A test of my current best efforts can be seen here:
http://www.theloop.jp/test.html
The Problems:
There are two problems. One is positioning, the other, more
difficult, problem, is getting text to show and hide.
Problem One:
Positioning: I can get the top line of the menu ("Information |
Contact | Home"), to be positioned seamlessly in relation to the rest of
the header graphics. But vertically positioning it so causes the sub
menus to move in relation to the top line as much as the top line has
moved from the top of the view port.
Attempted solutions:
I have attempted to position the sub menus individually from the top
line, to prevent it from detaching from the top line. But no success.
Setting absolute positions for the sub menus has no effect, and changing
them to relative or other types of position cause them to run around all
over the screen.
Problem Two:
The text, as can be seen in the Java Script menus on the working
pages, turns from English to Japanese when rolled over. In the CSS
version, which is based on advice I got from this list, I have got as
far as making Japanese text appear when the mouse rolls over, but the
English text remains. I have tried to hide the English text, but any
attempt to do so causes the Japanese text to remain invisible as well.
In the CSS, you can see that I have commented out the style that refers
to the English text. Uncommenting it means that when moused over, the
menu item simply goes blank.
Attempted solutions:
Attempts to use positioning, the same way the sub menus appear and
disappear, causes the menu to change size and shape for the worse.
Attempts to use the visibility: style (as opposed to display:) also
affects the size of the menu items, and does nothing to alleviate the
problem.
Reference:
All the CSS that affects the menu, is here:
http://www.theloop.jp/menu.css
The Suckerfish code was obtained from here:
http://www.htmldog.com/articles/suckerfish/dropdowns/
The previous advice I got on this list is here:
http://www.css-discuss.org/mailman/private/css-d/2004-May/027074.html
http://www.css-discuss.org/mailman/private/css-d/2004-May/027087.html
http://www.css-discuss.org/mailman/private/css-d/2004-May/027091.html
Any advice would be much appreciated.
Thank you.
--
Dave Gutteridge
[EMAIL-REMOVED]
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
