How do I 'add' multiple (object) css classes?

Seanie M · 05-06-2007 11:53am #1

This is on a Dreamweaver environment, if that matters, by the way.

I can add classes, thats not a problem. The problem is adding multiple ones to a section. I have some objects I want to add to the background. There are tables involved, but for the main body, it starts like this:

<body class="goldstrip">

I also want to add a second object class, so I thought it should appear like this:

<body class="goldstrip" "goldhorizontalstrip">

or even

<body class="goldstrip goldhorizontalstrip">

but to no avail. What am I doing wrong?

Seanie.

Kudos · 05-06-2007 12:12pm

A html element can only have one className, you could use an identifier instead, but this is bad semantics (not mention still limiting you to 2 styles).

.goldstrip goldstriphorizontal{ /*styles for goldstrip, and passing them on to goldstriphorizontal too*/ }
.goldstriphorizontal{/*styles you want to add to goldstriphorizontal that you don't want in goldstrip*/}

Not that the order they are put in is vital, cascading style sheets, the styles cascade down with newer declarations overwriting older ones.

Seanie M · 05-06-2007 12:16pm

I have each class element standing on its own, the 2 in question appearing as this:

<style type="text/css">
.goldstrip {
background-image: url(..images/gold_strip_long.jpg);
background-repeat: repeat-x;
background-position: left top;
}
</style>
<style type="text/css">
.goldhorizontalstrip {
background-image: url(../images/gold_horizontalstrip.gif);
background-repeat: no-repeat;
background-position: right bottom;
}
</style>

Only 1 appears when I try to do the example in the first post.

Liam Byrne · 05-06-2007 12:31pm

You should be able to include multiple classes by including the classes within the class declaration's quotes, separated by spaces, as per your second example

class="goldstrip goldhorizontalstrip"

http://webdesign.about.com/od/css/qt/tipcssmulticlas.htm

Bear in mind what Kudos said about the order... if there are any "conflicting" declarations, the newer ones will overwrite the older ones.

louie · 05-06-2007 1:42pm

you should avoid that at all times. It could create havoc if any changes are made to the css without realising waht's going to happen.

Best try using nested divs. More control over the layout.

Ph3n0m · 05-06-2007 1:45pm

your first one has this

background-image: url(..images/gold_strip_long.jpg);

and the second

background-image: url(../images/gold_horizontalstrip.gif);

Yer image reference is off by a "/"

Seanie M · 05-06-2007 3:37pm

Ph3n0m wrote:

your first one has this

background-image: url(..images/gold_strip_long.jpg);

and the second

background-image: url(../images/gold_horizontalstrip.gif);

Yer image reference is off by a "/"

Apologies Phen0m, that is a typo here, not in the actual code.

Seanie M · 05-06-2007 3:43pm

Liam Byrne wrote:

You should be able to include multiple classes by including the classes within the class declaration's quotes, separated by spaces, as per your second example

class="goldstrip goldhorizontalstrip"

http://webdesign.about.com/od/css/qt/tipcssmulticlas.htm

Bear in mind what Kudos said about the order... if there are any "conflicting" declarations, the newer ones will overwrite the older ones.

That's what bugs me. No apparent conflicts exist, and both come up fine individually in the body tag.

colm_c · 05-06-2007 5:00pm

ok first off you can (and should where applicable) use multiple classes.

When you're using multiple classes they combine the classes together to produce the end result.

So for example:

[HTML]

.total {
font-weight: bold;
}

.negative {
color: #F00;
}

[/HTML]

This will give text that's red and bold, however if I go

[HTML]

.total {
font-weight: bold;
color: #0F0;
}

.negative {
color: #F00;
}

[/HTML]

I will still only get bold red text.

but if I go:

[HTML]

.negative {
color: #F00;
}

.total {
font-weight: bold;
color: #0F0;
}

[/HTML]

I'll get bold blue text.

So for your case you're trying to apply 2 backgrounds to a single div - this won't work, the latter one will override the original, you'll need 2 nested divs and apply a background to each of them.

Seanie M · 05-06-2007 11:31pm

What if I am not entirely divs savvy?

Liam Byrne · 05-06-2007 11:34pm

louie wrote:

you should avoid that at all times. It could create havoc if any changes are made to the css without realising waht's going to happen.

To be honest, before you make ANY change of any type you should have investigated what's going to happen as a result, particularly since modern websites have include files, CSS, JavaScript, AJAX, etc.

It's a convenient approach, and one which cuts down on unnecessary duplication of code, and so can be worth the risk. If done right, it can also mean that some changes later (e.g. fonts or font sizes, for example) can be made without the need to change multiple CSS declarations.

But yeah, bear in mind that like all "here and now" conveniences, it requires that you're fully on top of any changes that you might make further down the line.

But it's not an "avoid at all times" issue.

louie · 06-06-2007 7:53am

I didn't mean it as "avoid at all times = bad decision" but as a pointer
"you should avoid that at all times"

How do I 'add' multiple (object) css classes?

Comments