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

Объявление

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

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

Подробнее

Мийрон

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

Подробнее

Дизайн «Warlords of Draenor»

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

Подробнее

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

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

Подробнее

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

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

Предложения

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

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


Вы здесь » ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка » Верстка и скрипты » [выполнено]Таблица. Фентези. Параллельный мир.


[выполнено]Таблица. Фентези. Параллельный мир.

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

1

Возможно, как модер, я что-то упущу, но вроде поняла все предпочтения...
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

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

0

3

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

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

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

0

5

объявление

Код:
<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

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

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

0

7

ALOC написал(а):

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

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

0

8

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

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

0

10

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

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

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

0


Вы здесь » ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка » Верстка и скрипты » [выполнено]Таблица. Фентези. Параллельный мир.