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

css tabview question

Expand Messages
  • Gawron1
    I have just started using the YUI. I have a good use for the tabview control. I looked at the example at
    Message 1 of 4 , Aug 31, 2007
    • 0 Attachment
      I have just started using the YUI. I have a good use for the tabview
      control. I looked at the example at

      http://developer.yahoo.com/yui/examples/tabview/frommarkup.html

      I included the following code in my project...

      <!-- for default tab skin, which includes tabview-core.css and
      skins/sam/tabview-skin.css -->
      <link rel="stylesheet" type="text/css" href="yui/tabview.css" />

      <!-- utilities includes all dependencies for this example -->
      <script type="text/javascript" src="yui/utilities.js"></script>
      <script type="text/javascript" src="yui/tabview.js"></script>

      <div id="demo" class="yui-navset">
      <ul class="yui-nav">
      <li><a href="#tab1"><em>Tab One Label</em></a></li>
      <li class="selected"><a href="#tab2"><em>Tab Two
      Label</em></a></li>
      <li><a href="#tab3"><em>Tab Three Label</em></a></li>
      </ul>
      <div class="yui-content">
      <div id="tab1"><p>Tab One Content</p></div>
      <div id="tab2"><p>Tab Two Content</p></div>
      <div id="tab3"><p>Tab Three Content</p></div>
      </div>
      </div>

      and then created the object with

      <script type="text/javascript">
      var tabView = new YAHOO.widget.TabView('demo');
      </script>

      Basically what the problem is that the tabview doesnt look like the
      example. Its just a bunch of hyperlinks. When I click on the
      hyperlinks, I get the next tab. I looked at the css for most of the
      day yesterday and its WAY over my CSS head.

      Am I missing something? I really just want it to look like the one in
      the example.

      Thanks for the help...
    • dav.glass@yahoo.com
      Gawron1 -- Don t forget to add class= yui-skin-sam to an element above the tabview markup (usually the body) Hope that helps :) Dav Dav Glass
      Message 2 of 4 , Aug 31, 2007
      • 0 Attachment
        Gawron1 --

        Don't forget to add class="yui-skin-sam" to an element above the tabview markup (usually the body)

        Hope that helps :)

        Dav
         
        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: Gawron1 <Gawron2@...>
        To: ydn-javascript@yahoogroups.com
        Sent: Friday, August 31, 2007 6:14:51 AM
        Subject: [ydn-javascript] css tabview question

        I have just started using the YUI. I have a good use for the tabview
        control. I looked at the example at

        http://developer. yahoo.com/ yui/examples/ tabview/frommark up.html

        I included the following code in my project...

        <!-- for default tab skin, which includes tabview-core. css and
        skins/sam/tabview- skin.css -->
        <link rel="stylesheet" type="text/css" href="yui/tabview. css" />

        <!-- utilities includes all dependencies for this example -->
        <script type="text/javascri pt" src="yui/utilities. js"></script>
        <script type="text/javascri pt" src="yui/tabview. js"></script>

        <div id="demo" class="yui-navset" >
        <ul class="yui-nav" >
        <li><a href="#tab1" ><em>Tab One Label</em></ a></li>
        <li class="selected" ><a href="#tab2" ><em>Tab Two
        Label</em></ a></li>
        <li><a href="#tab3" ><em>Tab Three Label</em></ a></li>
        </ul>
        <div class="yui-content" >
        <div id="tab1"><p> Tab One Content</p>< /div>
        <div id="tab2"><p> Tab Two Content</p>< /div>
        <div id="tab3"><p> Tab Three Content</p>< /div>
        </div>
        </div>

        and then created the object with

        <script type="text/javascri pt">
        var tabView = new YAHOO.widget. TabView(' demo');
        </script>

        Basically what the problem is that the tabview doesnt look like the
        example. Its just a bunch of hyperlinks. When I click on the
        hyperlinks, I get the next tab. I looked at the css for most of the
        day yesterday and its WAY over my CSS head.

        Am I missing something? I really just want it to look like the one in
        the example.

        Thanks for the help...


      • Gopal Venkatesan
        ... ... Did you set the class for the body element to yui-skin-sam ? -- Gopal Venkatesan http://gopalarathnam.com/weblog/
        Message 3 of 4 , Aug 31, 2007
        • 0 Attachment
          On Fri, Aug 31, 2007 at 01:14:51PM -0000, Gawron1 wrote:
          > I have just started using the YUI. I have a good use for the tabview
          > control. I looked at the example at
          >
          > http://developer.yahoo.com/yui/examples/tabview/frommarkup.html
          >

          <snip>

          >
          > Basically what the problem is that the tabview doesnt look like the
          > example. Its just a bunch of hyperlinks. When I click on the
          > hyperlinks, I get the next tab. I looked at the css for most of the
          > day yesterday and its WAY over my CSS head.
          >
          > Am I missing something? I really just want it to look like the one in
          > the example.
          >

          Did you set the class for the "body" element to "yui-skin-sam"?

          --
          Gopal Venkatesan

          http://gopalarathnam.com/weblog/
        • Jeff Brooks
          That was the problem... Thanks a lot for the help.. Jeff
          Message 4 of 4 , Aug 31, 2007
          • 0 Attachment
            That was the problem... Thanks a lot for the help..


            Jeff


            On 8/31/07, dav.glass@... < dav.glass@...> wrote:

            Gawron1 --

            Don't forget to add class="yui-skin-sam" to an element above the tabview markup (usually the body)

            Hope that helps :)

            Dav
             
            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 +



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