DHTML/summerize css definition
Expert: Andrew Hoffman - 12/31/2007
QuestionHi
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;
}