Skip navigation
steve_London
Currently Being Moderated

Can't fix the width of a tabbed panel tab

Jul 27, 2012 10:04 AM

Hi all,

I have a Spry tabbed panel at:

http://www.stevedrake.net/artworker [a WordPress based site].

I've managed to centre the tabs but can't get them to stick with any width I apply in the CSS [currently 100px] and then have the tabs sit next to each other so there's no space between them. Any ideas where I'm going wrong?

Thanks

steve

PS The way it looks in Safari is better than the way it looks in Firefox [something I'm still fiddling with].

 
Replies
  • Currently Being Moderated
    Jul 27, 2012 5:39 PM   in reply to steve_London

    Is this what you are looking for?

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet">
    <style>
    .TabbedPanelsTabGroup {
        width: 246px;
        margin: auto;
    }
    .TabbedPanelsTab {
        width: 100px;
    }
    </style>
    </head>
    
    <body>
    <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
        <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">Content 1</div>
        <div class="TabbedPanelsContent">Content 2</div>
      </div>
    </div>
    <script src="SpryAssets/SpryTabbedPanels.js"></script>
    <script>
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    </script>
    </body>
    </html>

     

    The TabbedPanelsGroup is the container for the tabs. Rherefore it must be wide enough to house the tabs (including widths, margins and padding)

     

    A width has to be given to the container so that it can be centered.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 28, 2012 6:01 PM   in reply to steve_London

    I don't understand, it worked perfectly for me. I guess untill I see what you have done, I will not be able to tell you where you have gone wrong.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 29, 2012 11:39 AM   in reply to steve_London

    KISS. Always remember that.

     

    You have already got the style rules for the tabs, but you want to give the first and the last tabs a slightly different style. What needs to be done is to only have the rules that change them from the normal tab as per

    .TabbedPanelsTab.First {

        border-top-left-radius: 4px;

        -moz-border-radius-topleft: 4px;

        -webkit-border-top-left-radius: 4px;

    }

    .TabbedPanelsTab.Last {

        border-top-right-radius: 4px;

        -moz-border-radius-topright: 4px;

        -webkit-border-top-right-radius: 4px;

    }

    Now change the markup to reflect the selector as in

    <li class="TabbedPanelsTab First">artworker</li>

    <li class="TabbedPanelsTab">print</li>

    <li class="TabbedPanelsTab">screen</li>

    <li class="TabbedPanelsTab Last">samples</li>

    Ok, I do sound confident that it will work, but in reality I'm not sure, so please give me your feedback.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 30, 2012 12:48 AM   in reply to steve_London

    The only thing I can suggest is to get back to the basics.

     

    When I try my solution it does work, but I have stripped out a lot of the irrelevant stuff. Once you have it working, start adding the rest of the CSS and JS to see where it breaks down.

     

    If you still have problems, I'll have a deeper look.

     

    Gramps

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points