3D Tabs with CSS2 - The Style

(Page 4 of 5 )

#everything {
  padding: 0px;
  margin: 4px;
  height: 100%;
  min-height: 800px;
  width: 900px;
}

So I set this to the width of the image I created. Then each child node is set to 100% of this width, though you could also use the 'inherit' attribute.

#navTabs {
  padding: 0px 0px 0px 15px;
  margin: 0px;
  width: 100%;
  background: url("/cms/images/tabs/top.png") no-repeat top;
  height: 45px;
  vertical-align: top;
}

You'll notice this time it has a background, instead of just a line. The tab images will layer over this, the off images appearing behind, and the on images appear to meld right into it.

.tabon, .taboff {
  height: 45px;
  cursor: pointer;
  cursor: hand;
  display: inline;
  overflow: hidden;
  vertical-align: top;
}

.tabOn {
  background-image: url("/cms/images/tabs/on_m.png");
  font-weight: bold;
}

.taboff {
  background-image: url("/cms/images/tabs/off_m.png");
  color: #666666;
}

Here I've set the background image to be the middle slice. This will repeat to the width of the div.

.tabItem {
  vertical-align:top;
  height: 45px;
  display:inline;
  font-size: 11px;
  margin: 10px 0px 0px 0px;
}

#actionPanel {
  width: 100%;
  height: 70%;
  padding: 10px;
  background: url("mid.png");
}

#btm {
  height: 16px;
  background: url("bottom.png");
  }

And of course, I set the background of each of the other two sections.

Next: Conclusion and All the Code >>
 

More Style Sheets Articles
More By Justin Cook

Comments On: 3D Tabs with CSS2

· I don't mean to be too critical, but what on Earth do you mean that it has been...    · Is there a working example of this?On page 1 of the article (at...    · completely agree! If you are going to write such articles (especially on css), then...    · not testing in non-ie browsers? shame on you. you shouldnt call it an article if you...    · Hi all,Thanks to a very knowledgable person from another forum (i won't name...    · As for doing this without javascript, you can remove the onClick for the div and put...    · This asp code doesn't work if your on a page that is not included in the array. This...    · i should of read the whole article...sorry    · First of all, stop calling the author "lazy". The guy has written 12 articles for...    · The real funny thing is this.... These people are all calling the author lazy, but...   >>> Post your comment now!