Sent by Zoe M. Gillenwater on 29 November 2004 15:03
Alexa Keefe wrote:
>I have a menu I'm working on with a style tag set to bold the menu item
>currently being viewed (with a class called .maincurrent).
>
>The menu is fluid (which may or may not be a good idea - the goal was to
>allow it to resize with the page, which is also fluid). The problem I am
>having difficulty resolving is that this bolding causes some of the menu
>items to shift horizontally when selected.
>
>
Yep -- bolding makes text take up more space, and if the size of the
boxes is dependent on the size of the text inside (as it is in your
example, since each button is placed in its own table cell without
dimensions), their dimensions and placement are going to change when
they are bolded.
>I've tried making the menu items a fixed width, which solves the
>shifting problem, but then presents the separate problem of the menu
>items wrapping when the screen is resized to 800x600. Argh.
>
>
Have you tried setting the widths of the buttons in ems, and assigning a
total width to the container for all the buttons?
>Does anyone know of a way to achieve both the bolding and resolve the
>jumping, or whether this is even a possibility?
>
>
A crufty way would be to set each button to an exact percentage width,
all of them adding up to 100% (or preferably 98 or 99%). This would
mean that its width would no longer be tied to the size of the text
within. You would have to test this extensively, though, to figure out
the correct percentages to use, and would risk strange wrapping. It's
something to try though.
I personally don't think the jumping is a big deal since it occurs
between pages, not on the same page. So many other things change
between pages that I think your users will not notice the small change
in the placement of your nav items. So you might consider if this is
even worth fixing!
Good luck,
Zoe
>http://www.cymballine.org/sgc_development/mission.html
>
>
--
Zoe M. Gillenwater
Design Specialist
Highway Safety Research Center
http://www.hsrc.unc.edu
______________________________________________________________________
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/