Howto combine multiple div/classes into one class

Last post 05-21-2008 7:20 PM by mbanavige. 1 replies.

Sort Posts:

  • Howto combine multiple div/classes into one class

    05-21-2008, 5:33 PM
    • Loading...
    • dryan1963
    • Joined on 05-21-2008, 9:23 PM
    • Posts 1

    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 class="new_class">

       <p>Some text... etc.</p>

    </div>


    Thanks 

  • Re: Howto combine multiple div/classes into one class

    05-21-2008, 7:20 PM
    Answer
    • Loading...
    • mbanavige
    • Joined on 11-06-2003, 8:29 AM
    • New England, USA
    • Posts 7,366
    • Moderator
      TrustedFriends-MVPs

    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.

    Mike Banavige
    ~~~~~~~~~~~~
    Dont forget to click "Mark as Answer" on the post that helped you.
    This credits that member, earns you a point and marks your thread as Resolved so we will all know you have been helped.
Page 1 of 1 (2 items)