Новое
На Зефире прошла небольшая реорганизация. Подробности читайте в теме Вестника

● Смена дизайна! Выражаем благодарность tørst vinden!

Зефир

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Зефир » Архив выполненной верстки » [Таблица] Коты-Воители. Ненаписанные истории

[Таблица] Коты-Воители. Ненаписанные истории

Страница: 1
Тема закрыта

Сообщений 1 страница 4 из 4

1

  • Автор: Каэлистибус
  • Не падай духом. На это нет времени. Никогда
  • Каэлистибус
  • Зарегистрирован: 2014-06-24
  • Приглашений: 0
  • Сообщений: 247
  • Уважение: [+16/-1]
  • Позитив: [+38/-0]
  • Пол: Женский
  • Возраст: 25 [1999-01-02]
  • Провел на форуме:
    6 дней 15 часов
  • Последний визит:
    2017-05-29 01:11:58

1. Название ролевой, ссылка:
Коты-Воители. Ненаписанные истории
2. Что требуется:

Свернутый текст

http://sd.uploads.ru/E0yc3.png

3. Дополнительно:
Размер форума = 800рх
Прокрутка во всех контентах кнопок.

0

2

  • Автор: `Nancy Beatlejuice
  • Участник
  • `Nancy Beatlejuice
  • Зарегистрирован: 2014-06-13
  • Приглашений: 0
  • Сообщений: 51
  • Уважение: [+10/-0]
  • Позитив: [+7/-0]
  • Провел на форуме:
    14 часов 38 минут
  • Последний визит:
    2015-11-17 19:05:17

The High Bone, доброго вечера!
Вот этот код Вы помещаете в "Цвета style_cs.css" (второе окно, свой стиль).

Свернутый текст
Код:
#menu {
  background: transparent url(-) top center repeat;   
  border: none !important;
  width:550px;
  text-align:center;
}

#menu span {
color: #30220d;
text-decoration : none;
font-family: constantia; 
font-weight: normal;
border: 0px;
text-align : center;
-moz-border-radius:10%;
letter-spacing: -1px;
font-style:italic;
background : transparent;
opacity: 0.5;
font-size : 17px;
text-align : center;
margin : 2px;
padding : 5px;
-webkit-transition: opacity 0.9s ease;
-khtml-transition: opacity 0.9s ease;
-moz-transition: opacity 0.9s ease;
-o-transition: opacity 0.9s ease;
}

#menu span:hover {
color: #30220d;
text-decoration : none;
font-family: constantia;
font-weight: normal;
border: 0px;
text-align : center;
-moz-border-radius:10%;
letter-spacing: -1px;
font-style:italic;
background : transparent;
opacity: 1.0;
font-size : 17px;
text-align : center;
margin : 2px;
padding : 5px;
-webkit-transition: opacity 0.9s ease;
-khtml-transition: opacity 0.9s ease;
-moz-transition: opacity 0.9s ease;
-o-transition: opacity 0.9s ease;
	}

#menu .tabactive {
color: #30220d;
text-decoration : none;
font-family: constantia;
font-weight: normal;
border: 0px;
text-align : center;
-moz-border-radius:10%;
letter-spacing: -1px;
font-style:italic;
background : transparent;
opacity: 1.0;
font-size : 17px;
text-align : center;
margin : 2px;
padding : 5px;
-webkit-transition: opacity 0.9s ease;
-khtml-transition: opacity 0.9s ease;
-moz-transition: opacity 0.9s ease;
-o-transition: opacity 0.9s ease;
}

#submenu {
padding: 10px;
text-align: center !important;
font-size: 11px;
width: 500px !important;
height: 200px !important;
color: #30220d;
}

.submenutext {display: none; height: 0px;}
#MenuTxT {background: transparent;}

Разбор таблицы:
]#menu { - отвечает за общие характеристики таблицы.
#menu span { - отвечает за общий вид вкладок. Если у Вас вместо текстовой вкладки будет стоять картинка, то трогать этот элемент (как и #menu span:hover {, #menu .tabactive { не нужно).
#menu span:hover { - данный элемент определяет стиль вкладки при наведении, но не клике.
#menu .tabactive { - отвечает за стиль уже нажатой вкладки.
#submenu { - определяет стиль внутри таблицы, т.е. контента.

Для того, чтобы было возможно переключать между вкладками вставляете код, что будет ниже в html-низ:

Свернутый текст
Код:
<script type="text/javascript">
$(document).ready(function() {
$("td.#MenuTxT div.submenutext").hide();
<!--$(".tabs span:first").addClass("active").show(); -->
$("td.#MenuTxT div.submenutext:first").show();
$("div.#menu span").click(function() {
    $("div.#menu span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("td.#MenuTxT div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $("div."+activeDiv).fadeIn();
    return false; });
});
</script>

Сам код объявления. Вставлять в... объявление:

Свернутый текст
Код:
<table style="width: 780px; height: 200;">
<tr>
<td rowspan=2 style="padding-left:3px; width: 350px; padding-bottom: 50px; text-align: justify;">

<div style="text-align:center;">
<center><font size=2><b>НАВИГАЦИЯ:</b></font>
<br>
<a href=>ссылка</a><br>
<a href=>ссылка</a><br>
<a href=>ссылка</a><br>
<a href=>ссылка</a><br>
<a href=>ссылка</a><br>
<a href=>ссылка</a><br>
<a href=>ссылка</a><br>
<a href=>ссылка</a><br>
<a href=>ссылка</a><br>
<a href=>ссылка</a><br>
<a href=>ссылка</a><br>
<a href=>ссылка</a><br>
<a href=>ссылка</a><br>
<a href=>ссылка</a><br>
<a href=>ссылка</a><br>
<a href=>ссылка</a><br>
<a href=>ссылка</a><br>
</center>
</td>

<td><br>
<div id="menu">
<span alt=#sm1 "style="cursor: pointer; text-align: center;">ВКЛАДКА 1</span>
<span alt=#sm2"style="cursor: pointer; text-align: center;">ВКЛАДКА 2</span>
<span alt=#sm3"style="cursor: pointer; text-align: center;">ВКЛАДКА 3</span>
<span alt=#sm4"style="cursor: pointer; text-align: center;">ВКЛАДКА 3</span>
</div>
</td>
</tr>
<tr>
<td id="MenuTxT"  align="center" valign="top">
<div id="submenu" align="center"> 
<div id="sm1" class="submenutext" style="display:block; text-align: justify;">
<center>Текст, 1 вкладка</center>
</div>

<div id="sm2" class="submenutext" style="display:block; text-align: justify;">
<center>Текст, 2 вкладка</center>
</div>


<div id="sm3" class="submenutext" style="display:block; text-align: justify;">
<center>Текст, 3 вкладка</center>
</div>

<div id="sm4" class="submenutext" style="display:block; text-align: justify;">
<center>Текст, 4 вкладка</center>
</div>

</td>
</tr>
</table>

+1

3

  • Автор: Каэлистибус
  • Не падай духом. На это нет времени. Никогда
  • Каэлистибус
  • Зарегистрирован: 2014-06-24
  • Приглашений: 0
  • Сообщений: 247
  • Уважение: [+16/-1]
  • Позитив: [+38/-0]
  • Пол: Женский
  • Возраст: 25 [1999-01-02]
  • Провел на форуме:
    6 дней 15 часов
  • Последний визит:
    2017-05-29 01:11:58

`Nancy Beatlejuice
Спасибо большое, все прекрасно стоит =З

0

4

  • Автор: Нафаня
  • Я ухожу в себя и открываю целый мир.
  • Нафаня
  • Зарегистрирован: 2014-02-27
  • Приглашений: 0
  • Сообщений: 5595
  • Уважение: [+268/-4]
  • Позитив: [+309/-0]
  • Пол: Женский
  • Возраст: 32 [1992-04-07]
  • Провел на форуме:
    1 месяц 6 дней
  • Последний визит:
    2020-12-31 16:58:02

http://zephyr.f-rpg.ru/files/0013/e6/99/52870.png
Спасибо, Fantasy, что воспользовались нашими услугами! Если вам понравилась работа Верстальщика или же наоборот, оставьте свой отзыв в теме "Отзывы заказчиков о выполненной работе", нам важно знать ваше мнение.

0

Тема закрыта
Страница: 1

Вы здесь » Зефир » Архив выполненной верстки » [Таблица] Коты-Воители. Ненаписанные истории

Рейтинг форумов | Создать форум бесплатно