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. Ссылка на форум:pelagonium.spybb.ru
2. Эскиз таблицы: http://cs416123.vk.me/v416123322/58de/MSHtQGMmvnA.jpg
http://cs416123.vk.me/v416123322/58e6/Lr9VLZJOyAM.jpg
3. Дополнительные предпочтения:Категории в таблицу-не нужны.
Нужны золотистые стрелочки, небольшого размера; обыкновенные слова, как на эскизе, "локация: 1: 2: 3:.."

0

2

Messallo Sollamarro
Принимаю, в течение часа сделаю.

0

3

Messallo Sollamarro
Извиняюсь за столь долгий час ;)

HTML-верх
Код:
<style type="text/css">
#slideshow {
 margin:0 auto;
 width:500px;
 height:226px;
 position:relative;
}

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

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

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

#leftControl {
top: 63px;
left: -50px;
background: transparent url(http://www.iconsearch.ru/uploads/icons/humano2/48x48/first-page.png) no-repeat 0 0;
}

#rightControl {
top: 68px;
right: -50px;
background: transparent url(http://www.iconsearch.ru/uploads/icons/humano2/48x48/finish.png) no-repeat 0 0;
}

</style>
HTML-низ
Код:
<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 500;
  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>

$(document).ready(function() {


	$(".tab_content").hide(); 
	$("ul.tabs li:first").addClass("active").show();
	$(".tab_content:first").show();
	
	$("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");
    $(".tab_content").hide();
    var activeTab = $(this).find("a").attr("href");
    $(activeTab).fadeIn();
    return false;
	});

});

</script>
Объявление
Код:
<center>
<div id="slideshow">
    <div id="slidesContainer">
<!-- Первый слайд -->
	  <div class="slide">
        <table border="1" cellpadding="1" cellspacing="1" style="width: 500px; height: 200px;">
    	<tbody>
        <tr>
        	<td style="text-align: center;">
            <b>События</b><p>текст текст текст текст текст текст текст текст текст </td>
        	<td style="text-align: center;">
            <b>Сюжет</b><p>текст текст текст текст текст текст текст текст текст </td>
        	<td style: "overflow-x: scroll;"  style="text-align: center;">
            <b>Время и погода</b><p>текст текст текст текст текст текст текст текст текст </td>
        </tr>
    	</tbody>
    </table>
      </div>
<!-- Второй слайд -->
	  <div class="slide">
        <table border="1" cellpadding="1" cellspacing="1" style="width: 500px; height: 200px;">
    	<tbody>
        <tr>
        	<td style="text-align: center;">
            <b>Локация</b>
<p>1. <a href="профиль">НИК</a>
<p>2. <a href="профиль">НИК</a>
<p>3. <a href="профиль">НИК</a>
<p>4. <a href="профиль">НИК</a></td>
        	<td style="text-align: center;">
            <b>Локация</b>
<p>1. <a href="профиль">НИК</a>
<p>2. <a href="профиль">НИК</a>
<p>3. <a href="профиль">НИК</a>
<p>4. <a href="профиль">НИК</a></td>
        	<td style="text-align: center;">
            <b>Локация</b>
<p>1. <a href="профиль">НИК</a>
<p>2. <a href="профиль">НИК</a>
<p>3. <a href="профиль">НИК</a>
<p>4. <a href="профиль">НИК</a></td>
        	<td rowspan="2"  style: "overflow-x: scroll;"  style="text-align: center;">
            <b>Реклама</b><p>текст текст текст текст текст текст текст текст текст<p>
            <b>Баннеры</b><p>текст текст текст текст текст текст текст текст текст<p>
            <b>Партнеры</b><p>текст текст текст текст текст текст текст текст текст<p></td>
        </tr>
        <tr>
        	<td style="text-align: center;">
            <b>Локация</b>
<p>1. <a href="профиль">НИК</a>
<p>2. <a href="профиль">НИК</a>
<p>3. <a href="профиль">НИК</a>
<p>4. <a href="профиль">НИК</a></td>
        	<td style="text-align: center;">
            <b>Локация</b>
<p>1. <a href="профиль">НИК</a>
<p>2. <a href="профиль">НИК</a>
<p>3. <a href="профиль">НИК</a>
<p>4. <a href="профиль">НИК</a></td>
        	<td style="text-align: center;">
            <b>Локация</b>
<p>1. <a href="профиль">НИК</a>
<p>2. <a href="профиль">НИК</a>
<p>3. <a href="профиль">НИК</a>
<p>4. <a href="профиль">НИК</a></td>
        </tr>
    	</tbody>
    </table>
      </div>
   </div>
</div>
</center>
Стрелки

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

#leftControl {
top: 63px;
left: -50px;
background: transparent url(http://www.iconsearch.ru/uploads/icons/humano2/48x48/first-page.png) no-repeat 0 0;
}

#rightControl {
top: 68px;
right: -50px;
background: transparent url(http://www.iconsearch.ru/uploads/icons/humano2/48x48/finish.png) no-repeat 0 0;
}

Это - размеры. в блоках #left и #rightControl - позиция стрелок.
Это - адрес стрелки.
Собственно, могу подогнать под другие стрелки, если дадите их ;)

0

4

Спасибо, суперски!

0

5

ээ. а стрелочки куда совать?)

0

6

опа-на. на маленькая совсем.

0

7

Messallo Sollamarro написал(а):

ээ. а стрелочки куда совать?)

#leftControl {
top: 63px;
left: -50px;
background: transparent url(http://www.iconsearch.ru/uploads/icons/humano2/48x48/first-page.png) no-repeat 0 0;
}
#rightControl {
top: 68px;
right: -50px;
background: transparent url(http://www.iconsearch.ru/uploads/icons/humano2/48x48/finish.png) no-repeat 0 0;
}

Это - ссылки на стрелки.

Messallo Sollamarro написал(а):

опа-на. на маленькая совсем.

В ширину-высоту сколько нужно?)

0

8

ну, я точно не наю, но под ширину форума что бы подходила. и прокрутка не работает совсем.

0

9

Messallo Sollamarro
можно ссылку на форум? у меня открывает страницу сервиса.

0

10

Messallo Sollamarro
попробуйте так:

HTML-верх
Код:
<style type="text/css">
<!--
#slideshow {
margin: 0 auto;
width: 900px;
height: 250px;
background: transparent;
position: relative;
}
#slideshow #slidesContainer {
margin: 0 auto;
width: 900px; 
height: 250px;
position: relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:880px; /* На двадцать пикселей меньше чем ширина #slidesContainer */
  height:250px;
}
.control {
  display:block;
  width:44px; /* ширина стрелок */
  height:125px; /* высота стрелок */
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top:0;
 right:900px; /* отодвигаем стрелку влево, чем больше значение, тем левее стрелка */
  background:transparent url(http://www.iconsearch.ru/uploads/icons/humano2/48x48/first-page.png) no-repeat 0 0;
}
#rightControl {
  top:0;
  left:900px;  /* отодвигаем стрелку вправо, чем больше значение, тем правее стрелка */
  background:transparent url(http://www.iconsearch.ru/uploads/icons/humano2/48x48/finish.png) no-repeat 0 0;
}
.slide h2, .slide p {
  margin:5px;
}

.layer {
text-align: center;
overflow-y: scroll;
height: 100%;
width: 98%;
padding: 5px;
}
</style>
HTML-низ
Код:
<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 900;
  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>
Объявление
Код:
<center><div id="slideshow">
    <div id="slidesContainer">
<div class="slide">
        <table border="1" cellpadding="1" cellspacing="1" style="width: 900px;height: 100%;">
    	<tbody>
        <tr>
        	<td style="text-align: center;">
            <b>События</b><p>текст текст текст текст текст текст текст текст текст </td>
        	<td style="text-align: center;">
            <div class="layer"> <b>Сюжет</b><p>текст текст текст текст текст текст текст текст текст </div> </td>
        	<td style="overflow-x: scroll; text-align: center;">
            <b>Время и погода</b><p>текст текст текст текст текст текст текст текст текст </td>
        </tr>
    	</tbody>
    </table>
</div>

<div class="slide">
       <table border="1" cellpadding="1" cellspacing="1" style="width: 900px; height: 100%;">
    	<tbody>
        <tr>
        	<td style="text-align: center;">
            <b>Локация</b>
<p>1. <a href="профиль">НИК</a>
<p>2. <a href="профиль">НИК</a>
<p>3. <a href="профиль">НИК</a>
<p>4. <a href="профиль">НИК</a></td>
        	<td style="text-align: center;">
            <b>Локация</b>
<p>1. <a href="профиль">НИК</a>
<p>2. <a href="профиль">НИК</a>
<p>3. <a href="профиль">НИК</a>
<p>4. <a href="профиль">НИК</a></td>
        	<td style="text-align: center;">
            <b>Локация</b>
<p>1. <a href="профиль">НИК</a>
<p>2. <a href="профиль">НИК</a>
<p>3. <a href="профиль">НИК</a>
<p>4. <a href="профиль">НИК</a></td>
        	<td rowspan="2"><div class="layer"> 
            <b>Реклама</b><p>текст текст текст текст текст текст текст текст текст<p>
            <b>Баннеры</b><p>текст текст текст текст текст текст текст текст текст<p>
            <b>Партнеры</b><p>текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст <p></div></td>
        </tr> 
        <tr>
        	<td style="text-align: center;">
            <b>Локация</b>
<p>1. <a href="профиль">НИК</a>
<p>2. <a href="профиль">НИК</a>
<p>3. <a href="профиль">НИК</a>
<p>4. <a href="профиль">НИК</a></td>
        	<td style="text-align: center;">
            <b>Локация</b>
<p>1. <a href="профиль">НИК</a>
<p>2. <a href="профиль">НИК</a>
<p>3. <a href="профиль">НИК</a>
<p>4. <a href="профиль">НИК</a></td>
        	<td style="text-align: center;">
            <b>Локация</b>
<p>1. <a href="профиль">НИК</a>
<p>2. <a href="профиль">НИК</a>
<p>3. <a href="профиль">НИК</a>
<p>4. <a href="профиль">НИК</a></td>
        </tr>
    	</tbody>
    </table>
</div>
    </div>
</center>

Стрелки менять здесь:

HTML-верх

.control {
  display:block;
  width:44px; /* ширина стрелок */
  height:125px; /* высота стрелок */
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top:0;
right:900px; /* отодвигаем стрелку влево, чем больше значение, тем левее стрелка */
  background:transparent url(http://www.iconsearch.ru/uploads/icons/humano2/48x48/first-page.png) no-repeat 0 0;
}
#rightControl {
  top:0;
  left:900px;  /* отодвигаем стрелку вправо, чем больше значение, тем правее стрелка */
  background:transparent url(http://www.iconsearch.ru/uploads/icons/humano2/48x48/finish.png) no-repeat 0 0;
}

Эти значения подписаны
Это - ссылка на картинку стрелки

0