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

Объявление

АКЦИЯ: Раздаём дизайны бесплатно

Доработаем макет под ваш проект;
Сверстаем;
Сделаем мобильную версию по желанию.

Подробнее

Поисковой ресурс

Проект от команды FD
для текстовых ролевиков

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

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Макет для сайта «Fantasy Calalogue»

Детализированный макет «Fantasy catalogue» для тёмного дизайна многостраничного сайта
Стоимость при покупке эксклюзивно: 3600р
В стоимость входит корректировка макета и доработка недостающих страничек под ваш проект.

Подробнее

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

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

Подробнее
Конкурс! Интерфейс и взаимодействие! Главный приз - 2000 рублей.
Ищешь чем бы украсить свой форум или сайт к Новому году? 🎄 Мы поможем нарядиться! 🎄
❗ ❗ ❗ Technical work is underway. Something here and there may be crooked. We'll fix it soon. :)

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

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



[Выполнено] Таблица.

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

1

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

актуально

0

3

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

+1

4

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

0

5

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

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

0

7

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

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

0

9

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

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

0