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

Объявление

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

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

Подробнее

Мийрон

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

Подробнее

Дизайн «Warlords of Draenor»

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

Подробнее

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

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

Подробнее

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

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

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

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

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



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

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

1

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

Извините, вот правильный вариант:
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

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

0

4

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

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

0

6

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

0

7

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

0

8

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