Drillpine.Biz Support Forum

Posted: **Wed Aug 15, 2007 7:33 pm**

Noman

First let me say that I am very impressed with the tabber – easy to install set-up and use.

Have made a few teaks for my needs but wonder if the following are possible (for me to easily do rather than a custom job).

Is there a way to get the tabs to be a set % of the width?
I am using 3 tabs so would like each to take up 33% of the width so that they fill the width.

Or is it possible to alter the top part (where the tabs are) so that this is the same width as all the tabs (with a blank white area to the side)?

I hope this makes sense.

Also would there be a way to change the font of the active and non active tabs so I try a sold blue tab for non active with white text and a white tabs with blue text for active?

I am working on the tabber product here – http://www.viteyes.co.uk/acatalog/test/ ... anced.html

James

Posted: **Thu Aug 16, 2007 6:13 pm**

I'm in remote rural Turkey just now with only a smartphone for internet access. I'll be somewhere more suitable to reply fully after the weekend.

Posted: **Sun Aug 19, 2007 8:35 am**

I'm not a CSS expert so this is the best I can manage.

Replace tabbeddescriptions.css with the following

Code: Select all

.tabs {position:relative; height:20px; margin:0; padding:0; background:url("bar_off.gif") repeat-x; overflow:hidden}
.tabs li {display:inline; float:left; width:33%;}
.tabs a:hover {background:#fff url("bar_hover.gif") repeat-x;} 
.tabs a.tab-active {background:#fff url("bar_on.gif") repeat-x;} 
.tabs a {float:left; width:100%; text-align:center; height:20px; font:12px verdana, helvetica, sans-serif;font-weight:bold;
    position:relative; color:#2B4353;text-decoration:none;border-left:1px solid #fff;}
.tab-container {background: #fff; border:1px solid #6D99B6;}
.tab-panes {margin: 3px;}

Adjust the 33% to suit the number of tabs in use. Or replace it with a fixed pixel size like 125px.

As for the text colour and background, you'd have to alter the a definition in the css and replace the background graphics (bar_off.gif, bar_on.gif and bar_hover.gif).

If you want to read up on the underlying code, see http://jon.hedley.net/html-tabbed-dialog-widget

Posted: **Thu May 01, 2008 2:54 pm**

Does this still apply to latest version? The css names don't seem to match up?

Posted: **Thu May 01, 2008 3:37 pm**

Sort off. The classnames aren't used but ID tags are used instead. These ID tags refer to the same elements as the classnames did.

Three different styles are provided and I feel that that's enough for most users.

I'm not a CSS or visual design expert so can't really help a lot on this.

Posted: **Tue May 06, 2008 12:33 pm**

For anyone else who might be trying to do this, I made the following changes to my V06 files to get centered tabs:-

Code: Select all

#tab-header li {
      background:url("tabber-plain_off.gif") no-repeat left top;
      float:left;
      margin:0;
      padding-top:0px;
      padding-bottom: 0px;
      padding-right: 0px;
      padding-left: 0px;
      display:inline; 
      width:33%;
      }

#tab-header a {
      display:block;
      background:url("tabber-plain_off.gif") no-repeat right top;
      padding: 5px 15px 4px 15px;
      text-align: center;
      text-decoration:none;
      font-weight:bold;
      color:#765;
      }

Drillpine.Biz Support Forum

Tabber

Tabber

Re: Tabber

Re: Tabber

Re: Tabber