AllExperts > DHTML 
Search      
DHTML
Volunteer
Answers to thousands of questions
 Home · More DHTML Questions · Answer Library  · Encyclopedia ·
More DHTML Answers
Question Library

Ask a question about DHTML
Volunteer
Experts of the Month
Expert Login

Awards

About Us
Tell friends
Link to Us
Disclaimer

 
 
 
 
About Andrew Hoffman
Expertise
I can field just about any question within this topic ranging from JavaScript to CSS, the two ingredients of DHTML. I`m very interested in the W3C and its validation rules for HTML, XHTML, and CSS, and enjoy answering questions of this type as well. I detest sleep and respond at all hours of the day or night.


Experience
Experience in the area
I've been working with DHTML and CSS for 7 years now and build/maintain websites of my own that implement DHTML navigation.

What I'm doing now
My contract with Microsoft has ended and I am working for myself once again. Please contact me for any front-end work at antibland@gmail.com

 
   

You are here:  Experts > Computing/Technology > HTML/XML > DHTML > summerize css definition

DHTML - summerize css definition


Expert: Andrew Hoffman - 12/31/2007

Question
Hi
I have a page, which I want to use tabs on it. I've designed tabs with CSS, with the following style syntax:
.tab1 {
  position:absolute;
  right:210;
  top:105;
  width:100px;
  padding:4px;
  text-align:center;
  float:right;
  cursor:pointer;
  border:1px solid #B0BEC7;
  border-bottom:0;
   background: url(indentbg.gif) center center repeat-x;
}
.tab2 {
  position:absolute;
  right:310;
  top:105;
  width:100px;
  height:33px;
  color:#CC6633;
  padding:4px;
  text-align:center;
  float:right;
  border-top:1px solid #B0BEC7;
  cursor:pointer;
   background: url(indentbg2.gif) center center repeat-x;
}
.tab3 {
  position:absolute;
  right:410;
  top:105;
  width:100px;
  padding:4px;
  text-align:center;
  float:right;
  cursor:pointer;
  border:1px solid #B0BEC7;
  border-bottom:0;
   background: url(indentbg.gif) center center repeat-x;
}

As you see, all of the CSS properties are the same, except the "right" position. I think it is not a good idea to declare values again and again while they have joint. So can you please provide me a better solution?

Answer
.tab1,.tab2,.tab3 {
position:absolute;
top:105px;
width:100px;
padding:4px;
text-align:center;
float:right;
cursor:pointer;
border:1px solid #B0BEC7;
border-bottom:0;
  background: url(indentbg.gif) center center repeat-x;
}

.tab1 {
right: 210px;
}
.tab2 {
right: 310px;
}
.tab3 {
right: 410px;
}

Add to this Answer   Ask a Question


 
User Agreement | Privacy Policy | Kids' Privacy Policy | Help
Copyright  © 2008 About, Inc. AllExperts, AllExperts.com, and About.com are registered trademarks of About, Inc. All rights reserved.