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?
Thanks,
Mike
______________________________________________________________________
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/
