Skip navigation
steve_London
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].

1430 Views   8 Replies   Latest reply: steve_London, Jul 30, 2012 9:37 AM
 
Replies
  • Ben Pleysier
    Currently Being Moderated
    1. Ben Pleysier,
    Jul 27, 2012 5:39 PM   in reply to steve_London
    Report

    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:
  • steve_London
    Currently Being Moderated
    2. steve_London,
    Jul 28, 2012 9:43 AM   in reply to Ben Pleysier
    Report

    Hi Gramps,

    Thanks for the reply.

    I've tried your suggetsion [locally] and the individual tabs are still ignoring the applied CCS width.

    steve

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    3. Ben Pleysier,
    Jul 28, 2012 6:01 PM   in reply to steve_London
    Report

    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:
  • steve_London
    Currently Being Moderated
    4. steve_London,
    Jul 29, 2012 7:30 AM   in reply to Ben Pleysier
    Report

    Hi Gramps,

    I've altered the CSS on my web server [link in initial post] to include the suggested changes so you should see that I've added auto to the side margins of the TabbedPanelsTabGroup and given it a width of 450px. The tabs have a width of 100px.

    Where did I go wrong?

    Thanks.

    steve

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    5. Ben Pleysier,
    Jul 29, 2012 11:39 AM   in reply to steve_London
    Report

    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:
  • steve_London
    Currently Being Moderated
    6. steve_London,
    Jul 29, 2012 1:42 PM   in reply to Ben Pleysier
    Report

    Thanks Gramps,

    Done as you suggest but still not able to implement the tab width but the KISS is good!

    steve

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    7. Ben Pleysier,
    Jul 30, 2012 12:48 AM   in reply to steve_London
    Report

    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:
  • steve_London
    Currently Being Moderated
    8. steve_London,
    Jul 30, 2012 9:37 AM   in reply to Ben Pleysier
    Report

    Thanks Gramps,

    I have the tabbed panels set up as a single page in Dreamweaver CS6 and I copy and paste the code into a php page that is the template for the live page in WordPress. The links to the css and js files are, obviously, inserted into the WP header.php file.

    I did think that maybe the main site/WordPress css file was causing the issue so I commented out the link in the head section of the single tabbed panels page but it made no difference - the issue is seemingly within the css for the tabbed panels.

    I'm off to Italy in a couple of day so, if not before, when I return I'll maybe make a new tabbed panel and get the tabs at a fixed width then start adding the other css as you suggest.

    Thanks again.

    steve

     
    |
    Mark as:
Actions

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