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

Changing a nested layout css

Expand Messages
  • David Onder
    I have the following HTML. It creates a layout with a top, center, and bottom. There is a nested layout in the top (and bottom when done). I would like to
    Message 1 of 3 , May 1, 2009
    • 0 Attachment
      I have the following HTML. It creates a layout with a top, center,
      and bottom. There is a nested layout in the top (and bottom when
      done). I would like to change the background of the top (and bottom)
      to purple (#592C88) with a text color of gold (#C1A875). The center
      will be the opposite. I would also like to be able to resize the
      left, right, and center portions of the header portion based on what
      is in each part (this will be filled in by an automated program -
      CenterHeader, RightHeader, etc.). The HTML below sets the color of
      the text in the top and bottom correctly, but that is all. Any help
      would be appreciated.

      David Onder

      <html>
      <head>
      <link rel="stylesheet" type="text/css"href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css">
      <!-- Skin CSS files resize.css must load before layout.css -->
      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/assets/skins/sam/resize.css">
      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/assets/skins/sam/layout.css">
      <!-- Utility Dependencies -->
      <script src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
      <script src="http://yui.yahooapis.com/2.7.0/build/dragdrop/dragdrop-min.js"></script>
      <script src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
      <!-- Optional Animation Support-->
      <script src="http://yui.yahooapis.com/2.7.0/build/animation/animation-min.js"></script>
      <!-- Optional Resize Support -->
      <script src="http://yui.yahooapis.com/2.7.0/build/resize/resize-min.js"></script>
      <!-- Source file for the Layout Manager -->
      <script src="http://yui.yahooapis.com/2.7.0/build/layout/layout-min.js"></script>

      <style>
      /* Give the header a blue background */
      .yui-skin-sam .yui-layout {
      border: none;
      background:#592C88;
      font-size:93%;
      color:#C1A875;
      }
      .yui-skin-sam .yui-layout .yui-layout {
      border: none;
      background:#592C88;
      font-size:93%;
      color:#C1A875;
      }
      .yui-skin-sam .yui-layout .yui-layout-unit-top {
      background:#592C88;
      font-size:108%;
      font-weight: bold;
      color: #C1A875;
      }
      .yui-skin-sam .yui-layout .yui-layout-unit-top div.yui-layout-bd {
      border: 1px solid #808080;
      border-bottom-width: 3px;
      border-bottom-style: solid;
      border-bottom-color: red; /*#C1A875;*/
      }
      /* Set the background color */
      .yui-skin-sam .yui-layout .yui-layout-unit-center {
      background-color: #C1A875;
      }
      /* Style the text in the header */
      .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-hd h2 {
      font-weight: bold;
      color: #C1A875;
      padding: 3px;
      }
      /* Style the body */
      .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd {
      border: 1px solid #808080;
      border-bottom: none;
      border-top: none;
      *border-bottom-width: 0;
      *border-top-width: 0;
      /*background-color: #f2f2f2;*/
      text-align: left;
      }
      /* Add a border to the bottom of the body because there is no footer
      .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd-noft {
      border-bottom: 1px solid #808080;
      }*/
      /* Add a border to the top of the body because there is no header
      .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd-nohd {
      border-top: 1px solid #808080;
      }*/

      /* Style the footer */
      .yui-skin-sam .yui-layout div.yui-layout-ft {
      border: 1px solid #808080;
      border-top: none;
      *border-top-width: 0;
      background-color: #f2f2f2;
      }

      #head {
      background:#592C88;
      /* font-size:4em;*/
      border-collapse: collapse;
      color:#C1A875;
      border-bottom:1px solid #C1A875;
      }

      </style>
      <title></title>

      <body class="yui-skin-sam">
      <div id="header">
      <!-- --
      <table class="head" id="AutoNumber1">
      <tr>
      <td width="33%"><img src="http://www.wcu.edu/WebGraphics/Display/logo.jpg" alt="Western Carolina University" /></td>
      <td width="33%" align="center"><mrBannerText Name="CenterHeader">Center Header</mrBannerText></td>
      <td width="34%" align="right"><mrBannerText Name="RightHeader">Right Header</mrBannerText></td>
      </tr>
      </table>
      <!-- -->
      <div id="header_left" align="center"><img src="http://www.wcu.edu/WebGraphics/Display/logo.jpg" alt="Western Carolina University" /></div>
      <div id="header_center"><mrBannerText Name="CenterHeader">Center Header</mrBannerText></div>
      <div id="header_right"><mrBannerText Name="RightHeader">Right Header</mrBannerText></div>
      <!-- -->
      </div>

      <div id="center1">
      <table cellspacing="0px" cellpadding="0px" align="center" width="100%" height="20px">
      <tr valign="top">
      <td valign="top">
      <table class="compound" align="center" id="table2" cellSpacing="0px" cellPadding="0px" border="0px">
      <tr>
      <td class="header" width="100%" colspan="3">
      <mrData Index="1">Question Prompt</mrData>
      </td>
      </tr>
      <tr>
      <td class="leftDesc">
      <mrData Index="2">Part 1 Description here</mrData>
      </td>
      <td class="rightDesc">
      <mrData Index="4">Part 2 Description here</mrData>
      </td>
      </tr>
      <tr>
      <td class="leftQuestion">
      <mrData Index="3">Part 1 here</mrData>
      </td>
      <td class="rightQuestion">
      <mrData Index="5">Part 2 here</mrData>
      </td>
      </tr>
      </table>
      </td>
      </tr>
      </table>
      </div>

      <div id="bottom1">
      <!-- --
      <div id="footer_left">Institutional Effectiveness and Planning</div>
      <div id="footer_center" align="right"><input type="submit" name="_NNext" class="mrNext" style="width: 70px;" value="Next" alt="Next"></input></div>
      <!-- -->
      <table cellspacing="0px" cellpadding="0px" align="center" width="100%" height="20px">
      <tr>
      <td align="center">
      <mrNavButton Name="Prev">Previous</mrNavButton>
      <mrNavButton Name="Next">Next</mrNavButton>
      <mrNavButton Name="Goto">GoTo</mrNavButton>
      </td>
      </tr>
      <td colspan="3" align="center" font-style="italic">
      Institutional Effectiveness and Planning
      </td>
      </table>
      <!-- -->
      </div>

      <script>

      var layout = new YAHOO.widget.Layout({
      units: [
      { position: 'top', height: 80, body: 'header' }, //Height required here
      //{ position: 'right', width: 300 }, //Width required here
      { position: 'bottom', height: 50, body: 'bottom1' }, //Height required here
      //{ position: 'left', width: 200 }, //Width required here
      { position: 'center', body: 'center1', scroll: true }
      ]
      });
      layout.on('render', function() {
      var hd = layout.getUnitByPosition('top').get('wrap');
      var header = new YAHOO.widget.Layout(hd, {
      parent: layout,
      units: [
      { position: 'left', width:220, body: 'header_left' },
      { position: 'center', body: 'header_center' },
      /*{ position: 'right', body: 'header_right' }*/
      ]
      });
      var ft = layout.getUnitByPosition('bottom').get('wrap');
      var footer = new YAHOO.widget.Layout(ft, {
      parent: layout,
      units: [
      { position: 'left', width:220, body: 'footer_left' },
      { position: 'center', body: 'footer_center' },
      /*{ position: 'right', body: 'footer_right' }*/
      ]
      });
      //footer.render();
      header.render();
      });
      layout.render();
      </script>
      </body>
    • Dav Glass
      David -- Here is a modified version of your file: http://blog.davglass.com/files/yui/layout21/ Hope that helps ;) Dav
      Message 2 of 3 , May 1, 2009
      • 0 Attachment
        David --

        Here is a modified version of your file:
        http://blog.davglass.com/files/yui/layout21/

        Hope that helps ;)
        Dav

        On Fri, 01 May 2009, David Onder wrote:

        > I have the following HTML. It creates a layout with a top, center,
        > and bottom. There is a nested layout in the top (and bottom when
        > done). I would like to change the background of the top (and bottom)
        > to purple (#592C88) with a text color of gold (#C1A875). The center
        > will be the opposite. I would also like to be able to resize the
        > left, right, and center portions of the header portion based on what
        > is in each part (this will be filled in by an automated program -
        > CenterHeader, RightHeader, etc.). The HTML below sets the color of
        > the text in the top and bottom correctly, but that is all. Any help
        > would be appreciated.
        >
        > David Onder
        >
        > <html>
        > <head>
        > <link rel="stylesheet" type="text/css"href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css">
        > <!-- Skin CSS files resize.css must load before layout.css -->
        > <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/assets/skins/sam/resize.css">
        > <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/assets/skins/sam/layout.css">
        > <!-- Utility Dependencies -->
        > <script src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
        > <script src="http://yui.yahooapis.com/2.7.0/build/dragdrop/dragdrop-min.js"></script>
        > <script src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
        > <!-- Optional Animation Support-->
        > <script src="http://yui.yahooapis.com/2.7.0/build/animation/animation-min.js"></script>
        > <!-- Optional Resize Support -->
        > <script src="http://yui.yahooapis.com/2.7.0/build/resize/resize-min.js"></script>
        > <!-- Source file for the Layout Manager -->
        > <script src="http://yui.yahooapis.com/2.7.0/build/layout/layout-min.js"></script>
        >
        > <style>
        > /* Give the header a blue background */
        > .yui-skin-sam .yui-layout {
        > border: none;
        > background:#592C88;
        > font-size:93%;
        > color:#C1A875;
        > }
        > .yui-skin-sam .yui-layout .yui-layout {
        > border: none;
        > background:#592C88;
        > font-size:93%;
        > color:#C1A875;
        > }
        > .yui-skin-sam .yui-layout .yui-layout-unit-top {
        > background:#592C88;
        > font-size:108%;
        > font-weight: bold;
        > color: #C1A875;
        > }
        > .yui-skin-sam .yui-layout .yui-layout-unit-top div.yui-layout-bd {
        > border: 1px solid #808080;
        > border-bottom-width: 3px;
        > border-bottom-style: solid;
        > border-bottom-color: red; /*#C1A875;*/
        > }
        > /* Set the background color */
        > .yui-skin-sam .yui-layout .yui-layout-unit-center {
        > background-color: #C1A875;
        > }
        > /* Style the text in the header */
        > .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-hd h2 {
        > font-weight: bold;
        > color: #C1A875;
        > padding: 3px;
        > }
        > /* Style the body */
        > .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd {
        > border: 1px solid #808080;
        > border-bottom: none;
        > border-top: none;
        > *border-bottom-width: 0;
        > *border-top-width: 0;
        > /*background-color: #f2f2f2;*/
        > text-align: left;
        > }
        > /* Add a border to the bottom of the body because there is no footer
        > .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd-noft {
        > border-bottom: 1px solid #808080;
        > }*/
        > /* Add a border to the top of the body because there is no header
        > .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd-nohd {
        > border-top: 1px solid #808080;
        > }*/
        >
        > /* Style the footer */
        > .yui-skin-sam .yui-layout div.yui-layout-ft {
        > border: 1px solid #808080;
        > border-top: none;
        > *border-top-width: 0;
        > background-color: #f2f2f2;
        > }
        >
        > #head {
        > background:#592C88;
        > /* font-size:4em;*/
        > border-collapse: collapse;
        > color:#C1A875;
        > border-bottom:1px solid #C1A875;
        > }
        >
        > </style>
        > <title></title>
        >
        > <body class="yui-skin-sam">
        > <div id="header">
        > <!-- --
        > <table class="head" id="AutoNumber1">
        > <tr>
        > <td width="33%"><img src="http://www.wcu.edu/WebGraphics/Display/logo.jpg" alt="Western Carolina University" /></td>
        > <td width="33%" align="center"><mrBannerText Name="CenterHeader">Center Header</mrBannerText></td>
        > <td width="34%" align="right"><mrBannerText Name="RightHeader">Right Header</mrBannerText></td>
        > </tr>
        > </table>
        > <!-- -->
        > <div id="header_left" align="center"><img src="http://www.wcu.edu/WebGraphics/Display/logo.jpg" alt="Western Carolina University" /></div>
        > <div id="header_center"><mrBannerText Name="CenterHeader">Center Header</mrBannerText></div>
        > <div id="header_right"><mrBannerText Name="RightHeader">Right Header</mrBannerText></div>
        > <!-- -->
        > </div>
        >
        > <div id="center1">
        > <table cellspacing="0px" cellpadding="0px" align="center" width="100%" height="20px">
        > <tr valign="top">
        > <td valign="top">
        > <table class="compound" align="center" id="table2" cellSpacing="0px" cellPadding="0px" border="0px">
        > <tr>
        > <td class="header" width="100%" colspan="3">
        > <mrData Index="1">Question Prompt</mrData>
        > </td>
        > </tr>
        > <tr>
        > <td class="leftDesc">
        > <mrData Index="2">Part 1 Description here</mrData>
        > </td>
        > <td class="rightDesc">
        > <mrData Index="4">Part 2 Description here</mrData>
        > </td>
        > </tr>
        > <tr>
        > <td class="leftQuestion">
        > <mrData Index="3">Part 1 here</mrData>
        > </td>
        > <td class="rightQuestion">
        > <mrData Index="5">Part 2 here</mrData>
        > </td>
        > </tr>
        > </table>
        > </td>
        > </tr>
        > </table>
        > </div>
        >
        > <div id="bottom1">
        > <!-- --
        > <div id="footer_left">Institutional Effectiveness and Planning</div>
        > <div id="footer_center" align="right"><input type="submit" name="_NNext" class="mrNext" style="width: 70px;" value="Next" alt="Next"></input></div>
        > <!-- -->
        > <table cellspacing="0px" cellpadding="0px" align="center" width="100%" height="20px">
        > <tr>
        > <td align="center">
        > <mrNavButton Name="Prev">Previous</mrNavButton>
        > <mrNavButton Name="Next">Next</mrNavButton>
        > <mrNavButton Name="Goto">GoTo</mrNavButton>
        > </td>
        > </tr>
        > <td colspan="3" align="center" font-style="italic">
        > Institutional Effectiveness and Planning
        > </td>
        > </table>
        > <!-- -->
        > </div>
        >
        > <script>
        >
        > var layout = new YAHOO.widget.Layout({
        > units: [
        > { position: 'top', height: 80, body: 'header' }, //Height required here
        > //{ position: 'right', width: 300 }, //Width required here
        > { position: 'bottom', height: 50, body: 'bottom1' }, //Height required here
        > //{ position: 'left', width: 200 }, //Width required here
        > { position: 'center', body: 'center1', scroll: true }
        > ]
        > });
        > layout.on('render', function() {
        > var hd = layout.getUnitByPosition('top').get('wrap');
        > var header = new YAHOO.widget.Layout(hd, {
        > parent: layout,
        > units: [
        > { position: 'left', width:220, body: 'header_left' },
        > { position: 'center', body: 'header_center' },
        > /*{ position: 'right', body: 'header_right' }*/
        > ]
        > });
        > var ft = layout.getUnitByPosition('bottom').get('wrap');
        > var footer = new YAHOO.widget.Layout(ft, {
        > parent: layout,
        > units: [
        > { position: 'left', width:220, body: 'footer_left' },
        > { position: 'center', body: 'footer_center' },
        > /*{ position: 'right', body: 'footer_right' }*/
        > ]
        > });
        > //footer.render();
        > header.render();
        > });
        > layout.render();
        > </script>
        > </body>
        >
      • David Onder
        WOW. Thanks. Boy do I have a lot to learn. There is so much in here that I have never seen before (well, that is not hard since I have been only working
        Message 3 of 3 , May 4, 2009
        • 0 Attachment
          WOW. Thanks. Boy do I have a lot to learn. There is so much in here
          that I have never seen before (well, that is not hard since I have been
          only working with this for about a week now). I will dig through this
          and try to make heads and tails of everything.

          I sure do appreciate your help.

          David
          --- In ydn-javascript@yahoogroups.com, Dav Glass <davglass@...> wrote:
          >
          >
          > David --
          >
          > Here is a modified version of your file:
          > http://blog.davglass.com/files/yui/layout21/
          >
          > Hope that helps ;)
          > Dav
          >
        Your message has been successfully submitted and would be delivered to recipients shortly.