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

Объявление

GEMcross

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

Посетить

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

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

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

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

🔥 Новинка в портфолио: ДИЗАЙН ФОРУМА В СТИЛЕ ФЭНТЭЗИ С ПРОЗРАЧНОСТЬЮ

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

Посмотреть

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

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

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

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

Поиск роли на текстовых ролевых
Проект от специалистов 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 страница 10 из 10

1

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

1. Ссылка на форум: http://chaosgeneration.rolevaya.com/
2. Эскиз таблицы:

эскизы

http://s4.uploads.ru/Q6S91.jpg
http://s4.uploads.ru/txbHZ.png
http://s4.uploads.ru/Qosya.png
http://s5.uploads.ru/0MV8E.jpg

3. Дополнительные предпочтения:
Плеер будет такого типа  Ccылка

Отредактировано Jii-Jo (01.09.13 15:12)

0

2

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

актуально

0

3

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

BBS
Заказ принимаю. (:
Сколько нужно слайдов?

+1

4

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

Jii-Jo
Ура)))
4 слайда)

0

5

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

BBS
Пробуем:

HTML-верх
Код:
<style type="text/css">
#slideshow {
 margin:0 auto;
 width:234px;
 height: 263px;
 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 !important;
  width: 96px;
  height: 34px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
  z-index: 2;
}

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

#rightControl {
  top: 224px;
  right:2px; /* отодвигаем стрелку вправо, чем больше значение, тем правее стрелка */
  background: transparent url(http://s4.uploads.ru/txbHZ.png) 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="width: 100px; height: 60px;  margin-left: 390px;  ">
<p style="padding-top: 130px;">
<script language="javascript">
var links = new Array("1_баннер", "2_баннер");
var los = Math.floor(Math.random() * links.length)
document.write (links[los]);
</script>
</p>
</div>

<table border="0" cellpadding="1" cellspacing="1" style="width: 790px; height: 463px; background: url(http://s5.uploads.ru/0MV8E.jpg);">
    	<tbody>
        <tr>
        	<td style="width: 490px; height: 190px; padding: 2px;">
            <div style="margin-left: 22px; margin-bottom: 40px; margin-top: 59px; height: 130px; width: 323px; overflow-y: scroll;">
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст 
</div></td>
        	<td rowspan="3" style="width: 245px; height: 455px; padding: 2px;">
            <div style="overflow-y: scroll; overflow-x: hidden; width: 250px; height: 280px; margin-left: 19px; margin-top: 86px;">
<!-- Начало таблицы меню -->

<div id="slideshow">
    <div id="slidesContainer">
<!-- Первый слайд -->
	  <div class="slide">
Первый слайд
      </div>

<!-- Второй слайд -->
	  <div class="slide">
Второй слайд
      </div>

<!-- Третий слайд -->
	  <div class="slide">
Третий слайд
      </div>

<!-- Четвертый слайд -->
	  <div class="slide">
Четвертый слайд
   </div>

</div>

<!-- Конец меню -->
</div></td>
        </tr>
        <tr>
        	<td style="width: 490px; height: 170px; padding: 2px;">
            <div style="width: 468px; height: 120px; margin-bottom: 16px; margin-left: 22px; overflow-y: scroll;">
<p>2Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст 
</div></td>
        </tr>
        <tr>
        	<td style="width: 490px; padding: 2px;">
            <div style="width: 368px; height: 40px; margin-left: 34px; margin-top: -26px; overflow: hidden;">
<p>3Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст 
</div></td>
        </tr>
    	</tbody>
    </table>

+1

6

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

Jii-Jo, все замечательно, но можно ли сделать так, что бы стрелки в слайдах не ездили наверх?

0

7

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

BBS
Попробуйте так:

HTML-низ
Код:
<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 243;
  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>
HTML-верх
Код:
<style type="text/css">
#slideshow {
 margin:0 auto;
 width:234px;
 height: 248px;
 position:relative;
}

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

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

.control {
  display: block !important;
  width: 96px;
  height: 34px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
  z-index: 2;
}

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

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

</style>

Отредактировано Jii-Jo (01.09.13 13:05)

0

8

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

Jii-Jo
Полоса прокрутки все равно видна.. и их почему-то стало две.
Может заменить слайд на вкладки раз не получается?

0

9

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

BBS
Я гениален. ._. забыла скинуть объявление.

Объявление
Код:
<div style="width: 100px; height: 60px;  margin-left: 390px;  ">
<p style="padding-top: 130px;">
<script language="javascript">
var links = new Array("1_баннер", "2_баннер");
var los = Math.floor(Math.random() * links.length)
document.write (links[los]);
</script>
</p>
</div>

<table border="0" cellpadding="1" cellspacing="1" style="width: 790px; height: 463px; background: url(http://s5.uploads.ru/0MV8E.jpg);">
    	<tbody>
        <tr>
        	<td style="width: 490px; height: 190px; padding: 2px;">
            <div style="margin-left: 22px; margin-bottom: 40px; margin-top: 59px; height: 130px; width: 323px; overflow-y: scroll;">
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст 
</div></td>
        	<td rowspan="3" style="width: 245px; height: 455px; padding: 2px;">
            <div style="overflow: hidden; width: 250px; height: 280px; margin-left: 19px; margin-top: 86px;">
<!-- Начало таблицы меню -->

<div id="slideshow">
    <div id="slidesContainer">
<!-- Первый слайд -->
	  <div class="slide">
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст 
      </div>

<!-- Второй слайд -->
	  <div class="slide">
Второй слайд
      </div>

<!-- Третий слайд -->
	  <div class="slide">
Третий слайд
      </div>

<!-- Четвертый слайд -->
	  <div class="slide">
Четвертый слайд
   </div>

</div>

<!-- Конец меню -->
</div></td>
        </tr>
        <tr>
        	<td style="width: 490px; height: 170px; padding: 2px;">
            <div style="width: 468px; height: 120px; margin-bottom: 16px; margin-left: 22px; overflow-y: scroll;">
<p>2Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст 
</div></td>
        </tr>
        <tr>
        	<td style="width: 490px; padding: 2px;">
            <div style="width: 368px; height: 40px; margin-left: 34px; margin-top: -26px; overflow: hidden;">
<p>3Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст 
</div></td>
        </tr>
    	</tbody>
    </table>

+1

10

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

Jii-Jo
Огромное спасибо за проделанную работу))

0

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