Anyone know how to make this CSS code a little more simplified? I made the code myself and I can't seem to get it to work any other way. It is for CSS image rollovers. The code just seems to repeat a lot of code.

#home {display:block; width:130px; height:30px; background:url("/images/buttons/home.gif")}
#news {display:block; width:130px; height:30px; background:url("/images/buttons/news.gif")}
#calendar {display:block; width:130px; height:30px; background:url("/images/buttons/calendar.gif")}
#shows {display:block; width:130px; height:30px; background:url("/images/buttons/shows.gif")}
#photos {display:block; width:130px; height:30px; background:url("/images/buttons/photos.gif")}
#officers {display:block; width:130px; height:30px; background:url("/images/buttons/officers.gif")}
#drummajors {display:block; width:130px; height:30px; background:url("/images/buttons/drummajors.gif")}
#sections {display:block; width:130px; height:30px; background:url("/images/buttons/sections.gif")}
#squads {display:block; width:130px; height:30px; background:url("/images/buttons/squads.gif")}

#forums {display:block; width:130px; height:30px; background:url("/images/buttons/forums.gif")}
#guestbook {display:block; width:130px; height:30px; background:url("/images/buttons/guestbook.gif")}
#comments {display:block; width:130px; height:30px; background:url("/images/buttons/comments.gif")}
#musicmidis {display:block; width:130px; height:30px; background:url("/images/buttons/musicmidis.gif")}
#colorguard{display:block; width:130px; height:30px; background:url("/images/buttons/colorguard.gif")}
#bandstaff {display:block; width:130px; height:30px; background:url("/images/buttons/bandstaff.gif")}
#webstaff {display:block; width:130px; height:30px; background:url("/images/buttons/webstaff.gif")}

#home:hover, #news:hover, #calendar:hover, #shows:hover,
#photos:hover, #officers:hover, #drummajors:hover, #colorguard:hover,
#sections:hover, #squads:hover, #musicmidis:hover, #comments:hover,
#guestbook:hover, #forums:hover, #bandstaff:hover, #webstaff:hover { background-position:-130px 0px }

#home:active, #news:active, #calendar:active, #shows:active,
#photos:active, #officers:active, #drummajors:active, #colorguard:active,
#sections:active, #squads:active, #musicmidis:active, #comments:active,
#guestbook:active, #forums:active, #bandstaff:active, #webstaff:active { background-position:-260px 0px }

That's about as simplified as it's gonna get. Sorry =/

The only thing you can do is to merge some parts, but you will still have to keep the backgrounds in a new selector, as they aren't the same for every element:

#home, #news, #calendar, #shows, #photos, #officers, #drummajors, #sections, #squads, #forms, #guestbook, #comments, #musicmidis, #colorguard, #bandstaff, #webstaff {display:block;width:130px;height:30px;}

#home {background:url("/images/buttons/home.gif")}
#news {background:url("/images/buttons/news.gif")}
#calendar {background:url("/images/buttons/calendar.gif")}
#shows {background:url("/images/buttons/shows.gif")}
#photos {background:url("/images/buttons/photos.gif")}
#officers {background:url("/images/buttons/officers.gif")}
#drummajors {background:url("/images/buttons/drummajors.gif")}
#sections {background:url("/images/buttons/sections.gif")}
#squads {background:url("/images/buttons/squads.gif")}

#forums {background:url("/images/buttons/forums.gif")}
#guestbook {background:url("/images/buttons/guestbook.gif")}
#comments {background:url("/images/buttons/comments.gif")}
#musicmidis {background:url("/images/buttons/musicmidis.gif")}
#colorguard{background:url("/images/buttons/colorguard.gif")}
#bandstaff {background:url("/images/buttons/bandstaff.gif")}
#webstaff {; background:url("/images/buttons/webstaff.gif")}

Ok, thanks. I figured I could merge those. I just hadn't tried it.

What about there lines.

#home:hover, #news:hover, #calendar:hover, #shows:hover,
#photos:hover, #officers:hover, #drummajors:hover, #colorguard:hover,
#sections:hover, #squads:hover, #musicmidis:hover, #comments:hover,
#guestbook:hover, #forums:hover, #bandstaff:hover, #webstaff:hover { background-position:-130px 0px }

#home:active, #news:active, #calendar:active, #shows:active,
#photos:active, #officers:active, #drummajors:active, #colorguard:active,
#sections:active, #squads:active, #musicmidis:active, #comments:active,
#guestbook:active, #forums:active, #bandstaff:active, #webstaff:active { background-position:-260px 0px }

Is there anyway to just make it so whenever any of the rollovers are hovered or active, that it moves the background-position to the appropriate value?

I tried something like this:
A.rollover:hover { background-position:-130px 0px }
A.rollover:active { background-position:-260px 0px }
but it didn't work.....

if those are the only links or images or whatever on the page, then you can just do:

a:hover{background-position:-130px 0px}

Is there a easier way to do it, if they aren't the only links on the page?

Not that I can think of.