Техническая поддержка сервиса Quadro.Boards

3ebra · Поделиться**701**23.09.2012 09:48:14

kozhilya

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

Эм... Немного поподробнее можно?

Дело в том, что текст в таблице сливается с фоном форума. Поэтому, я бы хотела чтобы заголовки "Главное", "Объявления" и т.д. были зелёными, а текст под ними белым, чтобы не сливался.

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

Я звлыб в том коде одну деталь. Хаените содержимое тега <style>...</style> на следующее: #pun-announcement

Спасибо.

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

Вторая таблица.

И-и-и, спасибо, и извините за то, что завалила Вас заказами. + Вам.)

0

kozhilya · Поделиться**702**23.09.2012 11:52:00

3ebra написал(а):

Дело в том, что текст в таблице сливается с фоном форума. Поэтому, я бы хотела чтобы заголовки "Главное", "Объявления" и т.д. были зелёными, а текст под ними белым, чтобы не сливался.

Тогда стили будут такого вида:

table { width: 100%; border: 1px solid black; border-collapse: collapse; color: white; }
table thead td { display: none; border: 1px solid black; }
table thead th { width: 25%; cursor: pointer; border: 1px solid black; color: green; }
table thead th.sel { border-color: red; }
table tbody td { height: 300px; border: 1px solid black; }

3ebra написал(а):

И-и-и, спасибо, и извините за то, что завалила Вас заказами. + Вам.)

Да лаааадно, ничего страшного.

0

3ebra · Поделиться**703**23.09.2012 12:27:28

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

Тогда стили будут такого вида:

Благодарю :3

0

99problem · Поделиться**704**26.09.2012 19:53:34

Доброго времени суток.
Не могу разобраться как передвинуть данную таблицу (?) вправо, к краю.
собственно вот скриншоты того, что я бы хотела видеть в итоге, если не сложно покажите мне значения которые отвечают за то, чтобы передвинуть в ту или иную сторону таблицу и я сама все подгоню. Заранее благодарю )
http://s1.uploads.ru/7hjGt.jpg
http://s1.uploads.ru/N92UV.jpg
http://jhjjj.rolbb.ru/

0

kozhilya · Поделиться**705**26.09.2012 20:08:52

99problem
Если я всё правильно понял, то объявление примет вид:

Код:

<style>	
#menu {margin: 0px;}

#menu span {
width: 51px;
height: 20px;
display: block;
margin-bottom: 3px;
color: transparent;}
/*Обычные кнопки*/
#menu span.bttn_1{background: transparent url(http://s1.uploads.ru/f2o4B.png) center no-repeat;}
#menu span.bttn_2{background: transparent url(http://s1.uploads.ru/AygY7.png) center no-repeat;}
#menu span.bttn_3{background: transparent url(http://s1.uploads.ru/Vdg7a.png) center no-repeat;}

/*При наведении*/
#menu span.bttn_1:hover{background: transparent url(http://s1.uploads.ru/f2o4B.png) center no-repeat;}
#menu span.bttn_2:hover{background: transparent url(http://s1.uploads.ru/AygY7.png) center no-repeat;}
#menu span.bttn_3:hover{background: transparent url(http://s1.uploads.ru/Vdg7a.png) center no-repeat;}

/*Активные*/
#menu span.bttn_1.tabactive{background: transparent url(http://s1.uploads.ru/f2o4B.png) center no-repeat;}
#menu span.bttn_2.tabactive{background: transparent url(http://s1.uploads.ru/AygY7.png) center no-repeat;}
#menu span.bttn_3.tabactive{background: transparent url(http://s1.uploads.ru/Vdg7a.png) center no-repeat;}


#submenu {
padding: 25px;
width: 400px;
height: 300px;
background: transparent url(http://s1.uploads.ru/CpoMY.png) 15px 11px no-repeat;}

.submenutext {
display: none;
text-align: center;
width: 100%;}

.my_brd_s {margin: -3px 0px auto auto!important;}
#menuTr {vertical-align: top;}
</style>

<center><table class="my_brd_s" border="0" cellpadding="0" cellspacing="0">
 <tbody>
  <tr>
   <td id="MenuTxT" align="left" valign="top">
    <div id="submenu" align="center"> 
     <div id="sm1" class="submenutext" style="display:block;">
<div style="width: 100%; height: 300px;">
<b>амс проекта:</b></center><center><b><a href="http://badasses.ru/profile.php?id=15">Kyler</a> | <a href="http://badasses.ru/profile.php?id=71">Astoria</a> | <a href="http://badasses.ru/profile.php?id=96">Maximilian</a> | <a href="http://badasses.ru/profile.php?id=16">Allyson</a> | <a href="http://badasses.ru/profile.php?id=200">Violet</a> | <a href="http://badasses.ru/profile.php?id=133">Bonnie</a></b></center> 
<a href="http://badasses.rusff.me/profile.php?id=5"><img src="http://uploads.ru/i/1/G/L/1GLVR.gif" border="0" style="filter:alpha(opacity=20);-moz-opacity:0.6" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)"></a>
<p align="justify">
Вы готовы к тому, что бы окунуться в атмосферу L.A.? Если да, то тогда присаживайтесь поудобнее, плесните себе в бокал чего-нибудь крепкого и будьте готовы к незабываемым вечерам в приятной компании, наполненными экшеном, развлечениями и яркими воспоминаниями.
<br/>
<b>»новости 26.06:</b> На дворе наступила осень и сейчас она более ощутима, люди кутаются в шарфы, темнеет раньше, вместо легких кед теперь ботинки. Но даже если за окном стоит не самая радостная пора, на бэдассес царит своя атмосфера: теплая и уютная и новый дизайн тому подтверждение. Надеемся, что он вдохновит вас на множество замечательных постов. Вкусных пряников с какао и огромного вдохновения всем, бэд кидс!
<br/>
<b>»время, погода:</b> 13.06.-17.06; +18-25, солнечно, без осадков.
<br/>
<center><b>жмите ежедневно и ловите бонусы.</b>
<br/>
<a href="http://top.roleplay.ru/18067" title="Рейтинг Ролевых Ресурсов - RPG TOP" target="top_"><img src="http://img.rpgtop.su/88x31x11x8.gif" alt="Рейтинг Ролевых Ресурсов - RPG TOP" border="0" width="88" height="31"></a><a href="http://forum-top.ru/vote/1142" title="Рейтинг форумов Forum-top.ru" target="blank"><img src="http://forum-top.ru/uploads/buttons/forum-top_88x31_1.gif" alt="Рейтинг форумов Forum-top.ru" /></a></center>

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

Контент второй кнопки

</div>
     <div id="sm3" class="submenutext"><br/>
<object width="430" height="180"><param name="movie" value="http://embed.prostopleer.com/list?id=BjjklB41wgdBz02"></param><embed src="http://embed.prostopleer.com/list?id=BjjklB41wgdBz02" type="application/x-shockwave-flash" width="430" height="180"></embed></object>

</div>
     <div id="sm4" class="submenutext"></br></br>
<img src="http://uploads.ru/i/r/Z/y/rZyxY.gif"></br>
<a href="http://badasses.rusff.me/viewtopic.php?id=7#p29">СЮЖЕТ</a> | <a href="http://badasses.rusff.me/viewtopic.php?id=19#p41">ГОСТЕВАЯ</a> | <a href="http://badasses.rusff.me/viewforum.php?id=5">АКЦИИ</a> | <a href="http://badasses.rusff.me/viewforum.php?id=18">РЕКЛАМА</a><br>  <a href="http://badasses.rusff.me/viewtopic.php?id=10#p32">ВНЕШНОСТИ</a> | <a href="http://badasses.rusff.me/viewtopic.php?id=13#p35">РОЛИ</a>  | <a href="http://badasses.rusff.me/viewtopic.php?id=16#p38">ИМЕНА</a> | <a href="http://badasses.rusff.me/viewtopic.php?id=12#p34">ЛИЧНОЕ ЗВАНИЕ</a>

</div>
</td>
   <td align="center" id="menuTr">
    <div id="menu">
<span class="bttn_1" alt="#sm1" style="cursor: pointer;">новости дня</span>
<span class="bttn_2" alt="#sm2" style="cursor: pointer;">лучшие недели</span>
<span class="bttn_3" alt="#sm3" style="cursor: pointer;">голос L.A.</span>
<span class="bttn_4" alt="#sm4" style="cursor: pointer;">голос L.A.</span>
    </div>
   </td>
</tr>
</tbody>
</table></center>

<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").css({"z-index":"-1;"})
    var activeDiv = $(this).attr("alt");
    $("div."+activeDiv).css({"z-index":"1"})
    $("td.#MenuTxT div.submenutext").hide();
    $("div."+activeDiv).show();
    return false; });
});
</script>

Исходный код (backup)

Код:

<style>	
#menu {margin: 0px;}

#menu span {
width: 51px;
height: 20px;
display: block;
margin-bottom: 3px;
color: transparent;}
/*Обычные кнопки*/
#menu span.bttn_1{background: transparent url(http://s1.uploads.ru/f2o4B.png) center no-repeat;}
#menu span.bttn_2{background: transparent url(http://s1.uploads.ru/AygY7.png) center no-repeat;}
#menu span.bttn_3{background: transparent url(http://s1.uploads.ru/Vdg7a.png) center no-repeat;}

/*При наведении*/
#menu span.bttn_1:hover{background: transparent url(http://s1.uploads.ru/f2o4B.png) center no-repeat;}
#menu span.bttn_2:hover{background: transparent url(http://s1.uploads.ru/AygY7.png) center no-repeat;}
#menu span.bttn_3:hover{background: transparent url(http://s1.uploads.ru/Vdg7a.png) center no-repeat;}

/*Активные*/
#menu span.bttn_1.tabactive{background: transparent url(http://s1.uploads.ru/f2o4B.png) center no-repeat;}
#menu span.bttn_2.tabactive{background: transparent url(http://s1.uploads.ru/AygY7.png) center no-repeat;}
#menu span.bttn_3.tabactive{background: transparent url(http://s1.uploads.ru/Vdg7a.png) center no-repeat;}


#submenu {
padding: 25px;
width: 400px;
height: 300px;
background: transparent url(http://s1.uploads.ru/CpoMY.png) 15px 11px no-repeat;}

.submenutext {
display: none;
text-align: center;
width: 100%;}

.my_brd_s {margin-top: -3px!important;}
</style>

<center><table class="my_brd_s" border="0" cellpadding="0" cellspacing="0">
 <tbody>
  <tr>
   <td id="MenuTxT" align="left" valign="top">
    <div id="submenu" align="center"> 
     <div id="sm1" class="submenutext" style="display:block;">
<div style="width: 100%; height: 300px;">
<b>амс проекта:</b></center><center><b><a href="http://badasses.ru/profile.php?id=15">Kyler</a> | <a href="http://badasses.ru/profile.php?id=71">Astoria</a> | <a href="http://badasses.ru/profile.php?id=96">Maximilian</a> | <a href="http://badasses.ru/profile.php?id=16">Allyson</a> | <a href="http://badasses.ru/profile.php?id=200">Violet</a> | <a href="http://badasses.ru/profile.php?id=133">Bonnie</a></b></center> 
<a href="http://badasses.rusff.me/profile.php?id=5"><img src="http://uploads.ru/i/1/G/L/1GLVR.gif" border="0" style="filter:alpha(opacity=20);-moz-opacity:0.6" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)"></a>
<p align="justify">
Вы готовы к тому, что бы окунуться в атмосферу L.A.? Если да, то тогда присаживайтесь поудобнее, плесните себе в бокал чего-нибудь крепкого и будьте готовы к незабываемым вечерам в приятной компании, наполненными экшеном, развлечениями и яркими воспоминаниями.
<br/>
<b>»новости 26.06:</b> На дворе наступила осень и сейчас она более ощутима, люди кутаются в шарфы, темнеет раньше, вместо легких кед теперь ботинки. Но даже если за окном стоит не самая радостная пора, на бэдассес царит своя атмосфера: теплая и уютная и новый дизайн тому подтверждение. Надеемся, что он вдохновит вас на множество замечательных постов. Вкусных пряников с какао и огромного вдохновения всем, бэд кидс!
<br/>
<b>»время, погода:</b> 13.06.-17.06; +18-25, солнечно, без осадков.
<br/>
<center><b>жмите ежедневно и ловите бонусы.</b>
<br/>
<a href="http://top.roleplay.ru/18067" title="Рейтинг Ролевых Ресурсов - RPG TOP" target="top_"><img src="http://img.rpgtop.su/88x31x11x8.gif" alt="Рейтинг Ролевых Ресурсов - RPG TOP" border="0" width="88" height="31"></a><a href="http://forum-top.ru/vote/1142" title="Рейтинг форумов Forum-top.ru" target="blank"><img src="http://forum-top.ru/uploads/buttons/forum-top_88x31_1.gif" alt="Рейтинг форумов Forum-top.ru" /></a></center>

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

Контент второй кнопки

</div>
     <div id="sm3" class="submenutext"><br/>
<object width="430" height="180"><param name="movie" value="http://embed.prostopleer.com/list?id=BjjklB41wgdBz02"></param><embed src="http://embed.prostopleer.com/list?id=BjjklB41wgdBz02" type="application/x-shockwave-flash" width="430" height="180"></embed></object>

</div>
     <div id="sm4" class="submenutext"></br></br>
<img src="http://uploads.ru/i/r/Z/y/rZyxY.gif"></br>
<a href="http://badasses.rusff.me/viewtopic.php?id=7#p29">СЮЖЕТ</a> | <a href="http://badasses.rusff.me/viewtopic.php?id=19#p41">ГОСТЕВАЯ</a> | <a href="http://badasses.rusff.me/viewforum.php?id=5">АКЦИИ</a> | <a href="http://badasses.rusff.me/viewforum.php?id=18">РЕКЛАМА</a><br>  <a href="http://badasses.rusff.me/viewtopic.php?id=10#p32">ВНЕШНОСТИ</a> | <a href="http://badasses.rusff.me/viewtopic.php?id=13#p35">РОЛИ</a>  | <a href="http://badasses.rusff.me/viewtopic.php?id=16#p38">ИМЕНА</a> | <a href="http://badasses.rusff.me/viewtopic.php?id=12#p34">ЛИЧНОЕ ЗВАНИЕ</a>

</div>
</td>
   <td align="center">
    <div id="menu">
<span class="bttn_1" alt="#sm1" style="cursor: pointer;">новости дня</span>
<span class="bttn_2" alt="#sm2" style="cursor: pointer;">лучшие недели</span>
<span class="bttn_3" alt="#sm3" style="cursor: pointer;">голос L.A.</span>
<span class="bttn_4" alt="#sm4" style="cursor: pointer;">голос L.A.</span>
    </div>
   </td>
</tr>
</tbody>
</table></center>

<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").css({"z-index":"-1;"})
    var activeDiv = $(this).attr("alt");
    $("div."+activeDiv).css({"z-index":"1"})
    $("td.#MenuTxT div.submenutext").hide();
    $("div."+activeDiv).show();
    return false; });
});
</script>

0

99problem · Поделиться**706**27.09.2012 01:46:05

разобрались уже )

kozhilya
Да, все верно.
А вправо, ближе к краю, полностью таблицу, можно подвинуть?
http://s1.uploads.ru/N92UV.jpg

Отредактировано 99problem (27.09.2012 01:50:04)

0

Wendy Owen · Поделиться**707**28.09.2012 21:20:37

Здравствуйте.
Мне нужна такая табличка:

Таблица

Адрес Форума
Текст Harrington. Красные прямоугольники- прокрутки.
Фото в центре:
По бокам фото сама вставлю, размером 180Х180

забыла, есть ли скрипт, переносящий погоду с какого-нибудь Gismeteo в таблицу? Если есть, добавьте в поле "Weather". Что то вроде такого.

Отредактировано Wendy Owen (28.09.2012 21:25:35)

0

kozhilya · Поделиться**708**28.09.2012 22:15:04

Wendy Owen
Так?

<style>
table {
width: 100%;
text-align: center;
}
td.small div {
width: 200px;
height: 300px;
margin: 10px;
}
td.big div {
width: 100%;
height: 100px;
margin: 10px;
}
h6 {
font-family: Georgia;
font-size: 20px;
margin: 0px 0px 10px 0px;
}
.scroll {
overflow-y: auto;
}
</style>
<table><tr>
<td class='small'><div class="scroll">
<h6>Welcome</h6>
<p>Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text</p>
</div><img src="" width=180 height=180 />
</td>
<td class="big"><img src="http://s1.uploads.ru/OuGIB.png" />
<div class="scroll"><h6>News</h6>
<p>Text</p>
</div></td>
<td class='small'><div>
<h6>Weather</h6>
<p>Text text text</p>
</div><img src="" width=180 height=180 />
</td>
</tr></table>

+1

Wendy Owen · Поделиться**709**28.09.2012 22:18:24

kozhilya
Да, спасибо)

0

Wendy Owen · Поделиться**710**28.09.2012 22:20:05

kozhilya
~~А куда вставлять фото? о.о~~
Нашла.)

Отредактировано Wendy Owen (28.09.2012 22:20:51)

0

autumn · Поделиться**711**01.10.2012 13:40:26

1. leafs.mybb.ru
2. 850px
3. http://i46.tinypic.com/ot40b9.png

4. границы у таблицы: есть

5. доп.элементы (прокрутка, картинки и т.д.) указывать текстовыми пометками непосредственно в ячейках таблицы рисунка, разборчивым шрифтом.
хотелось бы, чтобы при нажатии на ссылки в навигации, менялся контент в соседнем окне, чтобы плавненько переключалось

заранее спасибо

0

Мииреена д'Эстер · Поделиться**712**01.10.2012 14:49:42

Скажите пожалуйста, а таблица, составленная по МК, должна работать в сообщении или нет?
~~А то они не слушаются~~

0

Lady Sansa Stark · Поделиться**713**07.10.2012 01:18:55

1. ссылка на форум
http://dreamofspring.rusff.me
2. ширина форума (ссылка на форум ничего может не показать, если дизайн в разработке).
850px
3. добротный рисунок с границами хотя бы в Paint'е, по которому можно определить чёткое количество столбцов и количество строк (решётку):

Таблица

4. границы у таблицы: есть
5. доп.элементы (прокрутка, картинки и т.д.) указывать текстовыми пометками непосредственно в ячейках таблицы рисунка, разборчивым шрифтом.

Главная картинка :
Фон посередине:
Шрифт: Vtks Revolt
Куда надо вставлять коды?

Заранее спасибо.

Отредактировано Lady Sansa Stark (07.10.2012 01:21:13)

0

Фера · Поделиться**714**13.10.2012 18:39:16

1. Ссылка на форум
http://fegort.rolka.su/
2. Эскиз таблицы
http://s019.radikal.ru/i612/1203/d2/92a03967ab4b.png
http://s018.radikal.ru/i516/1203/56/867ef48bdedf.png
http://s019.radikal.ru/i626/1203/b3/c1dc62b0d5a2.png
Только там вторая вкладка (или как её там?) должна быть подписана "По игре", просто запуталась пока рисовала :rolleyes:
3. Скрипты и всевозможные декорации.
Прокрутка везде где она нарисована (надеюсь понятно нарисовала) Полезные ссылки в виде "меню", каждая ссылка в своём прямоугольнике Цвет прямоугольников примерно такой: #999874 Да и можно сделать так, что бы при наведении на аватарки администрации (кстати, если понадобится, то их размер у админов 90 на 90, а у модеров 70 на 70) "всплывал" ник, а при нажатии на авик пользователя отправляло на страницу профиля.
4. Форматирование текста
Шрифт Consolars или похожий.
5. Картинки для вставки.
Сама вставлю.

0

kozhilya · Поделиться**715**14.10.2012 18:13:19

autumn

<style>#pun-announcement table { border-spacing: 0; border: 1px back solid; }
#pun-announcement #annNavig ul { list-style: none; }
#pun-announcement #annNavig ul li span { font-weigth: bold; }
</style>
<table><tr>
<td id="annContent"><div></div></td>
<td id="annNavig"><h6>Навигация</h6>
<ul><li><span>Заголовок 1</span>
<div style="display: none!important">Контент 1</div></li>
<li><span>Заголовок 2</span>
<div style="display: none!important">Контент 2</div></li>
<li><span>Заголовок 3</span>
<div style="display: none!important">Контент 3</div></li>
</ul>

<script>function toggleAnnoc(li) {
$('#annContent > div').slideOut(100).html($(li).children('div')).slideIn(100);
}
$('#annNavig > ul > li > span').click(function() { toggleAnnoc($(this).parent(); });</script>
toggleAnnoc($('#annNavig > ul > li').eq(1));

Надпись на переключателе и соответствующий ему контент.
Номер Блока, который показывается первым.

Оставшиеся 2 заказа будут до завтрашнего утра.

Отредактировано kozhilya (14.10.2012 18:15:00)

0

e.t · Поделиться**716**16.10.2012 07:16:22

1. ссылка на форум
http://badasses.ru
2. ширина форума (ссылка на форум ничего может не показать, если дизайн в разработке).
900
3. добротный рисунок с границами хотя бы в Paint'е, по которому можно определить чёткое количество столбцов и количество строк (решётку):

4. границы у таблицы: есть/нет (нужное подчеркнуть)
5. доп.элементы (прокрутка, картинки и т.д.) указывать текстовыми пометками непосредственно в ячейках таблицы рисунка, разборчивым шрифтом.
Помимо того, что уже помечено на рисунке, хотелось бы ещё сделать подложку(фон) под эту таблицу

Отредактировано e.t (18.10.2012 06:44:15)

0

kozhilya · Поделиться**717**16.10.2012 10:02:39

Lady Sansa Stark
Код вставлять в "Администрирование" - "Настройки" - "Объявление"

<script src="http://kevinbatdorf.github.com/codaslider/js/jquery.coda-slider-3.0.js"></script><script>$(function() { $('#pun-announcement #slider').codaSlider(); });</script>
<style>
#pun-announcement table { width: 850px; font-family: Vtks Revolt; }
#pun-announcement th { background: black; text-align: center; }
#pun-announcement td#main { background: url(http://westeros.ru/wp-content/uploads/starks-6-map.jpg) no-repeat center; width: 846px; height: 471px; }

#pun-announcement #slider { margin: 0px 100px; }</style>
<table><thead><th><img src="http://uploads.ru/q15la.png"/></th></thead>
<tbody><tr id="run"><td><marquee behavior=scroll> Контент бегущей строки </marquee></td></tr>
<tr id="main"><td><div id="slider">

<div class="sliderCont Active"> Hello! </div>
<div class="sliderCont"> News </div>
<div class="sliderCont"> Administration <br /> Moderators </div>
<div class="sliderCont"> Asset week </div>
<div class="sliderCont"> In game </div>
<div class="sliderCont"> Navigation </div>
<div class="sliderCont"> Partnerships </div>
</div>

<div class="sliderNavigation"><table><tr><td id='prev'><--- Prev</td><td id='next'>Next ---&rt;</td></tr></table></div>
</td></tr>
</tbody></table>

<script>
var contLength=$('#slider > #sliderCont').length-1;
$('#slider > #sliderCont').each(function (i){$(this).attr("alt",i);});
var Nobysu=true;
function CrugL(c,delta,g) {if(Nobysu){Nobysu=false;
var a=$('#slider > #sliderCont'); j=parseInt(a.attr("alt")); if(j==g) {j=c} else {j+=delta}
a.hide('slow').removeClass("Active")//Свёртываем все предыдущие;
a=$("#slider > #sliderCont[alt='"+j+"']").addClass("Active").toggle('slow',function(){Nobysu=true});
}}
$("#sliderNavigation #prev").click(CrugL(contLength, -1, 0));
$("#sliderNavigation #next").click(CrugL(0, 1, contLength));
</script>

Слайдер писался на коленке. Если что-то будет не так: пишите мне в ЛС.

Легенда: Картинки рядом с шапкой, пишутся так: <img src="Ваша картинка" />; Контент соответствует надписи;
Слайдер влево; Слайдер вправл

Отредактировано kozhilya (16.10.2012 10:05:23)

0

kozhilya · Поделиться**718**17.10.2012 19:26:51

Фера
Демо таблицы
Её код:

<style>
#pun-announcement { height: 500px; }
#annHead { position: absolute; margin-top: -34px; }
#annHead li { display: inline-block; background: #969472; z-index: 0; border: 1px #323226 solid; width: 222px; height: 18px; text-align: center; margin: 0 10px; padding: 5px 0 0 0; position: relative; cursor: pointer; border-top-left-radius: 10px; border-top-right-radius: 10px; }
#annHead li:hover { background: #AAA881; }
#annHead li.Active { top: 0; height: 30px; background: #B5B389; border-bottom-color: #B5B389; font-weight: bold; font-size: 0px;
border-bottom-left-radius: 2px; border-bottom-rigth-radius: 2px; }
#annContent { margin-top: -1px; border: 2px #323226 solid; background: #B5B389; height: 400px; z-index: 2; overflow-y: hidden }
#annContent .annElement { display: none; margin: 0 !important; height: 90%; width: 100%; text-align: center; }
#annContent .annElement h6 { font: bold small-caps 24px/14px Calibri; margin: 5px 0 10px; }
#annContent .annElement table { margin: 20px 10px 10px; width: 722px; border-spacing: 0; height: 100%; }
#annContent .annElement div { height: 100%; margin: 10px; }
#annContent .annElement#game table td { width: 50%; }
#annContent .annElement#main table td { width: 60%; }
#annContent .annElement#main table td:nth-child(1) { width: 40%; vertical-align: top; }
.scroll { overflow-y: auto; }
.border { border: 1px solid #323226; }
#annContent div.annElement div#adminPhotos { height: 50px; }
#annContent div.annElement div#moderPhotos { height: 50px; }
#adminPhotos img { width: 50px; height: 50px; margin: 0 10px; }
#moderPhotos img { width: 30px; height: 30px; margin: 0 7px; }
</style>

<div id="annHead"><ul>
<li id="main" class="Active">Основное</li>
<li id="game">По игре</li>
<li id="piar">Реклама</li>
</ul></div>
<div id="annContent">
<div class="annElement" id="main">
<table><tr>
<td><h6>Администрация</h6><div id='adminPhotos'><img src="ссылка" /><img src="ссылка" /><img src="ссылка" /></div>
<h6>Модераторы</h6><div id='moderPhotos'><img src="ссылка" /><img src="ссылка" /><img src="ссылка" /><img src="ссылка" /><img src="ссылка" /></div>
<h6>Полезные ссылки</h6><ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
<li><a href="#">Ссылка 3</a></li>
</ul></td>
<td><h6>Новости</h6><div class="scroll border">Контент Новостей
</div></td></tr></table>
</div>
<div class="annElement" id="game"><table><tr>
<td><h6>Погода и время в игре</h6><div class="scroll border">Контент Погоды и времени</div></td>
<td><h6>События в игре</h6><div class="scroll border">Контент Событий</div></td></tr></table></div>
<div class="annElement scroll" id="piar">Контент Рекламы</div>
</div>

<script>$('#annHead li').click(function () { if (!$(this).hasClass('Active')) { $('#annHead li').removeClass('Active'); $('#annContent .annElement').slideUp('slow'); $(this).addClass('Active'); $('#annContent .annElement#'+$(this).attr('id')).slideDown('slow'); }}); $('#annHead li.Active').removeClass('Active').trigger('click');</script>

Легенда:
Надписи на табах.
Cсылка на картинку с изображением. Если требуется всплывающая подсказка - используйте аттрибут title.
Полезная ссылка и её текст.
Заголовки
Содержимое прокручивающихся блоков.

Будут вопросы - пишите письма в личку, помогу.

+1

kozhilya · Поделиться**719**17.10.2012 19:36:05

e.t
Картинка не доступна. Перезалейте на uploads (через форму ответа)

0

e.t · Поделиться**720**18.10.2012 06:44:45

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

Картинка не доступна. Перезалейте на uploads (через форму ответа)

сделано

0

Техническая поддержка сервиса Quadro.Boards

Меню навигации

Пользовательские ссылки

Объявление

Новости сервиса

О форуме

Полезные ссылки

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

FAQ по самостоятельному составлению HTML-таблицы и Заказ Таблиц

Сообщений 701 страница 720 из 1000

Поделиться70123.09.2012 09:48:14

Поделиться70223.09.2012 11:52:00

Поделиться70323.09.2012 12:27:28

Поделиться70426.09.2012 19:53:34

Поделиться70526.09.2012 20:08:52

Поделиться70627.09.2012 01:46:05

Поделиться70728.09.2012 21:20:37

Поделиться70828.09.2012 22:15:04

Поделиться70928.09.2012 22:18:24

Поделиться71028.09.2012 22:20:05

Поделиться71101.10.2012 13:40:26

Поделиться71201.10.2012 14:49:42

Поделиться71307.10.2012 01:18:55

Поделиться71413.10.2012 18:39:16

Поделиться71514.10.2012 18:13:19

Поделиться71616.10.2012 07:16:22

Поделиться71716.10.2012 10:02:39

Поделиться71817.10.2012 19:26:51

Поделиться71917.10.2012 19:36:05

Поделиться72018.10.2012 06:44:45