Новое
На Зефире прошла небольшая реорганизация. Подробности читайте в теме Вестника

● Смена дизайна! Выражаем благодарность tørst vinden!

Зефир

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

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


Вы здесь » Зефир » Архив выполненной верстки » [Таблица] Хиторигами.


[Таблица] Хиторигами.

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

1

1. Название ролевой, ссылка:
Хиторигами
http://hitorigami.f-rpg.ru/
2. Что требуется:
Таблица:

+

http://sd.uploads.ru/t/5MoZY.png
http://se.uploads.ru/t/1c2xG.png
http://se.uploads.ru/t/G6KoO.png

3. Дополнительно:
Таблица прозрачная, без рамок.

0

2

Hannibal, здравствуйте! С радостью возьмусь за Ваш заказ, но в порядке очереди с:

0

3

`Nancy Beatlejuice, хорошо, будем ждать.

0

4

Hannibal, прошу прощения за задержку!
Если у Вас возникнут какие-либо проблемы, то обращайтесь с:

размещаете в HTML-верх
Код:
<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 468;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
.css({
      'float' : 'right',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
   
// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }
});
</script>
Это размещаете в HTML-низ
Код:
<script type="text/javascript">
$(document).ready(function() {
$("td.#MenuTxT div.submenutext").hide();
<!--$(".tabs span:first").addClass("active").show(); -->
$("td.#MenuTxT div.submenutext:first").show();
$("div.#menu span").click(function() {
    $("div.#menu span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("td.#MenuTxT div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $("div."+activeDiv).fadeIn();
    return false; });
});
</script>
Размещаете в "объявление"
Код:
<center>
<table style="width: 800px; text-align: center;">
<tr><td style="width:250px; text-align: center;">
<font style="color: #670c00; text-decoration : none; font-family: cambria; font-weight: normal; letter-spacing: -1px; font-style:italic; font-size : 17px;">НОВОСТИ</font><br>
<div style="overflow: auto; height: 100px; text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </div><br>
<hr>
<font style="color: #670c00; text-decoration : none; font-family: cambria; font-weight: normal; letter-spacing: -1px; font-style:italic; font-size : 17px;">ОЧЕРЕДНОСТЬ ПОСТОВ:</font><br>
<div style="overflow: auto; height: 100px; text-align: center;">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</td>
<td style="width:500px; text-align:center;">

<table style="width: 500px;">
 <tbody>
  <tr>
   <td valign=top; width=500px;>
    <div id="menu"> <b>
<span alt="#sm1" style="cursor: pointer;">ИГРА</span>
<span alt="#sm2" style="cursor: pointer;">НАВИГАЦИЯ</span>
<span alt="#sm3" style="cursor: pointer;">ТОП</span>

           </b>
    </div>
   </td>
</tr>
<tr>
   <td id="MenuTxT"  align="center" valign="top">
    <div id="submenu" align="center"> 
     <div id="sm1" class="submenutext" style="display:block;">
<div style="overflow: auto; height: 150px; text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

     <div id="sm2" class="submenutext">

<table width="100%"><tr><td width="50%">
<a href=ссылка на тему>Название темы</a><br>
<a href=ссылка на тему>Название темы</a><br>
<a href=ссылка на тему>Название темы</a><br>
<a href=ссылка на тему>Название темы</a><br>
<a href=ссылка на тему>Название темы</a><br>
<a href=ссылка на тему>Название темы</a><br>
<a href=ссылка на тему>Название темы</a><br>
<a href=ссылка на тему>Название темы</a><br>
<a href=ссылка на тему>Название темы</a><br>
</td>

<td width="50%"><a href=ссылка на тему>Название темы</a><br>
<a href=ссылка на тему>Название темы</a><br>
<a href=ссылка на тему>Название темы</a><br>
<a href=ссылка на тему>Название темы</a><br>
<a href=ссылка на тему>Название темы</a><br>
<a href=ссылка на тему>Название темы</a><br>
<a href=ссылка на тему>Название темы</a><br>
<a href=ссылка на тему>Название темы</a><br>
<a href=ссылка на тему>Название темы</a><br></td>
</tr></table>
 
</div>


     <div id="sm3" class="submenutext">

<table width="100%"><tr><td width="50%"><img src=ссылка на картинку><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </td>

<td width="50%"><img src=ссылка на картинку> <img src=ссылка на картинку> <img src=ссылка на картинку><br>
<img src=ссылка на картинку> <img src=ссылка на картинку> <img src=ссылка на картинку> </td>
</tr></table>
</div>
</div>

<div id="slideshow">
    <div id="slidesContainer">
      <div class="slide">
<img src=http://bleach-z.ru/files/000e/9d/8b/46995.png>     </div>

      <div class="slide">
<img src=http://bleach-z.ru/files/000e/9d/8b/46995.png>     </div>

      <div class="slide">
<img src=http://bleach-z.ru/files/000e/9d/8b/46995.png>      </div>


      <div class="slide">
<img src=http://bleach-z.ru/files/000e/9d/8b/46995.png>
      </div>
</div></div>
<br>
<img src=http://bleach-z.ru/files/000e/9d/8b/46995.png>
   </td>
</tr>
 </tbody>
</table>
</td>
</tr>

</table>

</center>
Свой стиль, style css_cs
Код:
#slideshow {
	margin:0 auto;
	width:468px;
	height: 60px;
	position:relative;
line-height: 5px;}

#slideshow #slidesContainer {
  margin:0 auto;
	width:468px;
	height: 60px;
  overflow:auto; /* allow scrollbar */
  position:relative;}
#slideshow #slidesContainer .slide {
  margin:0 auto;
	width:468px;
	height: 60px;}

.control {
  display: block;
  width: 15px;
  height: 19px;
  text-indent: -10000px;
  position: absolute;
  cursor: pointer;
  z-index: 100;
}
#leftControl {
  top: 6px; 
  left: -17px;
  background: transparent url(ссылка на стрелку влево) no-repeat 0 0;
}
#rightControl {
  top: 6px;
  right: -17px;
  background: transparent url(ссылка на стрелку вправо) no-repeat 0 0;
}

0

5

`Nancy Beatlejuice, а вот как сократить растояние?
http://se.uploads.ru/t/3B1Cl.png

0

6

Hannibal, отписалась в лс (я слоупок :'D)

0

7

http://zephyr.f-rpg.ru/files/0013/e6/99/52870.png
Спасибо,Hannibal,  что воспользовались нашими услугами! Если вам понравилась работа Верстальщика или же наоборот, оставьте свой отзыв в теме "Отзывы заказчиков о выполненной работе", нам важно знать ваше мнение.

0


Вы здесь » Зефир » Архив выполненной верстки » [Таблица] Хиторигами.


Рейтинг форумов | Создать форум бесплатно © 2007–2017 «QuadroSystems» LLC