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 из 28

1

1. Ссылка на форум:http://lokirol.rusff.ru/
2. Эскиз таблицы: http://s6.uploads.ru/t/xjizl.png

3. Дополнительные предпочтения: фон внутри посветлее,чем фон форума.

Кнопка-картинка

http://s7.uploads.ru/t/0ARG8.png

0

2

если не открывается

http://s6.uploads.ru/ClOpd.png

вот эти вкладки Вертикальный "аккордеон"

0

3

Ария
Принимаю. Не уверена, но попробовать стоит) К понедельнику будет http://uploads.ru/i/g/p/f/gpfN7.gif

0

4

Ария
Получилось только так отодвинуть, ибо при изменении разрешения оно остается на прежнем месте оО
Если нужны скрипты, которые вы не можете установить/найти и тп.(мало ли), то напишите - поставлю в код http://uploads.ru/i/7/H/w/7Hwsf.gif

Код:
<div id="accordion" style="margin: -530px 0 0 -110px;"> 
    <div class="item">
      <a href="#">Раздел 1</a>
      <p>
      Lorem ipsum nec ex prompta tractatos.
      Ea elit sale admodum vim, at velit nemore rationibus per.
      Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei.
      Mel legere mucius ne, adhuc impetus signiferumque cu eos.
      Has an zzril soluta impetus.
      An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.
      </p>
    </div>
    <div class="item">
      <a href="#">Раздел 2</a>
      <p>
      Lorem ipsum nec ex prompta tractatos. 
      Ea elit sale admodum vim, at velit nemore rationibus per. 
      Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. 
      Mel legere mucius ne, adhuc impetus signiferumque cu eos. 
      Has an zzril soluta impetus. 
      An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.
      </p>
    </div>
    <div class="item">
      <a href="#">Раздел 3</a>
      <p>Lorem ipsum nec ex prompta tractatos. 
      Ea elit sale admodum vim, at velit nemore rationibus per. 
      Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. 
      Mel legere mucius ne, adhuc impetus signiferumque cu eos. 
      Has an zzril soluta impetus. 
      An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.
      </p>
    </div>
    <div class="item">
      <a href="#">Раздел 4</a>
      <p>Lorem ipsum nec ex prompta tractatos. 
      Ea elit sale admodum vim, at velit nemore rationibus per. 
      Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. 
      Mel legere mucius ne, adhuc impetus signiferumque cu eos. 
      Has an zzril soluta impetus. 
      An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.
      </p>
    </div>
  </div>

<style>

#accordion .item {
    width: 250px;
    height: 30px;
    overflow: hidden;
     
    transition: height ease-in-out 500ms;
    -o-transition: height ease-in-out 500ms;
    -moz-transition: height ease-in-out 500ms;
    -webkit-transition: height ease-in-out 500ms;
     
    background: #ccc;
    border: 1px solid #ccc;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
     
    margin-bottom: 2px;
}
#accordion a {
    display: block;
    height: 20px;
    line-height: 20px;
     
    background: #e6e6e6;
    padding: 5px;
    color: #1e1e1e;
    text-decoration: none;
}
#accordion p {
    height: 150px;
    padding: 5px;
}
#accordion div:hover {
    height: 180px;
}
#accordion div:hover a {
    border-bottom: 1px solid #ccc;
    font-weight: bold;
}
</style>

0

5

Jii-Jo
попробовала на тестовике.
получается, что таблицу тоже двигает, я куда-то не куда вставила?
http://narutoklan2.spybb.ru/

0

6

Ария
Если можно, то код таблицы. можно под хайд 760.

Отредактировано Jii-Jo (08.12.13 10:41)

0

7

Jii-Jo написал(а):

можно под хайд 76

без понятия что это.

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

0

8

Ария
Ставится в объявление, сразу после заключительного дива.

Код:
<ul class="tabs">
    <li class="active"><a href="#tab1">Новости</a></li>
    <li><a href="#tab2">Администрация</a></li>
    <li><a href="#tab3">Обновления</a></li>
</ul>
      <div class="tab_container1">
<div style="display: block;" id="tab1" class="tab_content">
<div class="post-box">
        <div class="post-content">
        <table style="table-layout:fixed;width:100%"><tbody><tr><td><p><span style="display: block; text-align: center"><span style="font-family: Impact">Рады Вас приветствовать на ролевом проекте "Don`t lie"</span><br>Тематика нашей ролевой базируется на событиях комиксов и фильмов MARVEL, также на мотивах скандинавской мифологии. <br>Мы имеем альтернативный сюжет и индивидуальные цепочки квестов для каждого персонажа. <br>Мы принимаем ВСЕХ персонажей вселенной MARVEL и разношерстных не канонов. <br>Возможно создание персонажа-животного.</span></p></td><td><p><img class="postimg" src="http://s7.uploads.ru/t/Kosdt.gif" alt="http://s7.uploads.ru/t/Kosdt.gif"></p></td><td><p><span style="font-size: 16px"><span style="display: block; text-align: center"><span style="font-family: Impact"><span style="color: green">Нужные ссылки : </span></span><br><a href="http://lokirol.rusff.ru/click.php?http://lokirol.rusff.ru/viewtopic.php?id=12" rel="nofollow" target="_blank">Правила</a><br><a href="http://lokirol.rusff.ru/click.php?http://lokirol.rusff.ru/viewtopic.php?id=4" rel="nofollow" target="_blank">Способности</a><br><a href="http://lokirol.rusff.ru/click.php?http://lokirol.rusff.ru/viewtopic.php?id=32#p82" rel="nofollow" target="_blank">Акции</a><br><a href="http://lokirol.rusff.ru/click.php?http://lokirol.rusff.ru/viewtopic.php?id=31#p124" rel="nofollow" target="_blank">Сюжетквесты</a><br><a href="http://lokirol.rusff.ru/click.php?http://lokirol.rusff.ru/register.php" rel="nofollow" target="_blank">Самое важное</a></span></span></p></td></tr></tbody></table>
        </div>
</div>
                               
</div>
<div style="display: none;" id="tab2" class="tab_content">
<div class="post-box">
        <div class="post-content">
        <p><a href="http://lokirol.rusff.ru/click.php?http://lokirol.rusff.ru/profile.php?id=2" rel="nofollow" target="_blank"><span style="font-family: Impact"><span style="color: green">Himera Lucescere</span></span></a> <span style="font-family: Lucida Console">- создатель, гл.админ, по сути своей беззлобное,но строгое существо. Обожает, выдумывать безумные квесты.<br>По всем вопросом обращать к ней. Единственные человек, которые понимает в чем суть сюжета.</span><br>Связь: <a href="http://lokirol.rusff.ru/click.php?http://vk.com/id108073628" rel="nofollow" target="_blank">ВКонтакте</a><br></p>
        <p><a href="http://lokirol.rusff.ru/click.php?http://lokirol.rusff.ru/profile.php?id=4" rel="nofollow" target="_blank"><span style="font-family: Impact"><span style="color: green">Кэт</span></span></a> <span style="font-family: Lucida Console">- юный энтузиаст,активно помогает на форуме, хороший советчик. Смекает в графических кодах и дизайне.</span><br><span style="font-family: Lucida Console">Связь:</span>  <a href="http://lokirol.rusff.ru/click.php?http://vk.com/id213095366" rel="nofollow" target="_blank">Вконтакте</a></p>
        <p><a href="http://lokirol.rusff.ru/click.php?http://lokirol.rusff.ru/profile.php?id=7" rel="nofollow" target="_blank"><span style="font-family: Impact"><span style="color: green">Thor Odinson</span></span></a> <span style="font-family: Lucida Console">- единственный серьезный человек на форме в настоящее время. Да, это тот герой, который разобрал раздел "Способности" и акцию. Благодарим за проделанную работу)<br></span></p>
        <p>Связь: <a href="http://lokirol.rusff.ru/click.php?http://lokirol.rusff.ru/messages.php?action=new&uid=7" rel="nofollow" target="_blank">ЛС</a></p>
        </div>
</div>
                               
</div>
<div style="display: none;" id="tab3" class="tab_content"> 

<div class="post-box">
        <div class="post-content">
        <table style="table-layout:fixed;width:100%"><tbody><tr><td><p><span style="font-family: Lucida Console"><strong><span style="display: block; text-align: center">Всегда и везде</span> </strong></span><br><span style="display: block; text-align: center">Мы постарались оптимизировать работу нашего форума через иные гаджеты, например телефоны, планшеты, нетбуки.<br>Мы справляемся с проблемой маленьких экранов, теперь любой блок форума <strong>можно свернуть</strong>, вплоть до категорий.<br>Для это кликните на иконку справа от категорийблоков.<br></span></p></td><td><p><span style="display: block; text-align: center"><span style="font-family: Lucida Console"><span style="font-size: 14px"><strong>Награды</strong></span></span><br>На форуме функционирует ряд новых наград, уже имеется первый награжденный)<br>Спешите оценить их красоту и постарайтесь заполучить одну из <a href="http://lokirol.rusff.ru/click.php?http://lokirol.rusff.ru/mod/awards/" rel="nofollow" target="_blank">них</a> </span></p></td></tr></tbody></table>
        </div>
</div>
</div>
      </div>



<div id="accordion" style="margin: -230px 0 0 -270px;"> 
    <div class="item">
      <a href="#">Раздел 1</a>
      <p>
      Lorem ipsum nec ex prompta tractatos.
      Ea elit sale admodum vim, at velit nemore rationibus per.
      Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei.
      Mel legere mucius ne, adhuc impetus signiferumque cu eos.
      Has an zzril soluta impetus.
      An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.
      </p>
    </div>
    <div class="item">
      <a href="#">Раздел 2</a>
      <p>
      Lorem ipsum nec ex prompta tractatos. 
      Ea elit sale admodum vim, at velit nemore rationibus per. 
      Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. 
      Mel legere mucius ne, adhuc impetus signiferumque cu eos. 
      Has an zzril soluta impetus. 
      An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.
      </p>
    </div>
    <div class="item">
      <a href="#">Раздел 3</a>
      <p>Lorem ipsum nec ex prompta tractatos. 
      Ea elit sale admodum vim, at velit nemore rationibus per. 
      Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. 
      Mel legere mucius ne, adhuc impetus signiferumque cu eos. 
      Has an zzril soluta impetus. 
      An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.
      </p>
    </div>
    <div class="item">
      <a href="#">Раздел 4</a>
      <p>Lorem ipsum nec ex prompta tractatos. 
      Ea elit sale admodum vim, at velit nemore rationibus per. 
      Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. 
      Mel legere mucius ne, adhuc impetus signiferumque cu eos. 
      Has an zzril soluta impetus. 
      An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.
      </p>
    </div>
  </div>

<style>

#accordion .item {
    width: 250px;
    height: 30px;
    overflow: hidden;
     
    transition: height ease-in-out 500ms;
    -o-transition: height ease-in-out 500ms;
    -moz-transition: height ease-in-out 500ms;
    -webkit-transition: height ease-in-out 500ms;
     
    background: #ccc;
    border: 1px solid #ccc;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
     
    margin-bottom: 2px;
}
#accordion a {
    display: block;
    height: 20px;
    line-height: 20px;
     
    background: #e6e6e6;
    padding: 5px;
    color: #1e1e1e;
    text-decoration: none;
}
#accordion p {
    height: 150px;
    padding: 5px;
}
#accordion div:hover {
    height: 180px;
}
#accordion div:hover a {
    border-bottom: 1px solid #ccc;
    font-weight: bold;
}
</style>

0

9

Jii-Jo
http://lokirol.rusff.ru

0

10

Ария
А если так?

Код:
<ul class="tabs">
    <li class="active"><a href="#tab1">Новости</a></li>
    <li><a href="#tab2">Администрация</a></li>
    <li><a href="#tab3">Обновления</a></li>
</ul>
      <div class="tab_container1">
<div style="display: block;" id="tab1" class="tab_content">
<div class="post-box">
        <div class="post-content">
        <table style="table-layout:fixed;width:100%"><tbody><tr><td><p><span style="display: block; text-align: center"><span style="font-family: Impact">Рады Вас приветствовать на ролевом проекте "Don`t lie"</span><br>Тематика нашей ролевой базируется на событиях комиксов и фильмов MARVEL, также на мотивах скандинавской мифологии. <br>Мы имеем альтернативный сюжет и индивидуальные цепочки квестов для каждого персонажа. <br>Мы принимаем ВСЕХ персонажей вселенной MARVEL и разношерстных не канонов. <br>Возможно создание персонажа-животного.</span></p></td><td><p><img class="postimg" src="http://s7.uploads.ru/t/Kosdt.gif" alt="http://s7.uploads.ru/t/Kosdt.gif"></p></td><td><p><span style="font-size: 16px"><span style="display: block; text-align: center"><span style="font-family: Impact"><span style="color: green">Нужные ссылки : </span></span><br><a href="http://lokirol.rusff.ru/click.php?http://lokirol.rusff.ru/viewtopic.php?id=12" rel="nofollow" target="_blank">Правила</a><br><a href="http://lokirol.rusff.ru/click.php?http://lokirol.rusff.ru/viewtopic.php?id=4" rel="nofollow" target="_blank">Способности</a><br><a href="http://lokirol.rusff.ru/click.php?http://lokirol.rusff.ru/viewtopic.php?id=32#p82" rel="nofollow" target="_blank">Акции</a><br><a href="http://lokirol.rusff.ru/click.php?http://lokirol.rusff.ru/viewtopic.php?id=31#p124" rel="nofollow" target="_blank">Сюжетквесты</a><br><a href="http://lokirol.rusff.ru/click.php?http://lokirol.rusff.ru/register.php" rel="nofollow" target="_blank">Самое важное</a></span></span></p></td></tr></tbody></table>
        </div>
</div>
                               
</div>
<div style="display: none;" id="tab2" class="tab_content">
<div class="post-box">
        <div class="post-content">
        <p><a href="http://lokirol.rusff.ru/click.php?http://lokirol.rusff.ru/profile.php?id=2" rel="nofollow" target="_blank"><span style="font-family: Impact"><span style="color: green">Himera Lucescere</span></span></a> <span style="font-family: Lucida Console">- создатель, гл.админ, по сути своей беззлобное,но строгое существо. Обожает, выдумывать безумные квесты.<br>По всем вопросом обращать к ней. Единственные человек, которые понимает в чем суть сюжета.</span><br>Связь: <a href="http://lokirol.rusff.ru/click.php?http://vk.com/id108073628" rel="nofollow" target="_blank">ВКонтакте</a><br></p>
        <p><a href="http://lokirol.rusff.ru/click.php?http://lokirol.rusff.ru/profile.php?id=4" rel="nofollow" target="_blank"><span style="font-family: Impact"><span style="color: green">Кэт</span></span></a> <span style="font-family: Lucida Console">- юный энтузиаст,активно помогает на форуме, хороший советчик. Смекает в графических кодах и дизайне.</span><br><span style="font-family: Lucida Console">Связь:</span>  <a href="http://lokirol.rusff.ru/click.php?http://vk.com/id213095366" rel="nofollow" target="_blank">Вконтакте</a></p>
        <p><a href="http://lokirol.rusff.ru/click.php?http://lokirol.rusff.ru/profile.php?id=7" rel="nofollow" target="_blank"><span style="font-family: Impact"><span style="color: green">Thor Odinson</span></span></a> <span style="font-family: Lucida Console">- единственный серьезный человек на форме в настоящее время. Да, это тот герой, который разобрал раздел "Способности" и акцию. Благодарим за проделанную работу)<br></span></p>
        <p>Связь: <a href="http://lokirol.rusff.ru/click.php?http://lokirol.rusff.ru/messages.php?action=new&uid=7" rel="nofollow" target="_blank">ЛС</a></p>
        </div>
</div>
                               
</div>
<div style="display: none;" id="tab3" class="tab_content"> 

<div class="post-box">
        <div class="post-content">
        <table style="table-layout:fixed;width:100%"><tbody><tr><td><p><span style="font-family: Lucida Console"><strong><span style="display: block; text-align: center">Всегда и везде</span> </strong></span><br><span style="display: block; text-align: center">Мы постарались оптимизировать работу нашего форума через иные гаджеты, например телефоны, планшеты, нетбуки.<br>Мы справляемся с проблемой маленьких экранов, теперь любой блок форума <strong>можно свернуть</strong>, вплоть до категорий.<br>Для это кликните на иконку справа от категорийблоков.<br></span></p></td><td><p><span style="display: block; text-align: center"><span style="font-family: Lucida Console"><span style="font-size: 14px"><strong>Награды</strong></span></span><br>На форуме функционирует ряд новых наград, уже имеется первый награжденный)<br>Спешите оценить их красоту и постарайтесь заполучить одну из <a href="http://lokirol.rusff.ru/click.php?http://lokirol.rusff.ru/mod/awards/" rel="nofollow" target="_blank">них</a> </span></p></td></tr></tbody></table>
        </div>
</div>
</div>
      </div>



<div id="accordion" style="margin: -830px 0 0 -270px; min-height: 810px;"> 
    <div class="item">
      <a href="#">Раздел 1</a>
      <p>
      Lorem ipsum nec ex prompta tractatos.
      Ea elit sale admodum vim, at velit nemore rationibus per.
      Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei.
      Mel legere mucius ne, adhuc impetus signiferumque cu eos.
      Has an zzril soluta impetus.
      An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.
      </p>
    </div>
    <div class="item">
      <a href="#">Раздел 2</a>
      <p>
      Lorem ipsum nec ex prompta tractatos. 
      Ea elit sale admodum vim, at velit nemore rationibus per. 
      Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. 
      Mel legere mucius ne, adhuc impetus signiferumque cu eos. 
      Has an zzril soluta impetus. 
      An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.
      </p>
    </div>
    <div class="item">
      <a href="#">Раздел 3</a>
      <p>Lorem ipsum nec ex prompta tractatos. 
      Ea elit sale admodum vim, at velit nemore rationibus per. 
      Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. 
      Mel legere mucius ne, adhuc impetus signiferumque cu eos. 
      Has an zzril soluta impetus. 
      An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.
      </p>
    </div>
    <div class="item">
      <a href="#">Раздел 4</a>
      <p>Lorem ipsum nec ex prompta tractatos. 
      Ea elit sale admodum vim, at velit nemore rationibus per. 
      Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. 
      Mel legere mucius ne, adhuc impetus signiferumque cu eos. 
      Has an zzril soluta impetus. 
      An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.
      </p>
    </div>
  </div>

<style>

#accordion .item {
    width: 250px;
    height: 30px;
    overflow: hidden;
     
    transition: height ease-in-out 500ms;
    -o-transition: height ease-in-out 500ms;
    -moz-transition: height ease-in-out 500ms;
    -webkit-transition: height ease-in-out 500ms;
     
    background: #ccc;
    border: 1px solid #ccc;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
     
    margin-bottom: 2px;
}
#accordion a {
    display: block;
    height: 20px;
    line-height: 20px;
     
    background: #e6e6e6;
    padding: 5px;
    color: #1e1e1e;
    text-decoration: none;
}
#accordion p {
    height: 150px;
    padding: 5px;
}
#accordion div:hover {
    height: 180px;
}
#accordion div:hover a {
    border-bottom: 1px solid #ccc;
    font-weight: bold;
}
</style>

0