Loading ...
Sorry, an error occurred while loading the content.

Re: [ydn-javascript] Alignment of submenu indicators

Expand Messages
  • Todd Kloots
    You probably have a style rule defined that is setting the text alignment of LI elements to left. If your items have a submenu, you need to make sure that the
    Message 1 of 3 , Dec 4, 2006
    • 0 Attachment
      You probably have a style rule defined that is setting
      the text alignment of LI elements to left. If your
      items have a submenu, you need to make sure that the
      CSS "text-align" property is set to "right." This is
      done for you in the menu CSS:

      div.yuimenu li.hassubmenu,
      div.yuimenu li.hashelptext {

      text-align:right;

      }

      Are you using the YUI Menu CSS, or did you create your
      own? If you are using the YUI Menu CSS and still have
      this problem, the you probably have a style definition
      with a high specificity that is overriding the default
      value for the "text-align" property in the YUI Menu
      CSS. Check your stylesheet.

      Hope that helps.

      - Todd


      --- moysalen <larsfredriksen@...> wrote:

      > Hi,
      > In example07, the submenu indicator ">" is right
      > aligned within the
      > menuitem box. On my web page, I do not see this,
      > instead the ">" is
      > positioned relative to the menuitem text:
      >
      > Your example:
      >
      > Communication >
      > Shopping >
      >
      > My web page show this:
      >
      > Communication >
      > Shopping >
      >
      >
      > What magic knob do I need to turn to force the right
      > alignment to
      > occur?
      > Thanks.
      >
      >
      >
      >
      > Yahoo! Groups Links
      >
      > (Yahoo! ID required)
      >
      > mailto:ydn-javascript-fullfeatured@yahoogroups.com
      >
      >
      >
      >
      >
      >
    • moysalen
      Hi Todd, Thanks for the quick answer. I ll take a look at the values of text-align. I guess I didn t pay attention to text properties as the is an image.
      Message 2 of 3 , Dec 5, 2006
      • 0 Attachment
        Hi Todd,
        Thanks for the quick answer. I'll take a look at the values of
        text-align. I guess I didn't pay attention to text properties as the
        '>' is an image.

        Also to note, I am using the following style sheets:

        reset.css
        font.css
        grid.css
        container.css
        menu.css
        personal.css

        Even when I disable the loading of the personal.css, do I see this
        problem. At the time I was focusing more on margin/padding properties
        to see if I could detect a difference. Pretty much the only big
        difference I noticed was that the menu in example07, had a text string
        of 62 spaces chars between the submenu div and the '>' image.

        So you would see

        LI
        A
        Text
        Div (this contains the submenu)
        Text *
        Img
        Text

        looking at the dom from the example. The text with the * is the one
        that is 30 chars long.

        In my example the dom layout is the same, with the exception that the
        afformentioned text was 1 char long (it is a space).

        I was wondering at the time that you guys used a space filler to
        position the image as far right as possible, instead of using the
        padding property.

        Can I also assume that the 'first-of-type' class does not affect the
        alignment?

        I'll go back and look to make sure the text-align is forced to be
        right for the LI.

        Thanks again..

        Lars
        --- In ydn-javascript@yahoogroups.com, Todd Kloots <kloots@...> wrote:
        >
        > You probably have a style rule defined that is setting
        > the text alignment of LI elements to left. If your
        > items have a submenu, you need to make sure that the
        > CSS "text-align" property is set to "right." This is
        > done for you in the menu CSS:
        >
        > div.yuimenu li.hassubmenu,
        > div.yuimenu li.hashelptext {
        >
        > text-align:right;
        >
        > }
        >
        > Are you using the YUI Menu CSS, or did you create your
        > own? If you are using the YUI Menu CSS and still have
        > this problem, the you probably have a style definition
        > with a high specificity that is overriding the default
        > value for the "text-align" property in the YUI Menu
        > CSS. Check your stylesheet.
        >
        > Hope that helps.
        >
        > - Todd
        >
        >
        > --- moysalen <larsfredriksen@...> wrote:
        >
        > > Hi,
        > > In example07, the submenu indicator ">" is right
        > > aligned within the
        > > menuitem box. On my web page, I do not see this,
        > > instead the ">" is
        > > positioned relative to the menuitem text:
        > >
        > > Your example:
        > >
        > > Communication >
        > > Shopping >
        > >
        > > My web page show this:
        > >
        > > Communication >
        > > Shopping >
        > >
        > >
        > > What magic knob do I need to turn to force the right
        > > alignment to
        > > occur?
        > > Thanks.
        > >
        > >
        > >
        > >
        > > Yahoo! Groups Links
        > >
        > > (Yahoo! ID required)
        > >
        > > mailto:ydn-javascript-fullfeatured@yahoogroups.com
        > >
        > >
        > >
        > >
        > >
        > >
        >
      Your message has been successfully submitted and would be delivered to recipients shortly.