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

Re: [ydn-javascript] Changing a nested layout css

Expand Messages
  • Dav Glass
    David -- Here is a modified version of your file: http://blog.davglass.com/files/yui/layout21/ Hope that helps ;) Dav
    Message 1 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 2 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.