Mark Fellowes wrote:
>Side note - for those that saw my original post about this the other day
>(using a liquid layout), I've opted for a centered fixed.
>
>I'm using this tutorial as the basis for my side navigation:
>http://tutorials.alsacreations.com/rollover_unique/
>
>Here is the page:
>http://pamshop.com/Template1/exp8.html
>
>[...] Things don't seem to be working right and not sure what to adjust. As I
>continue to experiment wonder if someone can see my error.
>[...]
>
Hi Mark,
Now I see the thing is not working because of the basic is not good. The
Alsacreations-method is based upon a fixed font-size: li a { font-size:
18px; ), in combination with a fixed height of the (background-) image.
That will work only in Internet Explorer! - They should have warned for
that in the tutorial ...
- Take their example:
http://tutorials.alsacreations.com/rollover_unique/rollover.htm
and view it in Firefox with normal font-size; then enlarge the font-size
3 steps via Menu View > Font-size (or 3 times Ctrl-+). We see at
hovering that the position of the background is not good anymore.
Impossible (or: almost impossible) to arrange that with this method: if
you adjust for one enlargement, it will be wrong for another...
What to do?
First of all, I think you have to decide what it is, what you want:
* If you only want to change the background-color of the menu items,
then you can forget the hovering part of the background image, and
follow the advise of Zoe Gillenwater:
http://archivist.incutio.com/viewlist/css-discuss/74162
o In addition: if you need a "window-image" around, then you
have to split it up in a top and a bottom part, so that the
bottom partt can expand if the font-size (menu item height)
is scaled up or down.
* If you want to change each menu item with the same hovering
background image, then you can follow the examples of Christian
Montoya
http://archivist.incutio.com/viewlist/css-discuss/74157
o In addition: this bg-img has to be vertically centered, and
must have enough painted height above and under the item
line, so maximum font scaling doesn't give gaps.
Window-image: same as above.
* If you want the effect of the Alsacreations example , you have to
paint the menu item titles in the image. Then font scaling cannot
have influence on the show of the css-hover. = Possibility 1 (but
then with fixed width, so totally fixed) from my post:
http://archivist.incutio.com/viewlist/css-discuss/74166
o This one doesn't have the option of font scaling, which can
be needed at big resolutions; anyway the menu item texts
must be rather big!
o Disadvantage: if you want to add a new item to the menu,
everything has to be painted again. ;-)
* Alternative for the Alsacreations method (but with scalable fonts)
could be the use of semi-transparent png's (just in 1 color!) when
hovering over an item. Then you have to hack IE, for IE cannout
display this without aditional measures. Often: new problems are
coming ... (long loading time, unexpected effects).
o Now the menu can expand with scaling, window image has to be
split up as above.
o Alternative for this alternative is: using of a gif or jpg
with opacity. This is css-3, which is supported by FF, but
not by for example IE6 or Opera8.01. For IE there is a hack
(use of alpha-filter), others wil degrade to just the plain
hovering image.
As far as what you have made at this moment, I should say to use the
second option.
But everything depends on the wanted background image (or not) in the
window! :-)
I guess after your choice we might help with some finetuning, if needed.
Greetings,
francky
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
