Таблицы на заказ (16)

Поделиться1Сб, 7 Фев 2015 15:52:02

Автор: Christian Hale
Стремящийся
Зарегистрирован: Сб, 7 Фев 2015
Сообщений: 2
Уважение: 0
Позитив: 0
Последний визит:
Вс, 5 Апр 2015 16:12:27

Продолжение темы Таблицы на заказ (15).
Напомню требования:

При заказе таблиц от вас требуется:
1) Эскиз вашей будущей таблицы, сделанный в любом графическом редакторе (Пэинт, Фотошоп и т.д.) - обязательно!
2) Ссылка на ваш форум !Заказы без ссылок приниматься не будут!
3) Указать необходимые прокрутки, всплывающие окна, границы таблиц и т.п.
Заказы типа "Сделайте: Как там!" также приниматься не будут. Потрудитесь нарисовать макет таблицы самостоятельно.
И помните, чем подробнее опишите то, что нужно, тем точнее получите результат.

0

Поделиться221Ср, 21 Сен 2016 07:04:56

Автор: DmitryVodnik
Заслуженный
Зарегистрирован: Сб, 17 Мар 2012
Сообщений: 49
Уважение: +1
Позитив: +9
Последний визит:
Пн, 25 Ноя 2024 10:21:11

Помогите с таблицей. Я так понимаю она не сложная.

Параметры : 7 кнопок, 1 окно контента.
кнопки находятся над окном контента.
Таблица такая узкая, чтобы корректно отображалась на смартфоне 5д (как иначе - не знаю, резиновые таблицы, которые предлагались, все работают ужасно).
При смене контента таблица не должна прыгать и растягиваться от разных габаритов контента.
размер окна контента 400 на 400, габариты кнопок не должны вылезать за ширину 400
прокрутка должна появлятся только в случае избыточного количества текста

Отредактировано DmitryVodnik (Ср, 21 Сен 2016 23:40:03)

0

Поделиться222Ср, 21 Сен 2016 11:49:04

Автор: Alex_63
Администратор
Зарегистрирован: Чт, 11 Дек 2014
Сообщений: 11226
Уважение: +7630
Позитив: +5466
Пол: Мужской
Последний визит:
Вчера 23:01:30

DmitryVodnik

Код:

<style type="text/css">
#TstTable{
 width:100%;
 padding:0;
 position:relative;
}
#TBL_Inner{
 position:relative;
 width:400px;
 margin:0 auto;
}
#TBL_buttons .btn{
 font-weight:700;
 cursor:pointer;
 margin:.2em 0;
 padding:.6em 1em;
 display:inline-block;
 border:solid 2px #999;
 border-radius:5px;
 text-align:center;
}
#TBL_buttons .btn.active {
 background:#ddd;
}
#TBL_buttons .btn:nth-child(1), 
#TBL_buttons .btn:nth-child(2), 
#TBL_buttons .btn:nth-child(3), 
#TBL_buttons .btn:nth-child(4) {
 width:172px;
}
#TBL_buttons .btn:nth-of-type(5), 
#TBL_buttons .btn:nth-of-type(6), 
#TBL_buttons .btn:nth-of-type(7) {
 width:104.5px;
}
#TBL_content {
 width:400px;
 height:400px;
 max-height:400px;
 overflow:hidden;
 border:solid 2px #999;
 border-radius:6px;
 margin:.2em 0 0 0;
}
#TBL_content .cnt{
 display:none;
 position:absolute;
 height:380px;
 width:380px;
 padding:10px;
 overflow-y:auto;
}
</style>

<div id="TstTable">
    <div id="TBL_Inner">

<div id="TBL_buttons">
    <span class="btn">Кнопка 1</span>
    <span class="btn">Кнопка 2</span>
    <span class="btn">Кнопка 3</span>
    <span class="btn">Кнопка 4</span>
    <span class="btn">Кнопка 5</span>
    <span class="btn">Кнопка 6</span>
    <span class="btn">Кнопка 7</span>
</div>

<div id="TBL_content">
    <div class="cnt">
Контент 1
    </div>
    <div class="cnt">
Контент 2
    </div>
    <div class="cnt">
Контент 3
    </div>
    <div class="cnt">
Контент 4
    </div>
    <div class="cnt">
Контент 5
    </div>
    <div class="cnt">
Контент 6
    </div>
    <div class="cnt">
Контент 7
    </div>
</div>

    </div>
</div>

<script><!--Переключение Вкладок-->
$(document).ready(function(){
  $("#TBL_content .cnt:first").show();
  $("#TBL_buttons .btn:first").addClass("active");
$("#TBL_buttons .btn").click(function(){var L=$(this).index();
$("#TBL_content .cnt").fadeOut(300).eq(L).fadeIn(300);
$("#TBL_buttons .btn").removeClass("active");
$(this).addClass("active");});});
</script>

+1

ВКонтакте alex__63

Поделиться223Ср, 21 Сен 2016 18:59:39

Автор: DmitryVodnik
Заслуженный
Зарегистрирован: Сб, 17 Мар 2012
Сообщений: 49
Уважение: +1
Позитив: +9
Последний визит:
Пн, 25 Ноя 2024 10:21:11

Alex_63, спасибо, разобрался

+1

Поделиться224Вт, 4 Окт 2016 13:31:40

Автор: tiger_roman
Заслуженный
Зарегистрирован: Ср, 26 Июн 2013
Сообщений: 368
Уважение: +11
Позитив: +55
Последний визит:
Сб, 13 Июл 2024 14:53:25

Здравствуйте.

Эскиз таблицы с описанием

Слева столбиком кнопки, при нажатии на которые попадаешь на разные вкладки таблицы. При обновлении страницы открыта первая вкладка. На одном уровне с первой кнопкой - три баннера, которые зафиксированы вместе с другими кнопками и не исчезают при переключении вкладок. Под ними текст, у которого при необходимости появляется прокрутка. Текст и прокрутка находятся строго внутри поля с пунктирной границей, при прокрутке текст не должен залезать за границы или верхние баннеры. Полупрозрачное дерево на заднем фоне должно быть видно и под верхними баннерами. Размеры таблицы - 866 х 426px.

Исходники

Ссылка на форум (здесь же можно взять наполнение таблицы)

0

Поделиться225Вт, 4 Окт 2016 18:41:29

Автор: Alex_63
Администратор
Зарегистрирован: Чт, 11 Дек 2014
Сообщений: 11226
Уважение: +7630
Позитив: +5466
Пол: Мужской
Последний визит:
Вчера 23:01:30

tiger_roman
Постараюсь сделать в течение недели

0

ВКонтакте alex__63

Поделиться226Пн, 10 Окт 2016 01:01:54

Автор: tiger_roman
Заслуженный
Зарегистрирован: Ср, 26 Июн 2013
Сообщений: 368
Уважение: +11
Позитив: +55
Последний визит:
Сб, 13 Июл 2024 14:53:25

Что там с табличкой? С:

0

Поделиться227Пн, 10 Окт 2016 12:19:04

Автор: Alex_63
Администратор
Зарегистрирован: Чт, 11 Дек 2014
Сообщений: 11226
Уважение: +7630
Позитив: +5466
Пол: Мужской
Последний визит:
Вчера 23:01:30

tiger_roman
Пока не брался... занят, мож еще через неделю (Напоминайте раз в два дня

0

ВКонтакте alex__63

Поделиться228Пн, 10 Окт 2016 20:54:15

Автор: tiger_roman
Заслуженный
Зарегистрирован: Ср, 26 Июн 2013
Сообщений: 368
Уважение: +11
Позитив: +55
Последний визит:
Сб, 13 Июл 2024 14:53:25

Alex_63
Хорошо:)

0

Поделиться229Чт, 13 Окт 2016 15:40:34

Автор: tiger_roman
Заслуженный
Зарегистрирован: Ср, 26 Июн 2013
Сообщений: 368
Уважение: +11
Позитив: +55
Последний визит:
Сб, 13 Июл 2024 14:53:25

#напоминаю

0

Поделиться230Сб, 15 Окт 2016 11:56:12

Автор: tiger_roman
Заслуженный
Зарегистрирован: Ср, 26 Июн 2013
Сообщений: 368
Уважение: +11
Позитив: +55
Последний визит:
Сб, 13 Июл 2024 14:53:25

#напоминаю

+1

Поделиться231Вс, 16 Окт 2016 22:11:40

Автор: Alex_63
Администратор
Зарегистрирован: Чт, 11 Дек 2014
Сообщений: 11226
Уважение: +7630
Позитив: +5466
Пол: Мужской
Последний визит:
Вчера 23:01:30

tiger_roman
Как-то так: (Ставить куда нужно)

Код:

<style type="text/css">
#MyTable {
  height:426px;
  width:872px;
  position:relative;
  background:url(http://s3.uploads.ru/IkWnV.png) top right no-repeat;
}
#MyTableBtns {
  float:left;
  margin-top:10px;
}
#MyTableBtns ._btn {
  margin-bottom:.8px;
  cursor:pointer;
  transition:.45s ease;
}
#MyTableBtns ._btn:hover {
  opacity:.65;
}
#MyTableCnt {
  height:336px;
  width:620px;
  margin-top:78px;
  margin-right:6px;
  float:right;
}
#MyTableCnt ._cnt {
  display:none;
  position:absolute;
  height:316px;
  width:600px;
  padding:10px;
  overflow-x:hidden;
  overflow-y:auto;
}
#MyTableLinks {
  position:absolute;
  top:0;left:230px;
  padding:22px 54px;
  width:530px;
  margin-left:10px;
  text-align:center;
}
#MyTableLinks ._gift {
  float:right;
}
</style>
 
<center><div id="MyTable">

   <!-- Ссылки сверху -->
  <div id="MyTableLinks" align=left>
    <a href="ссылка" class="_vk" style="margin-left:-350px!important;"><img src="http://sh.uploads.ru/THcE0.png" /></a>
    <a href="ссылка" class="_gift"><img src="http://sh.uploads.ru/eyZQW.png" /></a>
  </div>


  <!-- Кнопки -->
  <div id="MyTableBtns">
    <div class="_btn"><img src="http://s7.uploads.ru/dlRF1.png" /></div>
    <div class="_btn"><img src="http://sf.uploads.ru/FN14a.png" /></div>
    <div class="_btn"><img src="http://s4.uploads.ru/CO3Nm.png" /></div>
    <div class="_btn"><img src="http://s5.uploads.ru/RPm9W.png" /></div>
    <div class="_btn"><img src="http://sd.uploads.ru/4Biue.png" /></div>
    <div class="_btn"><img src="http://s9.uploads.ru/7SdRP.png" /></div>
  </div>
 
  <!-- Контент -->
  <div id="MyTableCnt">
    <div class="_cnt">
    Контент 1
    </div>
    <div class="_cnt">
    Контент 2
    </div>
    <div class="_cnt">
    Контент 3
    </div>
    <div class="_cnt">
    Контент 4
    </div>
    <div class="_cnt">
    Контент 5
    </div>
    <div class="_cnt">
    Контент 6
    </div>
  </div>
 
 
</div></center>
 
<script type="text/javascript">
$().pun_aboutReady(function() {
  $('#MyTableBtns ._btn').click(function() {
    $('._btn.active').removeClass('active');
    var index = $(this).addClass('active').index();
    $('#MyTableCnt ._cnt').fadeOut(300).eq(index).fadeIn(300);
  });
  $('#MyTableBtns ._btn').eq(0).click();
});
</script>

Контент ставите свой, Вертикальная Прокрутка в ячейках имеется

Демо > http://hostjs.mybb.ru/pages/table_tiger_roman

+1

ВКонтакте alex__63

Поделиться232Вт, 18 Окт 2016 03:20:33

Автор: tiger_roman
Заслуженный
Зарегистрирован: Ср, 26 Июн 2013
Сообщений: 368
Уважение: +11
Позитив: +55
Последний визит:
Сб, 13 Июл 2024 14:53:25

Alex_63
Большое спасибо!
Установил без особых проблем.

+1

Поделиться233Ср, 26 Окт 2016 11:00:33

Автор: Ms. Juliet
Заслуженный
Зарегистрирован: Сб, 20 Фев 2016
Сообщений: 152
Уважение: +9
Позитив: +51
Пол: Женский
Последний визит:
Чт, 31 Дек 2020 14:18:40

1) http://funkyimg.com/i/2iJ4D.png - сам низ с таблицей
http://funkyimg.com/i/2iJ5h.png - скрин с описанием
Нужна ли отдельно табличка в пнг-формате?
2) http://smsc.rolka.su/
3) В окошке "Партнеры" нужна прокрутка, как в таблице наверху. И можно ли скрипт затемнения, чтобы при наведении на окно , баннера подсвечивались.
Пример здесь - http://imagiart.ru/ внизу.
Где "из сюжетных хроник" чуть ниже также нужна прокрутка потому, что там пойдет сплошной текст. Само окно длиной до конца окна с партнерами и без рамок. Ширина не так важна, лишь бы отступ от тела форума был такой же, как и показано слева.
В сюжетных хрониках будут цитаты. Как прописать в таблице, чтобы они при обновлении страницы каждый раз менялись?

Отредактировано Ms. Juliet (Ср, 26 Окт 2016 11:05:59)

0