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

Website Top Nav CSS flowing onto page

Expand Messages
  • stevan2020
    I have modified the Website Top Nav With Submenus Built From Markup to be used as an include file to replace an exsiting Top Nav that is included on hundreds
    Message 1 of 4 , Jul 23, 2008
    • 0 Attachment
      I have modified the "Website Top Nav With Submenus Built From Markup"
      to be used as an include file to replace an exsiting Top Nav that is
      included on hundreds of pages. The Nav bar works fine as an include
      file.
      However, the CSS is influencing existing web pages. It is
      centering pages that are supposed to be left justified. It is also
      changing the cell-padding set in tables from 3 pixels to 0 pixels.

      ANyone know how to prevent this?

      Here is the include file ....
      <!-- Standard reset, fonts and grids -->
      <link rel="stylesheet" type="text/css"
      href="/validation/yui/build/reset-fonts-grids/reset-fonts-grids.css">

      <!-- CSS for Menu -->
      <link rel="stylesheet" type="text/css"
      href="/validation/yui/build/assets/skins/sam/menu.css">

      <!-- ink rel="stylesheet" type="text/css"
      href="/validation/yui/build/menu/assets/menu.css" -->


      <!-- Dependency source files -->
      <script type="text/javascript" src="/validation/yui/build/yahoo-dom-
      event/yahoo-dom-event.js"></script>
      <script type="text/javascript"
      src="/validation/yui/build/container/container_core.js"></script>

      <!-- Menu source file -->
      <script type="text/javascript"
      src="/validation/yui/build/menu/menu.js"></script>


      <!-- Page-specific script -->
      <script type="text/javascript">
      /*
      Initialize and render the MenuBar when its elements are ready
      to be scripted.
      */
      YAHOO.util.Event.onContentReady("TopNav", function () {

      /*
      Instantiate a MenuBar: The first argument passed to the
      constructor is the id of the element in the page
      representing the MenuBar; the second is an object literal
      of configuration properties.
      */

      var oMenuBar = new YAHOO.widget.MenuBar("TopNav", {

      autosubmenudisplay: true,
      hidedelay: 750,
      lazyload: true });

      /*
      Call the "render" method with no arguments since the
      markup for this MenuBar instance is already exists in
      the page.
      */

      oMenuBar.render();
      });

      </script>


      <!-- Page-specific styles -->
      <style type="text/css">
      <!--

      div.yui-b p {
      margin: 0 0 .5em 0;
      color: #999;
      }

      div.yui-b p strong {
      font-weight: bold;
      color: #000;
      }

      div.yui-b p em {
      color: #000;
      }

      h1 {
      font-weight: bold;
      margin: 0 0 1em 0;
      padding: .25em .5em;
      background-color: #ccc;
      }

      #TopNav {
      margin: 0 0 10px 0;

      -->
      </style>

      Here is part of the unordered list of links ....

      <div id="TopNav" class="yuimenubar yuimenubarnav">
      <div class="bd">
      <ul class="first-of-type">
      <li
      class="yuimenubaritem first-of-type"><a class="yuimenubaritemlabel"
      href="/default.asp">Home</a>
      </li>
      <li
      class="yuimenubaritem"><a class="yuimenubaritemlabel"
      href="/function/calendar/calendars.asp">Calendar</a>

      <div id="Calendar" class="yuimenu">
      <div class="bd">
      <ul>

      <!-- Level 2 Calendar-->
      <li class="yuimenuitem"><a
      class="yuimenuitemlabel"
      href="/function/human_res/pedc/pedc.asp"><acronym title="Postal
      Education and Development Center">PEDC</acronym> Classes</a></li>
      <li class="yuimenuitem"><a
      class="yuimenuitemlabel"
      href="/function/senior/itinerary/weekly.asp">Senior Schedule</a></li>
      </ul>
      </div>
      </div>
      </li>
      <li
      class="yuimenubaritem"><a class="yuimenubaritemlabel"
      href="/clusterdb/clusterdb.asp">Database</a>

      <div id="Database" class="yuimenu">
      <div class="bd">
      <ul>

      <!-- Level 2 Database -->
      <li class="yuimenuitem"><a
      class="yuimenuitemlabel"href="/clusterdb/complement/complement.asp">Co
      mplement</a></li>
      <li class="yuimenuitem"><a
      class="yuimenuitemlabel"href="/clusterdb/facilities/ContractPO.asp"><a
      cronym title="Community Post Office">CPO</acronym>/<acronym
      title="Contract Postal Unit">CPU</acronym> Information</a></li>
      <li class="yuimenuitem"><a
      class="yuimenuitemlabel"href="/clusterdb/delserv/all_delv.asp">Deliver
      ies</a></li>
      <li class="yuimenuitem"><a
      class="yuimenuitemlabel"href="/clusterdb/facilities/docks.asp">Dock
      Information</a></li>
      </ul>
      </div>
      </div>
      </li>
      </ul>
      </div>
      </div>
      </div>
    • stevan2020
      I have discovered that the file reset-fonts-grids.css is (as the name implies) resetting the styles applied to existing pages. When I remove
      Message 2 of 4 , Jul 29, 2008
      • 0 Attachment
        I have discovered that the file reset-fonts-grids.css is (as the name
        implies) resetting the styles applied to existing pages.

        When I remove reset-fonts-grids.css, the pages display correctly, but
        the menu is adversely affected by the css on each individual page.
        The menus can look different on each of the approximately 450 pages.

        This is an Intranet site and the pages are mainly reports. The CSS
        can be very different from one group of pages to another.

        So, my question now comes down to this...

        Is there a method to use the YUI menu as an include file (replacing
        an existing navigation include file), in existing pages...

        1. Without modifying each existing page.
        2. Having the reset-fonts-grids.css files adversely affect existing
        pages.


        -- Steve



        --- In ydn-javascript@yahoogroups.com, "stevan2020"
        <stevan.s.cohen@...> wrote:
        >
        > I have modified the "Website Top Nav With Submenus Built From
        Markup"
        > to be used as an include file to replace an exsiting Top Nav that
        is
        > included on hundreds of pages. The Nav bar works fine as an
        include
        > file.
        > However, the CSS is influencing existing web pages. It is
        > centering pages that are supposed to be left justified. It is also
        > changing the cell-padding set in tables from 3 pixels to 0 pixels.
        >
        > ANyone know how to prevent this?
        >
        > Here is the include file ....
        > <!-- Standard reset, fonts and grids -->
        > <link rel="stylesheet" type="text/css"
        > href="/validation/yui/build/reset-fonts-grids/reset-fonts-
        grids.css">
        >
        > <!-- CSS for Menu -->
        > <link rel="stylesheet" type="text/css"
        > href="/validation/yui/build/assets/skins/sam/menu.css">
        >
        > <!-- ink rel="stylesheet" type="text/css"
        > href="/validation/yui/build/menu/assets/menu.css" -->
        >
        >
        > <!-- Dependency source files -->
        > <script type="text/javascript" src="/validation/yui/build/yahoo-dom-
        > event/yahoo-dom-event.js"></script>
        > <script type="text/javascript"
        > src="/validation/yui/build/container/container_core.js"></script>
        >
        > <!-- Menu source file -->
        > <script type="text/javascript"
        > src="/validation/yui/build/menu/menu.js"></script>
        >
        > .......................... and so on
      • Todd Kloots
        Perhaps create your own version of YUI Reset, prefixing the style rules used by the Reset with a class name and then apply that class name to the parent
        Message 3 of 4 , Aug 1, 2008
        • 0 Attachment
          Perhaps create your own version of YUI Reset, prefixing the style rules
          used by the Reset with a class name and then apply that class name to
          the parent element of your YUI Menu. That should sandbox the necessary
          reset rules so that your Menu rendered consistently across the various
          pages of your site.

          stevan2020 wrote:
          >
          > I have discovered that the file reset-fonts-grids.css is (as the name
          > implies) resetting the styles applied to existing pages.
          >
          > When I remove reset-fonts-grids.css, the pages display correctly, but
          > the menu is adversely affected by the css on each individual page.
          > The menus can look different on each of the approximately 450 pages.
          >
          > This is an Intranet site and the pages are mainly reports. The CSS
          > can be very different from one group of pages to another.
          >
          > So, my question now comes down to this...
          >
          > Is there a method to use the YUI menu as an include file (replacing
          > an existing navigation include file), in existing pages...
          >
          > 1. Without modifying each existing page.
          > 2. Having the reset-fonts-grids.css files adversely affect existing
          > pages.
          >
          > -- Steve
          >
          > --- In ydn-javascript@yahoogroups.com
          > <mailto:ydn-javascript%40yahoogroups.com>, "stevan2020"
          > <stevan.s.cohen@...> wrote:
          > >
          > > I have modified the "Website Top Nav With Submenus Built From
          > Markup"
          > > to be used as an include file to replace an exsiting Top Nav that
          > is
          > > included on hundreds of pages. The Nav bar works fine as an
          > include
          > > file.
          > > However, the CSS is influencing existing web pages. It is
          > > centering pages that are supposed to be left justified. It is also
          > > changing the cell-padding set in tables from 3 pixels to 0 pixels.
          > >
          > > ANyone know how to prevent this?
          > >
          > > Here is the include file ....
          > > <!-- Standard reset, fonts and grids -->
          > > <link rel="stylesheet" type="text/css"
          > > href="/validation/yui/build/reset-fonts-grids/reset-fonts-
          > grids.css">
          > >
          > > <!-- CSS for Menu -->
          > > <link rel="stylesheet" type="text/css"
          > > href="/validation/yui/build/assets/skins/sam/menu.css">
          > >
          > > <!-- ink rel="stylesheet" type="text/css"
          > > href="/validation/yui/build/menu/assets/menu.css" -->
          > >
          > >
          > > <!-- Dependency source files -->
          > > <script type="text/javascript" src="/validation/yui/build/yahoo-dom-
          > > event/yahoo-dom-event.js"></script>
          > > <script type="text/javascript"
          > > src="/validation/yui/build/container/container_core.js"></script>
          > >
          > > <!-- Menu source file -->
          > > <script type="text/javascript"
          > > src="/validation/yui/build/menu/menu.js"></script>
          > >
          > > .......................... and so on
          >
          >
        • stevan2020
          Thanks for the advice, got your suggestion to work with a little tinkering. ... rules ... to ... necessary ... various ... name ... but ... pages. ...
          Message 4 of 4 , Aug 5, 2008
          • 0 Attachment
            Thanks for the advice, got your suggestion to work with a little
            tinkering.

            --- In ydn-javascript@yahoogroups.com, Todd Kloots <kloots@...> wrote:
            >
            > Perhaps create your own version of YUI Reset, prefixing the style
            rules
            > used by the Reset with a class name and then apply that class name
            to
            > the parent element of your YUI Menu. That should sandbox the
            necessary
            > reset rules so that your Menu rendered consistently across the
            various
            > pages of your site.
            >
            > stevan2020 wrote:
            > >
            > > I have discovered that the file reset-fonts-grids.css is (as the
            name
            > > implies) resetting the styles applied to existing pages.
            > >
            > > When I remove reset-fonts-grids.css, the pages display correctly,
            but
            > > the menu is adversely affected by the css on each individual page.
            > > The menus can look different on each of the approximately 450
            pages.
            > >
            > > This is an Intranet site and the pages are mainly reports. The CSS
            > > can be very different from one group of pages to another.
            > >
            > > So, my question now comes down to this...
            > >
            > > Is there a method to use the YUI menu as an include file
            (replacing
            > > an existing navigation include file), in existing pages...
            > >
            > > 1. Without modifying each existing page.
            > > 2. Having the reset-fonts-grids.css files adversely affect
            existing
            > > pages.
            > >
            > > -- Steve
            > >
            > > --- In ydn-javascript@yahoogroups.com
            > > <mailto:ydn-javascript%40yahoogroups.com>, "stevan2020"
            > > <stevan.s.cohen@> wrote:
            > > >
            > > > I have modified the "Website Top Nav With Submenus Built From
            > > Markup"
            > > > to be used as an include file to replace an exsiting Top Nav
            that
            > > is
            > > > included on hundreds of pages. The Nav bar works fine as an
            > > include
            > > > file.
            > > > However, the CSS is influencing existing web pages. It is
            > > > centering pages that are supposed to be left justified. It is
            also
            > > > changing the cell-padding set in tables from 3 pixels to 0
            pixels.
            > > >
            > > > ANyone know how to prevent this?
            > > >
            > > > Here is the include file ....
            > > > <!-- Standard reset, fonts and grids -->
            > > > <link rel="stylesheet" type="text/css"
            > > > href="/validation/yui/build/reset-fonts-grids/reset-fonts-
            > > grids.css">
            > > >
            > > > <!-- CSS for Menu -->
            > > > <link rel="stylesheet" type="text/css"
            > > > href="/validation/yui/build/assets/skins/sam/menu.css">
            > > >
            > > > <!-- ink rel="stylesheet" type="text/css"
            > > > href="/validation/yui/build/menu/assets/menu.css" -->
            > > >
            > > >
            > > > <!-- Dependency source files -->
            > > > <script type="text/javascript" src="/validation/yui/build/yahoo-
            dom-
            > > > event/yahoo-dom-event.js"></script>
            > > > <script type="text/javascript"
            > > >
            src="/validation/yui/build/container/container_core.js"></script>
            > > >
            > > > <!-- Menu source file -->
            > > > <script type="text/javascript"
            > > > src="/validation/yui/build/menu/menu.js"></script>
            > > >
            > > > .......................... and so on
            > >
            > >
            >
          Your message has been successfully submitted and would be delivered to recipients shortly.