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

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

Возможно, как модер, я что-то упущу, но вроде поняла все предпочтения...
1. Ссылка на форум:
http://parallelworld.3bb.ru/
2. Эскиз таблицы:
http://uploads.ru/t/z/q/A/zqARE.png
http://uploads.ru/t/C/w/n/CwnBZ.png
http://uploads.ru/t/8/F/1/8F1Dm.png

3. Дополнительные предпочтения:
1. Мы немного переименовались и лучше будет в приветствии: Tio: parallel world
2. http://uploads.ru/i/T/n/0/Tn0ce.png
http://uploads.ru/i/Y/K/V/YKVRC.png
стрелки.

0

2

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

ALOC
[mod]Принято[/mod]

0

3

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

ALOC
верх

Код:
<style type="text/css">
<!--
#slideshow {
margin:0 auto;
width:600px;
height:360px;
position:relative;
}
#slideshow #slidesContainer {
  margin:0 auto;
  width:460px;
  height:360px;
  overflow:auto; /* поддержка прокрутки */
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:420px; /* На двадцать пикселев меньше чем ширина #slidesContainer */
  height:360px;
}
.control {
  display:block;
  width:40px;
  height:40px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
  z-index:100;}
#leftControl {
  top:125px;
  left:0;
  background:transparent url(http://uploads.ru/i/T/n/0/Tn0ce.png) no-repeat 0 0;
}
#rightControl {
  top:125px;
  left:550px;
  background:transparent url(http://uploads.ru/i/Y/K/V/YKVRC.png) no-repeat 0 0;
}
.slide h2, .slide p {
  margin:15px;
}
.slide img {
  float:right;
  margin:0 15px;
}


-->
</style>

низ

Код:
<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 460;
  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 id="slideshow">
    <div id="slidesContainer">
      <div class="slide"><center><b>Вас приветствует ролевая Tio: parallel world</b></center>
<table width="100%">
<tr>
<td valign="top"  width="40%"><div style=" border: 1px solid #55423a; padding: 5px; height: 320px; ">
    <center>Управление ролевой
<table width="200px" height="300px">
<tr>
<td width="100px" height="90px"><center><img src="картинка1"><br>текст</td></center>
<td width="100px" height="90px"><center><img src="ссылка на картинку 2"><br>текст</center></td>
</tr>
<tr>
<td width="100px" height="90px"><center><img src="картинка3"><br>текст</center></td>
<td width="100px" height="90px"><center><img src="картинка4"><br>текст</center></td>
</tr><tr>
<td><center><img src="картинка4"><br>текст</center></td><td><center><img src="к5"><br>текст</center></td>
</tr>
</table></center></div></td><td valign="top" ><div style="margin-left:15px; "><div style=" border: 1px solid #55423a; padding: 5px; height: 320px; ">
<center><b>Полезные ссылки</b><br><br><a href="ссылка">название ссылки</a><br><a href="ссылка">название ссылки</a></center>
</div></div></td>
</tr>
</table></div>
<div class="slide"><table width="100%" >
<tr>
<td width="40%"><center><img src="ссылка на картинку 2"><br>текст</center></td>
<td><div style="margin-left:15px; ">Лучший пост:<div style=" border: 1px solid #55423a; padding: 5px; height: 320px; ">
<div style="width: 100%; height: 310px; overflow-y: scroll;">текст</div>
</div></div></td>
</tr>
</table>
</div>
<div class="slide">Реклама<div style=" border: 1px solid #55423a; padding: 5px; height: 30px; ">Ник <br>пароль
</div>
Баннеры<div style=" border: 1px solid #55423a; padding: 5px; height: 120px; ">Баннеры
</div>
Реклама<div style=" border: 1px solid #55423a; padding: 5px; height: 120px; ">Реклама
</div></div>
</div>
</div>

0

4

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

Бу
отлично, только можно ещё вставить один раздел в таблицу:

http://s1.uploads.ru/t/xRSjI.jpg

0

5

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

объявление

Код:
<div id="slideshow">
    <div id="slidesContainer">
      <div class="slide"><center><b>Вас приветствует ролевая Tio: parallel world</b></center>
<table width="100%">
<tr>
<td valign="top"  width="40%"><div style=" border: 1px solid #55423a; padding: 5px; height: 320px; ">
    <center>Управление ролевой
<table width="200px" height="300px">
<tr>
<td width="100px" height="90px"><center><img src="картинка1"><br>текст</td></center>
<td width="100px" height="90px"><center><img src="ссылка на картинку 2"><br>текст</center></td>
</tr>
<tr>
<td width="100px" height="90px"><center><img src="картинка3"><br>текст</center></td>
<td width="100px" height="90px"><center><img src="картинка4"><br>текст</center></td>
</tr><tr>
<td><center><img src="картинка4"><br>текст</center></td><td><center><img src="к5"><br>текст</center></td>
</tr>
</table></center></div></td><td valign="top" ><div style="margin-left:15px; "><div style=" border: 1px solid #55423a; padding: 5px; height: 320px; ">
<center><b>Полезные ссылки</b><br><br><a href="ссылка">название ссылки</a><br><a href="ссылка">название ссылки</a></center>
</div></div></td>
</tr>
</table></div>
<div class="slide"><table width="100%" >
<tr>
<td width="40%"><center><img src="ссылка на картинку 2"><br>текст</center></td>
<td><div style="margin-left:15px; ">Лучший пост:<div style=" border: 1px solid #55423a; padding: 5px; height: 320px; ">
<div style="width: 100%; height: 310px; overflow-y: scroll;">текст</div>
</div></div></td>
</tr>
</table>
</div>
<div class="slide">Реклама<div style=" border: 1px solid #55423a; padding: 5px; height: 30px; ">Ник <br>пароль
</div>
Баннеры<div style=" border: 1px solid #55423a; padding: 5px; height: 120px; ">Баннеры
</div>
Реклама<div style=" border: 1px solid #55423a; padding: 5px; height: 120px; ">Реклама
</div></div>
<div class="slide"><table width="100%">
<tr>
<td valign="top"  width="50%"><div style=" border: 1px solid #55423a; padding: 5px; height: 320px; ">
<div style="width: 100%; height: 310px; overflow-y: scroll;">текст</div></td>
<td><div style="margin-left:15px; "><div style=" border: 1px solid #55423a; padding: 5px; height: 320px; ">
<div style="width: 100%; height: 310px; overflow-y: scroll;">текст</div></div></td></tr>
</table>
</div>

</div>
</div>

0

6

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

Бу
имелось ввиду типо бегущей строки только вниз. и раз таблица занимает так мало места, то есть там оно ещё осталось если сдвинуть таблицу. то можно её к левому краю, а в оставшееся место типо такого отсека, как здесь - http://themorion.ru/

теперь вот точно всё)

0

7

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

имелось ввиду типо бегущей строки только вниз.

Так вам нужна бегущая строка? Там где первый столбик текста?

0

8

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

ALOC

Код:
<table width="100%" >
<tr>
<td width="60%"><div id="slideshow">
    <div id="slidesContainer">
      <div class="slide"><center><b>Вас приветствует ролевая Tio: parallel world</b></center>
<table width="100%">
<tr>
<td valign="top"  width="40%"><div style=" border: 1px solid #55423a; padding: 5px; height: 320px; ">
    <center>Управление ролевой
<table width="200px" height="300px">
<tr>
<td width="100px" height="90px"><center><img src="картинка1"><br>текст</td></center>
<td width="100px" height="90px"><center><img src="ссылка на картинку 2"><br>текст</center></td>
</tr>
<tr>
<td width="100px" height="90px"><center><img src="картинка3"><br>текст</center></td>
<td width="100px" height="90px"><center><img src="картинка4"><br>текст</center></td>
</tr><tr>
<td><center><img src="картинка4"><br>текст</center></td><td><center><img src="к5"><br>текст</center></td>
</tr>
</table></center></div></td><td valign="top" ><div style="margin-left:15px; "><div style=" border: 1px solid #55423a; padding: 5px; height: 320px; ">
<center><b>Полезные ссылки</b><br><br><a href="ссылка">название ссылки</a><br><a href="ссылка">название ссылки</a></center>
</div></div></td>
</tr>
</table></div>
<div class="slide"><table width="100%" >
<tr>
<td width="40%"><center><img src="ссылка на картинку 2"><br>текст</center></td>
<td><div style="margin-left:15px; ">Лучший пост:<div style=" border: 1px solid #55423a; padding: 5px; height: 320px; ">
<div style="width: 100%; height: 310px; overflow-y: scroll;">текст</div>
</div></div></td>
</tr>
</table>
</div>
<div class="slide">Реклама<div style=" border: 1px solid #55423a; padding: 5px; height: 30px; ">Ник <br>пароль
</div>
Баннеры<div style=" border: 1px solid #55423a; padding: 5px; height: 120px; ">Баннеры
</div>
Реклама<div style=" border: 1px solid #55423a; padding: 5px; height: 120px; ">Реклама
</div></div>
<div class="slide"><table width="100%">
<tr>
<td valign="top"  width="50%"><div style=" border: 1px solid #55423a; padding: 5px; height: 320px; ">
<marquee  id=abc  scrollamount="3"  behavior=scroll direction=down height="310" width="150" onMouseOut="document.all.abc.start()" onMouseOver="document.all.abc.stop()"> текст  в бегущей строке</marquee></td>
<td><div style="margin-left:15px; "><div style=" border: 1px solid #55423a; padding: 5px; height: 320px; ">
<div style="width: 100%; height: 310px; overflow-y: scroll;">текст</div></div></td></tr>
</table>
</div>

</div>
</div></td>
<td >текст 
</tr>
</table>

0

9

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

Бу
всё отлично, остался один вопрос. как я могу подставить фоном в каждому разделу картинку?

0

10

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

ALOC
обрамить каждый раздел в теги

<div style="background-image: url(ссылка на картинку);
background-repeat : no-repeat;"> текст </div>

no-repeat; картинка не будет повторяться
repeat-y; повторение фона по вертикали
repeat-x; по горизонтали
repeat; Фоновое изображение повторяется по горизонтали и вертикали.
Только добавление фона может вызвать еще ряд заморочек, в частности нужно будет регулировать ширину и высоту окошек слайдера, регулировать отступ текста и прочее.

0

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