Spry Tabbed Panel obj Qs style

Question

Spry Tabbed Panel obj
TAB NAMES how rather left-aligned(default) get centered?
may have an image in a tab name?
How tabs from left aligned extent to get all space(width) , all get bigger in width and aligned(the tabs) so tabbed area starts with: start of first tab and end with end of last tab?

Answer 1

Change this rule:
.TabbedPanelsTab {
    position: relative;
    top: 1px;
    float: left;
    padding: 4px 10px;
    margin: 0px 1px 0px 0px;
    font: bold 0.7em sans-serif;
    background-color: #DDD;
    list-style: none;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #999;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
   width: 100px;
    text-align: center;
You will notice that I also added a width. Spry Tabbed Panel Tabs normally depend on the width of the text for their own dimension, so you need to add a width for the text to center in.
2. Of course you can have an image. You are essentially working with a list structure; anything you can have in a list you can have on a tab.
3. Give each tab li an id and "work out" percentage widths. Then, add selectors that assign those widths to each id'd list item. Caveats: you might want to do away with left and right padding in tabs if you are using percentages, because they will throw you off your count.
If you are using a static width, you could use pixel widths, but I think percentages are a little cleaner. Here's what your code might look like:
<li id="aboutustab" class="TabbedPanelsTab" tabindex="0">About Us</li>
<li id="qualitycontroltab" class="Tabbed PanelsTab" tabindex="0">Quality Control Department</li>
And corresponding CSS might look like this (if these were the only tabs!):
.TabbedPanelsTab {
    position: relative;
    top: 1px;
    float: left;
    padding: 4px 10px;
    margin: 0px 1px 0px 0px;
    font: bold 0.7em sans-serif;
    background-color: #DDD;
    list-style: none;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #999;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    width: 100px;
    text-align: center;
#aboutustab.TabbedPanelsTab {
     width: 30%;
#qualitycontroltab.TabbedPanelsTab {
     width: 69%;
/*Note: be sure to put these BELOW the original .TabbedPanelsTab selector. ALSO NOTE that these are id and class on the SAME list item, so do not put a space between #aboutustab and .TabbedPanelsTab */
I guesstimated the widths of the text for the tabs by throwing a grid over my page and adjusting the grid to show only ten grid-squares over the entire width of the panels. If you put all your tabs and tab labels in, you can then "read" an approximate width.
Then I summed the 'lengths' of the tab labels (in this case, I got aboutustab=1, qualitycontroltab=2.3, total=3.3) and divided each width by the total (small divided by large) to get the percentage for each width.
Be sure you don't add to more than 100%, or it will break.
Okay, if you simply want your tabs to meet the ends of your TabbedPanels, and don't care particularly about the width of each tab, give the width in the principal style rule (.TabbedPanelsTab) a simple percentage of the width of the Panels. If you have 5 tabs, each will be 20% wide (adjust for borders, etc.).
Beth