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

Alignment of submenu indicators

Expand Messages
  • moysalen
    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
    Message 1 of 3 , Dec 3, 2006
    • 0 Attachment
      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.
    • 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 2 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 3 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.