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

Problems with xhtml-strict and "id=yui-main"

Expand Messages
  • rianhall
    I am developing a site that has to be set up like this ... I am wrapping the Navigation and Site Search in their own header div and then splitting it two
    Message 1 of 4 , Aug 22, 2008
    • 0 Attachment
      I am developing a site that has to be set up like this

      |-----------------------------------------------|
      | Navigation | Site Search |
      | | |
      -------------------------------------------------
      | Banner | |
      | | |
      |---------------------------------| Various |
      | Newsfeeds | Portlets |
      |---------------------------------| Go Here |
      | | |
      | | |
      | Main body | |
      | | |
      |---------------------------------|-------------|
      | Footer |
      |-----------------------------------------------|


      I am wrapping the Navigation and Site Search in their own header div
      and then splitting it two using the yui-main and yui-b selectors. I am
      doing this because we need to keep them in the same position across
      all pages while at the same time keeping the width of the Site Search
      to the same as the Portlets section. The problem is that I am also
      needing to use an id yui-main selector on the portion of the site
      below the header. This is causing my xhtml-strict code to fail it's
      validation. I know this is minor, but it's driving me crazy. One
      possible solution I found was to change all instances of the #yui-main
      id selection to a .yui-main class selector in the original
      reset-fonts-grids.css file. However, I am reluctant to keep this hack
      as I HATE altering the original .css files. Any Idea how I can use
      multiple "yui-main" id selectors or how else I can design this page?

      Here is a simplified example of the code I am using:
      <div id="doc2" class="yui-t5">
      <div id="header">
      <div id="yui-main">
      <div class="yui-b">
      <p>Navigation goes here</p>
      </div>
      </div>
      <div class="yui-b">
      <div id="site_search">
      <p>site search goes here</p>
      </div>
      </div>
      </div>
      <div id="bd">
      <div id="yui-main">
      <div class="yui-b">
      <div id="banner">
      <p>banner goes here</p>
      </div>
      <div id="news">
      <p>news goes here</p>
      </div>
      <div id="main_site_content">
      <p>Main Site Content goes here</p>
      </div>
      </div>
      </div>
      <div class="yui-b">
      <div id="portlet #1">
      <p>portlet content goes here</p>
      </div>
      <div id="portlet #2">
      <p>portlet content goes here</p>
      </div>
      <div id="portlet #3">
      <p>portlet content goes here</p>
      </div>
      <div id="portlet #4">
      <p>portlet content goes here</p>
      </div>
      </div>
      </div>
      <div id="footer">
      <p>Footer goes here</p>
      </div>
      </div>
    • rianhall
      I did not realize the format of the layout would get messed up when posting it. So here is a snippet of code with some borders to better reflect what the
      Message 2 of 4 , Aug 22, 2008
      • 0 Attachment
        I did not realize the format of the layout would get messed up when
        posting it. So here is a snippet of code with some borders to better
        reflect what the layout looks like. I hope someone can assist me :-)


        <div id="doc2" class="yui-t5" style="border: 1px solid #000000;">
        <div id="header">
        <div id="yui-main">
        <div class="yui-b" style="border: 1px solid #000000;">
        <p>Navigation goes here</p>
        </div>
        </div>
        <div class="yui-b" style="border: 1px solid #000000;">
        <div id="site_search">
        <p>site search goes here</p>
        </div>
        </div>
        </div>
        <div id="bd">
        <div id="yui-main">
        <div class="yui-b">
        <div id="banner" style="border: 1px solid #000000;">
        <p>banner goes here</p>
        </div>
        <div id="news" style="border: 1px solid #000000;">
        <p>news goes here</p>
        </div>
        <div id="main_site_content" style="border: 1px solid #000000;">
        <p>Main Site Content goes here</p>
        </div>
        </div>
        </div>
        <div class="yui-b">
        <div id="portlet #1" style="border: 1px solid #000000;">
        <p>portlet content goes here</p>
        </div>
        <div id="portlet #2" style="border: 1px solid #000000;">
        <p>portlet content goes here</p>
        </div>
        <div id="portlet #3" style="border: 1px solid #000000;">
        <p>portlet content goes here</p>
        </div>
        <div id="portlet #4" style="border: 1px solid #000000;">
        <p>portlet content goes here</p>
        </div>
        </div>
        </div>
        <div id="footer" style="border: 1px solid #000000;">
        <p>Footer goes here</p>
        </div>
        </div>



        --- In ydn-javascript@yahoogroups.com, "rianhall" <rianhall@...> wrote:
        >
        > I am developing a site that has to be set up like this
        >
        > |-----------------------------------------------|
        > | Navigation | Site Search |
        > | | |
        > -------------------------------------------------
        > | Banner | |
        > | | |
        > |---------------------------------| Various |
        > | Newsfeeds | Portlets |
        > |---------------------------------| Go Here |
        > | | |
        > | | |
        > | Main body | |
        > | | |
        > |---------------------------------|-------------|
        > | Footer |
        > |-----------------------------------------------|
        >
        >
        > I am wrapping the Navigation and Site Search in their own header div
        > and then splitting it two using the yui-main and yui-b selectors. I am
        > doing this because we need to keep them in the same position across
        > all pages while at the same time keeping the width of the Site Search
        > to the same as the Portlets section. The problem is that I am also
        > needing to use an id yui-main selector on the portion of the site
        > below the header. This is causing my xhtml-strict code to fail it's
        > validation. I know this is minor, but it's driving me crazy. One
        > possible solution I found was to change all instances of the #yui-main
        > id selection to a .yui-main class selector in the original
        > reset-fonts-grids.css file. However, I am reluctant to keep this hack
        > as I HATE altering the original .css files. Any Idea how I can use
        > multiple "yui-main" id selectors or how else I can design this page?
        >
        > Here is a simplified example of the code I am using:
        > <div id="doc2" class="yui-t5">
        > <div id="header">
        > <div id="yui-main">
        > <div class="yui-b">
        > <p>Navigation goes here</p>
        > </div>
        > </div>
        > <div class="yui-b">
        > <div id="site_search">
        > <p>site search goes here</p>
        > </div>
        > </div>
        > </div>
        > <div id="bd">
        > <div id="yui-main">
        > <div class="yui-b">
        > <div id="banner">
        > <p>banner goes here</p>
        > </div>
        > <div id="news">
        > <p>news goes here</p>
        > </div>
        > <div id="main_site_content">
        > <p>Main Site Content goes here</p>
        > </div>
        > </div>
        > </div>
        > <div class="yui-b">
        > <div id="portlet #1">
        > <p>portlet content goes here</p>
        > </div>
        > <div id="portlet #2">
        > <p>portlet content goes here</p>
        > </div>
        > <div id="portlet #3">
        > <p>portlet content goes here</p>
        > </div>
        > <div id="portlet #4">
        > <p>portlet content goes here</p>
        > </div>
        > </div>
        > </div>
        > <div id="footer">
        > <p>Footer goes here</p>
        > </div>
        > </div>
        >
      • Nate Koechley
        Hey rianhall, One of the primary changes to YUI Grids in the 3.0 PR1 release is the replacement of all IDs with classes. Though it s still an early preview
        Message 3 of 4 , Aug 24, 2008
        • 0 Attachment
          Hey rianhall,

          One of the primary changes to YUI Grids in the 3.0 PR1 release is the
          replacement of all IDs with classes. Though it's still an early
          preview release and not generally ready for production use, you can
          take a look here:
          http://developer.yahoo.com/yui/3/cssgrids/

          Other than that, you're right that modifying the original Grids file
          to use .yui-main instead of #yui-main if probably your best option in
          this case.

          Thanks,
          Nate



          On Aug 22, 2008, at 1:35 PM, rianhall wrote:

          > I am developing a site that has to be set up like this
          >
          > |-----------------------------------------------|
          > | Navigation | Site Search |
          > | | |
          > -------------------------------------------------
          > | Banner | |
          > | | |
          > |---------------------------------| Various |
          > | Newsfeeds | Portlets |
          > |---------------------------------| Go Here |
          > | | |
          > | | |
          > | Main body | |
          > | | |
          > |---------------------------------|-------------|
          > | Footer |
          > |-----------------------------------------------|
          >
          >
          > I am wrapping the Navigation and Site Search in their own header div
          > and then splitting it two using the yui-main and yui-b selectors. I am
          > doing this because we need to keep them in the same position across
          > all pages while at the same time keeping the width of the Site Search
          > to the same as the Portlets section. The problem is that I am also
          > needing to use an id yui-main selector on the portion of the site
          > below the header. This is causing my xhtml-strict code to fail it's
          > validation. I know this is minor, but it's driving me crazy. One
          > possible solution I found was to change all instances of the #yui-main
          > id selection to a .yui-main class selector in the original
          > reset-fonts-grids.css file. However, I am reluctant to keep this hack
          > as I HATE altering the original .css files. Any Idea how I can use
          > multiple "yui-main" id selectors or how else I can design this page?
          >
          > Here is a simplified example of the code I am using:
          > <div id="doc2" class="yui-t5">
          > <div id="header">
          > <div id="yui-main">
          > <div class="yui-b">
          > <p>Navigation goes here</p>
          > </div>
          > </div>
          > <div class="yui-b">
          > <div id="site_search">
          > <p>site search goes here</p>
          > </div>
          > </div>
          > </div>
          > <div id="bd">
          > <div id="yui-main">
          > <div class="yui-b">
          > <div id="banner">
          > <p>banner goes here</p>
          > </div>
          > <div id="news">
          > <p>news goes here</p>
          > </div>
          > <div id="main_site_content">
          > <p>Main Site Content goes here</p>
          > </div>
          > </div>
          > </div>
          > <div class="yui-b">
          > <div id="portlet #1">
          > <p>portlet content goes here</p>
          > </div>
          > <div id="portlet #2">
          > <p>portlet content goes here</p>
          > </div>
          > <div id="portlet #3">
          > <p>portlet content goes here</p>
          > </div>
          > <div id="portlet #4">
          > <p>portlet content goes here</p>
          > </div>
          > </div>
          > </div>
          > <div id="footer">
          > <p>Footer goes here</p>
          > </div>
          > </div>
          >
          >
          >
          >
          >
          >
          >
          >
          > ------------------------------------
          >
          > Yahoo! Groups Links
          >
          >
          >
        • rianhall
          Thanks for the reply. I ll stick with the .yui-main alterations.
          Message 4 of 4 , Aug 25, 2008
          • 0 Attachment
            Thanks for the reply. I'll stick with the ".yui-main" alterations.

            --- In ydn-javascript@yahoogroups.com, Nate Koechley <natek@...> wrote:
            >
            > Hey rianhall,
            >
            > One of the primary changes to YUI Grids in the 3.0 PR1 release is the
            > replacement of all IDs with classes. Though it's still an early
            > preview release and not generally ready for production use, you can
            > take a look here:
            > http://developer.yahoo.com/yui/3/cssgrids/
            >
            > Other than that, you're right that modifying the original Grids file
            > to use .yui-main instead of #yui-main if probably your best option in
            > this case.
            >
            > Thanks,
            > Nate
            >
            >
            >
            > On Aug 22, 2008, at 1:35 PM, rianhall wrote:
            >
            > > I am developing a site that has to be set up like this
            > >
            > > |-----------------------------------------------|
            > > | Navigation | Site Search |
            > > | | |
            > > -------------------------------------------------
            > > | Banner | |
            > > | | |
            > > |---------------------------------| Various |
            > > | Newsfeeds | Portlets |
            > > |---------------------------------| Go Here |
            > > | | |
            > > | | |
            > > | Main body | |
            > > | | |
            > > |---------------------------------|-------------|
            > > | Footer |
            > > |-----------------------------------------------|
            > >
            > >
            > > I am wrapping the Navigation and Site Search in their own header div
            > > and then splitting it two using the yui-main and yui-b selectors. I am
            > > doing this because we need to keep them in the same position across
            > > all pages while at the same time keeping the width of the Site Search
            > > to the same as the Portlets section. The problem is that I am also
            > > needing to use an id yui-main selector on the portion of the site
            > > below the header. This is causing my xhtml-strict code to fail it's
            > > validation. I know this is minor, but it's driving me crazy. One
            > > possible solution I found was to change all instances of the #yui-main
            > > id selection to a .yui-main class selector in the original
            > > reset-fonts-grids.css file. However, I am reluctant to keep this hack
            > > as I HATE altering the original .css files. Any Idea how I can use
            > > multiple "yui-main" id selectors or how else I can design this page?
            > >
            > > Here is a simplified example of the code I am using:
            > > <div id="doc2" class="yui-t5">
            > > <div id="header">
            > > <div id="yui-main">
            > > <div class="yui-b">
            > > <p>Navigation goes here</p>
            > > </div>
            > > </div>
            > > <div class="yui-b">
            > > <div id="site_search">
            > > <p>site search goes here</p>
            > > </div>
            > > </div>
            > > </div>
            > > <div id="bd">
            > > <div id="yui-main">
            > > <div class="yui-b">
            > > <div id="banner">
            > > <p>banner goes here</p>
            > > </div>
            > > <div id="news">
            > > <p>news goes here</p>
            > > </div>
            > > <div id="main_site_content">
            > > <p>Main Site Content goes here</p>
            > > </div>
            > > </div>
            > > </div>
            > > <div class="yui-b">
            > > <div id="portlet #1">
            > > <p>portlet content goes here</p>
            > > </div>
            > > <div id="portlet #2">
            > > <p>portlet content goes here</p>
            > > </div>
            > > <div id="portlet #3">
            > > <p>portlet content goes here</p>
            > > </div>
            > > <div id="portlet #4">
            > > <p>portlet content goes here</p>
            > > </div>
            > > </div>
            > > </div>
            > > <div id="footer">
            > > <p>Footer goes here</p>
            > > </div>
            > > </div>
            > >
            > >
            > >
            > >
            > >
            > >
            > >
            > >
            > > ------------------------------------
            > >
            > > Yahoo! Groups Links
            > >
            > >
            > >
            >
          Your message has been successfully submitted and would be delivered to recipients shortly.