different classes for li

[lorrens]

1) Script Title:
Tab Content script

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...tabcontent.htm

3) Describe problem:
Hey,
I want to use different classes for some <li> tags,
now the <ul> defines all the styles,
so all the <li>'s look the same..
but if I make a new class for a li (like .small li) and assign it to the li I want changed, it doesn't overrule the <ul>


how do I fix this?

[mwinter]

... now the <ul> defines all the styles, ... but if I make a new class for a li (like .small li) and assign it to the li I want changed, it doesn't overrule the <ul>

Declarations are applied based on the specificity of the selector for their rule. That is, if the rule has a very specific selector, the declarations in that rule will override those from any less-specific rule.

Specificity is based on both the number and type of selector parts. For example, an id selector (#identifier) is more specific than an element name (li), class (.warning) or pseudo-class (:hover). A class name or pseudo-class is more specific than an element name. Everything is more specific than the universal selector (*). Three element names in a selector is more specific than two - you get the picture.

If you need detailed advice on correcting the problem, you'll have to post a link to the document in question.

Mike

[lorrens]

that's a problem, my contract says I can't
I'll try to figure it out myself first thanks!

[mwinter]

that's a problem, my contract says I can't

Well, you don't need to post an exact copy: something much simpler that still demonstrates the problem will do (and will probably be easier to evaluate, anyway).

Mike

[lorrens]

<div id="maintab" class="shadetabs">
<li class="small"><a href="#" rel="tcontent4"><img src="tab_help.gif" alt="tab"></a></li>
<li class="small"><a href="#" rel="tcontent5"><img src="tab_plus.gif" alt="tab"></a></li>
<li class="selected"> 
<a href="#" rel="tcontent1" onClick="function();"><img src="tab_user.gif" alt="tab" class="tab"></a></li>
<li class="normal"><a href="#" rel="tcontent2"><img src="tab_flame.gif" alt="tab" class="tab"></a></li>

<li class="normal"><a href="#" rel="tcontent3"><img src="tab_test.gif" alt="tab" class="tab"></a></li>
</div>

.shadetabs{
margin: 0px;
font: bold 10pt verdana, arial, serif;
padding: 0px 0px 0px 0px;
width: 35px;
height: 127px;
text-align: center;
z-index: 2;
position: relative;
top: 0px;
left: 174px;
list-style-type: none;}


.shadetabs li{
z-index: 2;
padding: 0px 0px 0px 0px;
margin: 0px 0px 10px 0px;
width: 35px;
height: 127px;
background-image: url(tab_passive.gif);
background-repeat: repeat-y;
}


.shadetabs li a{
text-decoration: none;
}

.shadetabs li a:visited{
text-decoration: none;


}

.shadetabs li a:hover{
text-decoration: none;
}

.shadetabs li.selected{
z-index: 2;
padding: 0px 0px 0px 0px;
background-image: url(tab_active.gif);
}

.shadetabs li.small{
z-index: 2;
padding: 0px 0px 0px 0px;
background-image: url(tab_active_small.gif);
}


.shadetabs li.selected a{ /*selected main tab style */
text-decoration: none;
}

.shadetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
}

.tabcontentstyle{ /*style of tab content oontainer*/
border: 0px solid black;
background-image: url(bg_bar.gif);
font: normal 10pt verdana, arial, serif;
width: 178px;
height: 100%;
text-align: left;
padding: 0px;
margin: 0px;
}

.tabcontent{
display:none;
position: absolute;
top: 0px;
height: 100%;
}

@media print {
.tabcontent {
display:none!important;
}

the tabs are vertical instead of horizontal
but how do I make different tabstyles?

[mwinter]

<div id="maintab" class="shadetabs">

I assume that was meant to be a ul element, not a div? If not, it should be.

<img src="tab_help.gif" alt="tab">

Your alternative text is rather poor. It is meant to be a replacement for the image, and "tab" isn't particularly useful. From the URI, I assume that the image contains the word or an icon representing help, therefore the alternative text should be "Help". The same principle applies to the rest.

font: bold 10pt verdana, arial, serif;

Ten point Arial is a little small for my eyes, I don't know about you. The point unit is also meant for printing. Use percentages. For navigation and the like, 80 to 90 percent should be fine. If Verdana looks too big for this, don't use it.

width: 35px;

I'll mention that, later.

.shadetabs li{

Add to this rule:

display: inline;

The list items will be rendered in an in-line context. The problem, however, is that the width declaration, above, will limit the space in which these items can be displayed. You'll either need to remove it, or at least alter it.

padding: 0px 0px 0px 0px;
margin: 0px 0px 10px 0px;

padding: 0;
margin: 0;

will be fine.

background-image: url(tab_passive.gif);
background-repeat: repeat-y;

When specifying a background image, one should also specify a background colour. Likewise, when specifying the background colour, the foreground should be included, too. Omitting these might lead to conflicts if the user doesn't have the same defaults as you.

the tabs are vertical instead of horizontal
but how do I make different tabstyles?

Beyond horizontal rendering, or only that? For the former, look for examples on-line. There are plenty of them.

Mike

[lorrens]

Ehh... what are you doing?
I asked what I have to do to make a different class for a <li> under the <ul>
you're just reviewing my css, I don't need that...