Меню во вкладках с вертикальными кнопками

автор Doctorish Июнь 26th 2014, 21:08

Добрый вечер!
На данный момент у меня для каждой вкладки одинаковый фон. Что и как нужно прописать в каскадной таблице стилей CSS, чтобы для каждой вкладки задать свой фон?

Сейчас так:

Так прописано в overall_header

Код:: <div id="page-but"> <div id="but-menu"> <div id="tb1-button" class="button">Новости</div> <div id="tb2-button" class="button">Навигация</div> <div id="tb3-button" class="button">Офф-топ</div> <div id="tb4-button" class="button">Админы</div> <div id="tb5-button" class="button">Погода</div> </div> <div id="but-content"> <div id="tb1" class="but">вкладка Новости</div> <div id="tb2" class="but">вкладка Навигация</div> <div id="tb3" class="but">вкладка Офф-топ</div> <div id="tb4" class="but">вкладка Админы</div> <div id="tb5" class="but">вкладка Погода</div> </div> </div>

Так прописано в каскадной таблице стилей CSS
/

Код:: * весь блок меню */ #page-but { width: 900px; /* ширина */ height: 350px; /* высота */ background: transparent url(http://illiweb.com/fa/empty.gif) center repeat; /* цвет фона и фоновая картинка */ margin: 0 auto; } /* блок с кнопками */ #but-menu { float: left width: 150px; /* ширина */ } /* блок с контентом для вкладок */ #but-content { float: right margin-left: 150px; /* отступ слева на ширину блока с кнопками */ height: 350px; /* высота */ width: 750px; /* ширина */ background: transparent url(http://i57.tinypic.com/10ojqq0.png) center no-repeat; /* цвет фона и фоновая картинка */ margin: 0; } /* все скрытые блоки с контентом после первого */ #tb2, #tb3, #tb4, #tb5 { display: none; } /* кнопки слева */ #but-menu .button { cursor: pointer; width: 150px; /* ширина */ height: 50px; /* высота */ line-height: 50px; /* равно высоте (!) кнопки */ background-color: transparent; /* цвет фона */ margin: 5px auto; font-size: 11px; /* размер надписей */ text-align: center; } /* содержимое вкладок */ div.but { max-height: 375px; /* максимальная высота */ overflow: hidden; /* все, что не влезает в блок будет скрыто */ padding: 25px; margin: 25px; font-size: 11px; /* размер текста */ text-align: left; /* выравнивание текста */ border: 1px dashed #fff; /* пунктирная обводка */ background: transparent url(http://illiweb.com/fa/empty.gif) center repeat; /* цвет фона и фоновая картинка */ }