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

Background image on the tab content div

Expand Messages
  • gregbown
    The only way I have been able to place an image in the content area of the tab selected is to code it inline.
    Message 1 of 8 , Mar 25, 2007
    • 0 Attachment
      The only way I have been able to place an image in the content area of
      the tab selected is to code it inline.

      <div class="yui-content">
      <div id="introducing">
      <p><img src="BWSL500.jpg"></p>
      </div>

      Maby I'm missing somthing, but I have tried variouse div selectors in
      the CSS with no luck. If I use #introducing { background-image: url....
      nothing shows up
    • alexshusta
      Starting with the example from http://developer.yahoo.com/yui/examples/tabview/basic_from_markup.html I ve added some tab content area background classes that
      Message 2 of 8 , Mar 25, 2007
      • 0 Attachment
        Starting with the example from
        http://developer.yahoo.com/yui/examples/tabview/basic_from_markup.html
        I've added some tab content area background classes that seem to be
        working. If you take the code from that example and insert the
        following CSS rules into the head of the document and update the
        script and css file tags to point to Yahoo's hosted files, the
        background images of the three tabs should be changed (to annoying
        repeating arrows, but these were just some easy to find images that I
        know are available to anyone who needs to do testing).
        <style type="text/css">
        #demo #lorem {

        background-image:url(http://yui.yahooapis.com/2.2.0/build/button/assets/menuarrow.gif);
        }
        #demo #ipsum {

        background-image:url(http://yui.yahooapis.com/2.2.0/build/button/assets/splitarrow_active.gif);
        }
        #demo #dolor {

        background-image:url(http://yui.yahooapis.com/2.2.0/build/button/assets/splitarrow.gif);
        }
        </style>

        It's good that you were already creating divs inside the yui-content
        div instead of modifying it's CSS properties directly. Making changes
        to YUI elements directly tends to have unintended consequences and
        break stuff (as I've learned through experience).

        Hope that helps get things sorted out.
        ~Alexander

        --- In ydn-javascript@yahoogroups.com, "gregbown" <greg_bown@...> wrote:
        >
        >
        > The only way I have been able to place an image in the content area of
        > the tab selected is to code it inline.
        >
        > <div class="yui-content">
        > <div id="introducing">
        > <p><img src="BWSL500.jpg"></p>
        > </div>
        >
        > Maby I'm missing somthing, but I have tried variouse div selectors in
        > the CSS with no luck. If I use #introducing { background-image: url....
        > nothing shows up
        >
      • gregbown
        Thank you for your response. I m not sure what classes you are talking about, CSS classes? The document mentioned did not have any different code from mine as
        Message 3 of 8 , Mar 25, 2007
        • 0 Attachment
          Thank you for your response.
          I'm not sure what classes you are talking about, CSS classes? The
          document mentioned did not have any different code from mine as I
          started with the example file. If I use the selector #demo #lorem
          {background... nothing renders?
          --- In ydn-javascript@yahoogroups.com, "alexshusta"
          <alexander.shusta@...> wrote:
          >
          > Starting with the example from
          >
          http://developer.yahoo.com/yui/examples/tabview/basic_from_markup.htm
          l
          > I've added some tab content area background classes that seem to
          be
          > working. If you take the code from that example and insert the
          > following CSS rules into the head of the document and update the
          > script and css file tags to point to Yahoo's hosted files, the
          > background images of the three tabs should be changed (to annoying
          > repeating arrows, but these were just some easy to find images
          that I
          > know are available to anyone who needs to do testing).
          > <style type="text/css">
          > #demo #lorem {
          >
          > background-image:url
          (http://yui.yahooapis.com/2.2.0/build/button/assets/menuarrow.gif);
          > }
          > #demo #ipsum {
          >
          > background-image:url
          (http://yui.yahooapis.com/2.2.0/build/button/assets/splitarrow_active
          .gif);
          > }
          > #demo #dolor {
          >
          > background-image:url
          (http://yui.yahooapis.com/2.2.0/build/button/assets/splitarrow.gif);
          > }
          > </style>
          >
          > It's good that you were already creating divs inside the yui-
          content
          > div instead of modifying it's CSS properties directly. Making
          changes
          > to YUI elements directly tends to have unintended consequences and
          > break stuff (as I've learned through experience).
          >
          > Hope that helps get things sorted out.
          > ~Alexander
          >
          > --- In ydn-javascript@yahoogroups.com, "gregbown" <greg_bown@>
          wrote:
          > >
          > >
          > > The only way I have been able to place an image in the content
          area of
          > > the tab selected is to code it inline.
          > >
          > > <div class="yui-content">
          > > <div id="introducing">
          > > <p><img src="BWSL500.jpg"></p>
          > > </div>
          > >
          > > Maby I'm missing somthing, but I have tried variouse div
          selectors in
          > > the CSS with no luck. If I use #introducing { background-image:
          url....
          > > nothing shows up
          > >
          >
        • Matt Sweeney
          ... Hi Greg, You can style your tab content as you would any other markup. You may want to test your code outside of the tabs to verify that it is actually
          Message 4 of 8 , Mar 26, 2007
          • 0 Attachment
            gregbown wrote:
            > The only way I have been able to place an image in the content area of
            > the tab selected is to code it inline.
            >
            > <div class="yui-content">
            > <div id="introducing">
            > <p><img src="BWSL500.jpg"></p>
            > </div>
            >
            > Maby I'm missing somthing, but I have tried variouse div selectors in
            > the CSS with no luck. If I use #introducing { background-image: url....
            > nothing shows up
            >
            >

            Hi Greg,

            You can style your tab content as you would any other markup. You may
            want to test your code outside of the tabs to verify that it is actually
            working.

            If you think the TabView styles are causing some issues with your CSS
            being applied, please post some sample code and I will take a look.

            Matt
          • alexshusta
            Hmmmm, no changes are showing up at all? If you use the CSS selector #lorem to set the font size or background color that doesn t happen either? If that s the
            Message 5 of 8 , Mar 27, 2007
            • 0 Attachment
              Hmmmm, no changes are showing up at all? If you use the CSS selector
              #lorem to set the font size or background color that doesn't happen
              either? If that's the case then it sounds like your CSS file may not
              be loading properly.

              But if those other changes do occur, then perhaps the background-image
              property is being overwritten by some other, more specific, CSS rule.
              In Firebug you can view all the CSS rules that are being applied to an
              object through the Inspect tool. Click "Inspect" on the top left of
              Firebug, then click the element on the page you'd like to inspect,
              that loads the HTML for the element into the Firebug display. Now
              click the "Options" menu on the top right of Firebug and uncheck the
              "Show Computed Style" option. That makes Firebug show each rule that's
              applied to the currently selected element, rules that have been
              overridden are struck-through. See if the background-image rule is
              being applied at any point, and if it is being overridden by something
              else.

              Good luck,
              ~Alexander

              --- In ydn-javascript@yahoogroups.com, "gregbown" <greg_bown@...> wrote:
              >
              > Thank you for your response.
              > I'm not sure what classes you are talking about, CSS classes? The
              > document mentioned did not have any different code from mine as I
              > started with the example file. If I use the selector #demo #lorem
              > {background... nothing renders?
            • dav.glass@yahoo.com
              Can you put an example up so that we can see? I have a couple examples on my site that do something like it: http://blog.davglass.com/files/yui/tab2/
              Message 6 of 8 , Mar 27, 2007
              • 0 Attachment
                Can you put an example up so that we can see?

                I have a couple examples on my site that do something like it:
                http://blog.davglass.com/files/yui/tab2/
                http://blog.davglass.com/files/yui/tab3/
                http://blog.davglass.com/files/yui/tab4/


                 
                Dav Glass
                dav.glass@...
                blog.davglass.com


                + Windows: n. - The most successful computer virus, ever. +
                + A computer without a Microsoft operating system is like a dog
                without bricks tied to its head +
                + A Microsoft Certified Systems Engineer is to computing what a
                McDonalds Certified Food Specialist is to fine cuisine +


                ----- Original Message ----
                From: alexshusta <alexander.shusta@...>
                To: ydn-javascript@yahoogroups.com
                Sent: Tuesday, March 27, 2007 9:07:27 AM
                Subject: [ydn-javascript] Re: Background image on the tab content div

                Hmmmm, no changes are showing up at all? If you use the CSS selector
                #lorem to set the font size or background color that doesn't happen
                either? If that's the case then it sounds like your CSS file may not
                be loading properly.

                But if those other changes do occur, then perhaps the background-image
                property is being overwritten by some other, more specific, CSS rule.
                In Firebug you can view all the CSS rules that are being applied to an
                object through the Inspect tool. Click "Inspect" on the top left of
                Firebug, then click the element on the page you'd like to inspect,
                that loads the HTML for the element into the Firebug display. Now
                click the "Options" menu on the top right of Firebug and uncheck the
                "Show Computed Style" option. That makes Firebug show each rule that's
                applied to the currently selected element, rules that have been
                overridden are struck-through. See if the background-image rule is
                being applied at any point, and if it is being overridden by something
                else.

                Good luck,
                ~Alexander

                --- In ydn-javascript@yahoogroups.com, "gregbown" <greg_bown@...> wrote:
                >
                > Thank you for your response.
                > I'm not sure what classes you are talking about, CSS classes?  The
                > document mentioned did not have any different code from mine as I
                > started with the example file. If I use the selector #demo #lorem
                > {background... nothing renders?





                Yahoo! Groups Links

                <*> To visit your group on the web, go to:
                    http://groups.yahoo.com/group/ydn-javascript/

                <*> Your email settings:
                    Individual Email | Traditional

                <*> To change settings online go to:
                    http://groups.yahoo.com/group/ydn-javascript/join
                    (Yahoo! ID required)

                <*> To change settings via email:
                    mailto:ydn-javascript-digest@yahoogroups.com
                    mailto:ydn-javascript-fullfeatured@yahoogroups.com

                <*> To unsubscribe from this group, send an email to:
                    ydn-javascript-unsubscribe@yahoogroups.com

                <*> Your use of Yahoo! Groups is subject to:
                    http://docs.yahoo.com/info/terms/


              • gregbown
                Thanks for pointing me to Firebug, what a great addition to my tools. It showed the div as element.style {display:none;} but with no source to the CSS
                Message 7 of 8 , Mar 29, 2007
                • 0 Attachment
                  Thanks for pointing me to Firebug, what a great addition to my
                  tools. It showed the div as element.style {display:none;} but with
                  no source to the CSS declaration. Hmmmm it must be in the js
                  In order for the div to show up it has to have a width and height
                  specified in the CSS, just attaching a background-image as in
                  HTML/CSS is not enough. The js wont render it unless it has a height
                  and width is this normal for all js or specific to Yahoo.js?
                  --- In ydn-javascript@yahoogroups.com, "alexshusta"
                  <alexander.shusta@...> wrote:
                  >
                  > Hmmmm, no changes are showing up at all? If you use the CSS
                  selector
                  > #lorem to set the font size or background color that doesn't happen
                  > either? If that's the case then it sounds like your CSS file may
                  not
                  > be loading properly.
                  >
                  > But if those other changes do occur, then perhaps the background-
                  image
                  > property is being overwritten by some other, more specific, CSS
                  rule.
                  > In Firebug you can view all the CSS rules that are being applied
                  to an
                  > object through the Inspect tool. Click "Inspect" on the top left of
                  > Firebug, then click the element on the page you'd like to inspect,
                  > that loads the HTML for the element into the Firebug display. Now
                  > click the "Options" menu on the top right of Firebug and uncheck
                  the
                  > "Show Computed Style" option. That makes Firebug show each rule
                  that's
                  > applied to the currently selected element, rules that have been
                  > overridden are struck-through. See if the background-image rule is
                  > being applied at any point, and if it is being overridden by
                  something
                  > else.
                  >
                  > Good luck,
                  > ~Alexander
                  >
                  > --- In ydn-javascript@yahoogroups.com, "gregbown" <greg_bown@>
                  wrote:
                  > >
                  > > Thank you for your response.
                  > > I'm not sure what classes you are talking about, CSS classes?
                  The
                  > > document mentioned did not have any different code from mine as
                  I
                  > > started with the example file. If I use the selector #demo #lorem
                  > > {background... nothing renders?
                  >
                • Eric Miraglia
                  gregbrown, If you re just getting started with Firebug, you may want to check out this video of Firebug author Joe Hewitt giving a tour of the many hidden
                  Message 8 of 8 , Mar 30, 2007
                  • 0 Attachment
                    gregbrown,

                    If you're just getting started with Firebug, you may want to check out this video of Firebug author Joe Hewitt giving a tour of the many "hidden" features:


                    The downloadable version (.mp4) is the one to watch -- slightly clearer when looking at the screen.

                    Regards,
                    Eric


                    ______________________________________________
                    Eric Miraglia
                    Yahoo! User Interface Library



                    On Mar 29, 2007, at 10:52 PM, gregbown wrote:

                    Thanks for pointing me to Firebug, what a great addition to my
                    tools. It showed the div as element.style {display:none;} but with
                    no source to the CSS declaration. Hmmmm it must be in the js
                    In order for the div to show up it has to have a width and height
                    specified in the CSS, just attaching a background-image as in
                    HTML/CSS is not enough. The js wont render it unless it has a height
                    and width is this normal for all js or specific to Yahoo.js?
                    --- In ydn-javascript@yahoogroups.com, "alexshusta"
                    <alexander.shusta@...> wrote:
                    >
                    > Hmmmm, no changes are showing up at all? If you use the CSS
                    selector
                    > #lorem to set the font size or background color that doesn't happen
                    > either? If that's the case then it sounds like your CSS file may
                    not
                    > be loading properly.
                    >
                    > But if those other changes do occur, then perhaps the background-
                    image
                    > property is being overwritten by some other, more specific, CSS
                    rule.
                    > In Firebug you can view all the CSS rules that are being applied
                    to an
                    > object through the Inspect tool. Click "Inspect" on the top left of
                    > Firebug, then click the element on the page you'd like to inspect,
                    > that loads the HTML for the element into the Firebug display. Now
                    > click the "Options" menu on the top right of Firebug and uncheck
                    the
                    > "Show Computed Style" option. That makes Firebug show each rule
                    that's
                    > applied to the currently selected element, rules that have been
                    > overridden are struck-through. See if the background-image rule is
                    > being applied at any point, and if it is being overridden by
                    something
                    > else.
                    >
                    > Good luck,
                    > ~Alexander
                    >
                    > --- In ydn-javascript@yahoogroups.com, "gregbown" <greg_bown@>
                    wrote:
                    > >
                    > > Thank you for your response.
                    > > I'm not sure what classes you are talking about, CSS classes?
                    The
                    > > document mentioned did not have any different code from mine as
                    I
                    > > started with the example file. If I use the selector #demo #lorem
                    > > {background... nothing renders?
                    >


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