Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях

Правила форума

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: Savepic Видео фоторедактор Транслит

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

Предыдущая тема Следующая тема Перейти вниз

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

Сообщение автор Doctorish в Чт 26 Июн - 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; /* цвет фона и фоновая картинка */
}

Doctorish
Новичок

Сообщения : 19
Возраст : 22
Регистрация : 2013-09-21
Благодарности : 0

Без предупреждений

http://shinobi-memory.forum2x2.ru/

Вернуться к началу Перейти вниз

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

Сообщение автор menma в Пт 27 Июн - 16:42




Я бы посоветовал вам таблицу Аккордеон. Она более понятна, да и легка в управлении

menma
 

Сообщения : 95
Возраст : 16
Регистрация : 2013-11-13
Благодарности : 0

Без предупреждений

http://radelin.forum2x2.com/

Вернуться к началу Перейти вниз

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

Сообщение автор Doctorish в Пн 30 Июн - 1:36

Сам разобрался.
Тему можно удалять/закрывать.

Doctorish
Новичок

Сообщения : 19
Возраст : 22
Регистрация : 2013-09-21
Благодарности : 0

Без предупреждений

http://shinobi-memory.forum2x2.ru/

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения