Re: Howto combine multiple div/classes into one class

mbanavige — Wed, 21 May 2008 23:20:41 GMT

you're not going to be able to combine them as you can't have more than one background image per selector / element. Based on the effect your trying to achieve, you'll need to have multiple div's so that you can assign the multiple background images.

Howto combine multiple div/classes into one class

dryan1963 — Wed, 21 May 2008 21:33:30 GMT

Hi, I have the following CSS and I am wondering if there is a to combine all of this into one class such that I will only need to reference the one new class in the div declaration in my html:

.roundedcornr_box_963993 {
	background: url(roundedcornr_963993_tl.png) no-repeat top left;
}
.roundedcornr_top_963993 {
	background: url(roundedcornr_963993_tr.png) no-repeat top right;
}
.roundedcornr_bottom_963993 {
	background: url(roundedcornr_963993_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_963993 div {
	background: url(roundedcornr_963993_br.png) no-repeat bottom right;
}
.roundedcornr_content_963993 {
	background: url(roundedcornr_963993_r.png) top right repeat-y;
}

.roundedcornr_top_963993 div,.roundedcornr_top_963993,
.roundedcornr_bottom_963993 div, .roundedcornr_bottom_963993 {
	width: 100%;
	height: 15px;
	font-size: 1px;
}
.roundedcornr_content_963993, .roundedcornr_bottom_963993 {
	margin-top: -19px;
}
.roundedcornr_content_963993 { padding: 0 15px; }

To use this I need to do something like the following:

<div class="roundedcornr_box_963993">
   <div class="roundedcornr_top_963993"><div></div></div>
      <div class="roundedcornr_content_963993">
         <p>Some text... etc.</p>
      </div>
   <div class="roundedcornr_bottom_963993"><div></div></div>
</div>

I am wondering if there is a way to combine the css classes above so that I need only right one div to get the same effect, for example:

</div>

Thanks

Client Side Web Development

Re: Howto combine multiple div/classes into one class

Howto combine multiple div/classes into one class