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

Styling Grid Units Using CSS

Expand Messages
  • richardsaunders83
    Good Morning I have finally decided to delve into using YUI specifically reset, fonts and grids. My questions lies where I wan to apply a different style to
    Message 1 of 2 , Jul 31, 2008
    • 0 Attachment
      Good Morning

      I have finally decided to delve into using YUI specifically reset, fonts
      and grids.

      My questions lies where I wan to apply a different style to individual
      grid units for example.

      If I apply a background colour to the class "yui-u" that same colour
      will apply to all elements with a class of "yui-u".

      <div id="bd">
      <div class="yui-gd">
      <!-- menu -->
      <div class="yui-u first">
      <ul>
      <li><a href="/">#</a></li>
      <li><a href="#">#</a></li>
      </ul>
      </div>
      <!-- page graphic/title -->
      <div class="yui-u">
      <h2>Welcome</h2>
      </div>
      </div>
      <div class="yui-gd">
      <!-- sidebar -->
      <div class="yui-u first">
      <blockquote>Testimonial</blockquote>
      </div>
      <!-- content area -->
      <div class="yui-u">
      <p>Content text here </p>
      </div>
      </div>
      </div>



      For example if I wanted the menu grid unit to be red and the sidebar
      unit green how would this be possible?

      If I've not explained myself properly my apologies and will be happy to
      answer any further questions.


      Regards

      Richard
    • wally.ritchie
      ... Due to nesting and other issues you may find it easier to just specify an ID or class on your content divisions and apply the styles you want through those
      Message 2 of 2 , Jul 31, 2008
      • 0 Attachment
        --- In ydn-javascript@yahoogroups.com, "richardsaunders83" <mail@...>
        wrote:
        >
        > Good Morning
        >
        > I have finally decided to delve into using YUI specifically reset, fonts
        > and grids.
        >
        > My questions lies where I wan to apply a different style to individual
        > grid units for example.
        >
        > If I apply a background colour to the class "yui-u" that same colour
        > will apply to all elements with a class of "yui-u".
        >
        > <div id="bd">
        > <div class="yui-gd">
        > <!-- menu -->
        > <div class="yui-u first">
        > <ul>
        > <li><a href="/">#</a></li>
        > <li><a href="#">#</a></li>
        > </ul>
        > </div>
        > <!-- page graphic/title -->
        > <div class="yui-u">
        > <h2>Welcome</h2>
        > </div>
        > </div>
        > <div class="yui-gd">
        > <!-- sidebar -->
        > <div class="yui-u first">
        > <blockquote>Testimonial</blockquote>
        > </div>
        > <!-- content area -->
        > <div class="yui-u">
        > <p>Content text here </p>
        > </div>
        > </div>
        > </div>
        >
        >
        >
        > For example if I wanted the menu grid unit to be red and the sidebar
        > unit green how would this be possible?
        >
        > If I've not explained myself properly my apologies and will be happy to
        > answer any further questions.
        >
        >
        > Regards
        >
        > Richard
        >
        Due to nesting and other issues you may find it easier to just specify
        an ID or class on your content divisions and apply the styles you want
        through those ID's or classes.

        You might also want to take a look at "base" as a sane starting point
        that puts back some more or less expected presentation styles that
        "reset" takes away (for cross browser reasons).

        If you are going to eventually use more of yui you might want to apply
        a yui-skin-sam class to the body tag and bring in skin.css.

        Hope this helps
      Your message has been successfully submitted and would be delivered to recipients shortly.