ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов

Объявление

🔴 МАСТЕР-КЛАСС от magia "Жизненный цикл проекта"

Дата и время: начало 28 апреля в 16:00 по МСК;
Если у вас возникла идея создать ролевую игру, сообщество любителей собак или форум для киноманов,
но не знаете с чего начать и что делать, не беда! Мы здесь чтобы помочь.

Подробности

GEMcross

Кроссовер, ориентированный на активную игру и уютный флуд.
Собираем у себя драгоценных игроков уже почти три года.

Посетить

🔥 Новинка в портфолио: ДИЗАЙН И ГРАФИКА В СТИЛЕ GENSHIN IMPACT

Платформа: MyBB.ru (RusFF)
Стоимость: 6500 рублей;
Авторы: Moju & wasurenagusa

Посмотреть

💰 Теперь у нас можно приобрести "Мгновенные уведомления от Алекса"

Скрипт оповещает пользователей о событиях на форуме в реальном времени, придавая динамики общению.
Автор: Alex_63 | Платформа: MyBB.ru.

У нас: структурированная документация, возможность платить иностранными картами, перевыпустить подписку или купить бессрочно.

Купить скрипт

🌟 ОПЛАТА ЗАКАЗА НАГРАДНЫМИ БАЛЛАМИ И СКИДКИ

Заказы можно оплачивать наградными баллами (НБ). Полностью или частично.
Бартер за НБ осуществляется на условиях платного заказа, в качестве оплаты - НБ.
А если у вас есть любой платный заказ, вы можете обменять НБ на скидочные купоны.

узнать подробности

📣 Наш проект: Ролевой поисковик

Поиск роли на текстовых ролевых
Проект от специалистов FD

Спойлеры и обсуждение

❤️ Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайте • Предложения
Стать модератором • Отзывы

Подробнее

SPECIAL OFFER: We distribute designs for free

Finalizing the layout for your project;
Developing a style code;
Mobile version included if you wish.

Details

Support the project

If you want to help us:
Become a moderator
Suggestions • Reviews

Details
СкрытьПоказать
❗ ❗ ❗ Technical work is underway. We'll fix it soon. :) If you're english-speaker and want to use our forum, switch to the russian language. This is temporary, until the works with multi-language option will be done. Sorry for the inconvenience.

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

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

Таблица-Слайдер

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

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

1

  • Автор: Cirra
  • Бестелесный дух прошлого
  • Cirra
  • Уважение: +0

1. Ссылка на форум:
http://vampirigra.0pk.ru
2. Эскиз таблицы:
  1 слайд - http://s2.uploads.ru/t/zBUr5.png
  2 слайд - http://s3.uploads.ru/t/49BIi.png - размер большой картинки, примерно 250х120, а маленьких 100х100
  3 слайд - http://s2.uploads.ru/t/Dkq79.png
  4 слайд - http://s2.uploads.ru/t/A5Fcz.png
  5 слайд - http://s3.uploads.ru/t/mVHQ2.png
3. Дополнительные предпочтения:
Ширина форума - 1150px
Без внутренних и внешних (снаружи) границ.
Стрелочки :
вправо  - http://s2.uploads.ru/t/54bXN.jpg
влево - http://s3.uploads.ru/t/W8u7j.jpg

0

2

  • Автор: Cirra
  • Бестелесный дух прошлого
  • Cirra
  • Уважение: +0

Извините, вот правильный вариант:
1. Ссылка на форум:
http://vampirigra.0pk.ru
2. Эскиз таблицы:
 

Эскиз

1 слайд - http://s2.uploads.ru/t/zBUr5.png
  2 слайд - http://s3.uploads.ru/t/49BIi.png - размер большой картинки, примерно 250х120, а маленьких 100х100
  3 слайд - http://s2.uploads.ru/t/Dkq79.png
  4 слайд - http://s3.uploads.ru/t/mVHQ2.png

3. Дополнительные предпочтения:
Ширина форума - 1150px
Без внутренних и внешних (снаружи) границ.
Стрелочки :

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

вправо  - http://s2.uploads.ru/t/54bXN.jpg
влево - http://s3.uploads.ru/t/W8u7j.jpg

Таблицу надо вставить в код:

Код:
<!--Таблица-->
<div style="position: absolute; top:535px; left:170px;COLOR:#382d24; border: none; font-family: calibri, arial, verdana, trebuchet, sans-serif; font-size: 13.5px; line-height: 11px; margin: 3px;overflow:auto;scrollbar-face-color: #f1f0e7;scrollbar-highlight-color: #f1f0e7;scrollbar-shadow-color:#f1f0e7;scrollbar-3dlight-color: #f1f0e7;scrollbar-arrow-color:#676c66;scrollbar-track-color: #f1f0e7;scrollbar-darkshadow-color: #f1f0e7;"> ТАБЛИЦА</div>

0

3

  • Автор: Cirra
  • Бестелесный дух прошлого
  • Cirra
  • Уважение: +0

Еще актуально!!!

0

4

  • Автор: Кофеман
  • Бестелесный дух прошлого
  • Кофеман
  • Уважение: +30

Cirra
Ваша таблица

В окно HTML верх

Код:
<style type="text/css">
#slideshow {
 margin:0 auto;
 width:1100px;
 height:340px;
 position:relative;
}

#slideshow #slidesContainer {
  margin:0 auto;
  width:840px;
  height:340px;
  overflow:auto; /* поддержка прокрутки */
  position:relative;
}

#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:840px; /* На двадцать пикселев меньше чем ширина #slidesContainer */
  height:340px;
}

.control {
  display:block;
  width:300px; /* ширина стрелок */
  height:97px; /* высота стрелок */
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}

#leftControl {
  top: 120px;
  left:0; /* отодвигаем стрелку влево, чем больше значение, тем левее стрелка */
  background: transparent url(http://s3.uploads.ru/W8u7j.jpg) no-repeat 0 0;
}

#rightControl {
  top: 120px;
  right:0; /* отодвигаем стрелку вправо, чем больше значение, тем правее стрелка */
  background: transparent url(http://s2.uploads.ru/54bXN.jpg) no-repeat 0 0;
}

</style>

В окно HTML низ

Код:
<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 840;
  var slides = $('.slide');
  var numberOfSlides = slides.length;
  // С помощью скрипта убираем прокрутку в контейнере.
  $('#slidesContainer').css('overflow', 'hidden');
  // Свернем все вкладки .slides в блок #slideInner 
  slides .wrapAll('<div id="slideInner"></div>')
.css({
      'float' : 'left',
      'width' : slideWidth
    });
  // Проставим блоку #slideInner ширину, равную общей ширине контейнеров
  $('#slideInner').css('width', slideWidth * numberOfSlides);
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');
  manageControls(currentPosition);
  $('.control')
    .bind('click', function(){
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    manageControls(currentPosition);
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });
  function manageControls(position){
    // Скрыть левую стрелку у первого контейнера
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Скрыть правую стрелку у последнего контейнера
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }	
});
</script>

В окно объявления

Код:
<div style="position: absolute; top:535px; left:170px;COLOR:#382d24; border: none; font-family: calibri, arial, verdana, trebuchet, sans-serif; font-size: 13.5px; line-height: 11px; margin: 3px;overflow:auto;scrollbar-face-color: #f1f0e7;scrollbar-highlight-color: #f1f0e7;scrollbar-shadow-color:#f1f0e7;scrollbar-3dlight-color: #f1f0e7;scrollbar-arrow-color:#676c66;scrollbar-track-color: #f1f0e7;scrollbar-darkshadow-color: #f1f0e7;">

<!-- Начало таблицы меню -->

<div id="slideshow">
    <div id="slidesContainer">
<!-- Первый слайд -->
	  <div class="slide">
<table cellspacing="1" cellpadding="1" border="0" style="width: 840px; height: 336px;">
<tr>
    <td align="center" valign="top" style="width: 640px; height: 230px;">
	<div style="overflow-y: auto; overflow-x: hidden; padding: 2px; width: 98%; height: 226px;">
	текст текст текст текст
	</div>
	</td>
    <td rowspan="2" align="center" style="width: 200px;">
	<div align="center" style="height: 46px; width: 99%;">Навигация</div>
	<div align="center" style="height: 46px; width: 99%;">Навигация</div>
	<div align="center" style="height: 46px; width: 99%;">Навигация</div>
	<div align="center" style="height: 46px; width: 99%;">Навигация</div>
	<div align="center" style="height: 46px; width: 99%;">Навигация</div>
	<div align="center" style="height: 46px; width: 99%;">Навигация</div>
	<div align="center" style="height: 46px; width: 99%;">Навигация</div>	
	</td>
</tr>
<tr>
    <td valign="top" style="height: 106px; padding-left:10px; padding-top: 5px;">
	Кликаем каждый день:<br>
	<img src="ссылка на баннер" alt="баннер" border="0" style="height: 60px;">&nbsp;&nbsp;&nbsp;&nbsp;
	<img src="ссылка на баннер" alt="баннер" border="0" style="height: 60px;">&nbsp;&nbsp;&nbsp;&nbsp;
	<img src="ссылка на баннер" alt="баннер" border="0" style="height: 60px;">&nbsp;&nbsp;&nbsp;&nbsp;
	</td>
</tr>
</table>
      </div>
<!-- Второй слайд -->
	  <div class="slide">
<table cellspacing="1" cellpadding="1" border="0" style="width: 840px; height: 336px;">
<tr>
    <td align="center" valign="top" style="width: 420px; height: 180px;">
	Лучший Игрок Недели<br><br>
	<img src="адрес картинки" alt="картинка анимация" width="250" height="120" border="0">
	</td>
    <td rowspan="2" align="center">
	Ник Игрока<br><br>
	<div style="overflow-y: auto; overflow-x: hidden; padding: 2px; width: 98%; height: 256px;">
	текст поста
	</div>
	<div align="center">Прочитать пост можно здесь - <a href="ссылка на пост" title="Пост игрока">Пост игрока</a></div>
	</td>
</tr>
<tr>
    <td valign="top" align="center" style="width: 420px; height: 156px;">
	Наши активисты<br><br>
	<img src="адрес картинки" alt="активисты" width="100" height="100" border="0">
	<img src="адрес картинки" alt="активисты" width="100" height="100" border="0">
	<img src="адрес картинки" alt="активисты" width="100" height="100" border="0">
	<img src="адрес картинки" alt="активисты" width="100" height="100" border="0">
	</td>
</tr>
</table>

      </div>
<!-- Третий слайд -->
	  <div class="slide">
<table cellspacing="1" cellpadding="1" border="0" style="width: 840px; height: 336px;">
<tr>
    <td align="center" valign="top" style="width: 420px; height: 160px;">
	5 вечеров с<br><br>
	<img src="адрес картинки" alt="картинка и анимация" border="0">
	</td>
    <td rowspan="2" align="center" style="width: 420px;">
	<div style="overflow-y: auto; overflow-x: hidden; padding: 2px; width: 96%; height: 326px;">
	тут что-нибудь интересное
	</div>
	</td>
</tr>
<tr>
    <td align="center">
	<div style="overflow-y: auto; overflow-x: hidden; padding: 2px; width: 96%; height: 164px;">
	текст текст текст
	</div>
	</td>
</tr>
</table>
      </div>
<!-- Четвертый слайд -->
	  <div class="slide">
<div align="center" style="width: 840px; height: 336px;">
<div align="center">Партнеры</div><br>
<img src="ссылка на большой баннер" alt="большой баннер" width="468" height="60" border="0" align="middle">
<br><br><br><br>
<div style="padding: 4px; width: 800px; height: 41px;" align="center">
<!-- -Бегущая строка -->
<marquee behavior="scroll" direction="left" width="100%" height="33" loop="0" scrollamount="7" scrolldelay="2" onMouseOver="this.stop()" onMouseOut="this.start()">
<a target="_blank" href="адрес ссылки"><img src="адрес картинки баннера" width="81" height="31"></a>
<a target="_blank" href="адрес ссылки"><img src="адрес картинки баннера" width="81" height="31"></a>
<a target="_blank" href="адрес ссылки"><img src="адрес картинки баннера" width="81" height="31"></a>
<a target="_blank" href="адрес ссылки"><img src="адрес картинки баннера" width="81" height="31"></a>
<a target="_blank" href="адрес ссылки"><img src="адрес картинки баннера" width="81" height="31"></a>
<a target="_blank" href="адрес ссылки"><img src="адрес картинки баннера" width="81" height="31"></a>
</marquee>
</div>
</div>
      </div>
   </div>
</div>

<!-- Конец меню -->

</div>

P.S. Откровенно говоря, со стрелками шириной картинки в 300 пикселей - это Вы перегнули. При ширине форума в 1150px, от этой величины сразу отнимите 600 на картинки. Остается 550. А у Вас на втором слайде 4 картинки по 100 пикселей.  Вот и выходит, что на пост игрока в том же слайде остается ширина 150 пикселей всего. В общем, я бы рекомендовал Вам картинки стрелок уменьшить.

0

5

  • Автор: Cirra
  • Бестелесный дух прошлого
  • Cirra
  • Уважение: +0

Кофеман
Спасибо. А как уменьшить стрелки? И куда потом их вставить?

0

6

  • Автор: Cirra
  • Бестелесный дух прошлого
  • Cirra
  • Уважение: +0

И на сколько уменьшить?

0

7

  • Автор: Cirra
  • Бестелесный дух прошлого
  • Cirra
  • Уважение: +0

А как сделать, что бы стрелка была в левом нижнем углу?

0

8

  • Автор: Кофеман
  • Бестелесный дух прошлого
  • Кофеман
  • Уважение: +30
Cirra написал(а):

Кофеман
Спасибо. А как уменьшить стрелки? И куда потом их вставить?

Стрелки можно перерисовать, изменив размер. Или заказать у дизайнеров графики.
Ссылки  на картинки стрелок вставляются в окне HTML верх:

#leftControl {
  top: 120px;
  left:0; /* отодвигаем стрелку влево, чем больше значение, тем левее стрелка */
  background: transparent url(http://s3.uploads.ru/W8u7j.jpg) no-repeat 0 0;
}

#rightControl {
  top: 120px;
  right:0; /* отодвигаем стрелку вправо, чем больше значение, тем правее стрелка */
  background: transparent url(http://s2.uploads.ru/54bXN.jpg) no-repeat 0 0;
}

Красным - ссылки на картинки стрелок
Синим - отступ стрелки сверху

Cirra написал(а):

И на сколько уменьшить?

Не знаю, дизайн таблицы Вы сами придумали. Я лишь высказал сомнение, что такое нагромождение всего, при маленькой ширине форума, будет выглядеть некрасиво.

0

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