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

Объявление

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

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

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

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

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

Предложения
На форуме идут технические работы. Кое-что кое-где может отображаться криво. Мы скоро всё поправим. :)

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

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



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

Сообщений 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.2013 15:12:03)

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.2013 13:05:59)

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