Exactly what I was looking for. I knew I'd seen it somewhere else but couldn't remember the method. THANKS.
Mike -----Original Message----- From: Scott Bicknell [mailto:[EMAIL PROTECTED] Sent: Wednesday, November 29, 2006 12:08 PM To: [EMAIL PROTECTED] Subject: Re: [css-d] How do I make my CSS more compact? On Wednesday 29 November 2006 10:47 am, Michael Stevens wrote: > I just threw in a topic for the site > www.jimbarnettconsulting.com/test and a spacing problem but this is a > different issue. > > It's a normal layout: page wrapper - header - menu - content - > secondary content - footer. > > Every page layout is identical except that the background image for > the content is different. Right now I have in the CSS > (www.jimbarnettconsulting.com/test/jbc.css) #content, #content_about, > #content_jims_team, #content_partners... right now 13 separate IDs and > all of them are identical: > > #content { > background: #807060 url(images/welcome.jpg) no-repeat top left; > width: 543px; > margin: 0px 10px 0px 10px; > padding: 45px 10px 0px 10px; > float: left; > } > > except the background image. That's a lot of repeated widths, margins, > paddings, and floats. > > There must be a way to make one ID of content: > > #content { > width: 543px; > margin: 0px 10px 0px 10px; > padding: 45px 10px 0px 10px; > float: left; > } > > and then a secondary ID or CLASS for all the pages: > > .about {background: #807060 url(images/about.jpg) no-repeat top left;} > .jims_team {background: #807060 > url(images/jims_team.jpg) no-repeat top left;} .partners {background: > #807060 url(images/partners.jpg) no-repeat top left;} > > ... > > but I can't figure it out. I tried <div id="content" > class="about"> in the HTML but it appears that I can't assign a Class > & ID to a DIV. > > I also tried: > > content.about {background: #807060 url(images/about.jpg) no-repeat top > left;} content .about {background: #807060 url(images/about.jpg) > no-repeat top left;} > > in the CSS but that didn't work either. > > How do I make my CSS less cumbersome? One thing you can do is put an id attribute on the body tag to uniquely identify each page and keep your #content divs the same. Then you can specify different background images for each #content div by using #bodyid #content { background: ... } while keeping just one set of rules for your #content div that applies to every page. -- Scott ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
