🎧 Подкаст «НЕТЕРОЛЕВЫЕ»
Рассказываем и обсуждаем Форумные Ролевые Игры (ФРПГ).
Telegram Обсудить
ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Заказать дизайн, графику или скрипты » Заказать верстку и скрипты » Боковая панель.Марвел.
вот эти вкладки Вертикальный "аккордеон"
Ария
Принимаю. Не уверена, но попробовать стоит) К понедельнику будет
Ария
Получилось только так отодвинуть, ибо при изменении разрешения оно остается на прежнем месте оО
Если нужны скрипты, которые вы не можете установить/найти и тп.(мало ли), то напишите - поставлю в код
<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>
Jii-Jo
попробовала на тестовике.
получается, что таблицу тоже двигает, я куда-то не куда вставила?
http://narutoklan2.spybb.ru/
Ария
Если можно, то код таблицы. можно под хайд 760.
Отредактировано Jii-Jo (08.12.13 10:41)
можно под хайд 76
без понятия что это.
Ария
Ставится в объявление, сразу после заключительного дива.
<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>
Ария
А если так?
<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>
Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Заказать дизайн, графику или скрипты » Заказать верстку и скрипты » Боковая панель.Марвел.