Leonheart
Хорошо, пример поярче:
http://lastchanse.ru/
Заказ таблиц №8
Сообщений 961 страница 990 из 1000
Поделиться9612012-01-27 13:57:05
Поделиться9622012-01-27 14:57:12
И вы называете это слайдорионом? Дык эт просто таблица с вкладками... напарник делал как-то - примерный код такой
<style>
.container1 {width: 850px; margin: 0 auto; padding: 0; float: none;}
ul.tabs {
margin: 0;
padding: 0;
float: none;
list-style: none;
height: 41px;
width: 850px;
width: 100%;
height: auto 100%;}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 41px;
line-height: 41px;
border: 0px;
margin-bottom: 0px;
overflow: hidden;
position: relative;}
ul.tabs li a {
text-decoration: none;
color: transparent;
display: block;
padding: 0 0px;
outline: none;}
ul.tabs li a:hover {
border: none;}
html ul.tabs li.active {
border-bottom: none;}
html ul.tabs li.active a:hover {
border: none;}
.tab_container1 {
clear: both;
float: left;
width: 850px;
height: 100%;
background-image: none;
background-color: #e1dcc9;
border-bottom: 1px solid #8e693e;}
.tab_content {padding: 5px;}
.tab_content h2 {
font-weight: normal;
padding-bottom: 2px;
border-bottom: none;}
</style>
<center>
<table cellspacing="0" cellpadding="0" border="1" style="width: 90%;">
<tbody><tr>
<td align="center">
<ul class="tabs">
<li class="active"><a href="#tab1">Вкладка 1</a></li>
<li><a href="#tab2">Вкладка 2</a></li>
<li><a href="#tab3">Вкладка 3</a></li>
<li><a href="#tab4">Вкладка 4</a></li>
<li><a href="#tab5">Вкладка 5</a></li>
</ul>
</td></tr>
<tr><td align="center">
<div class="container1">
<!--- Содержимое --->
<div class="tab_container1">
<!--- Содержимое вкладки 1 --->
<div style="display: block;" id="tab1" class="tab_content">
текст 1
</div>
<!--- Содержимое вкладки 2 --->
<div style="display: none;" id="tab2" class="tab_content">
текст 2
</div>
<!--- Содержимое вкладки 3 --->
<div style="display: none;" id="tab3" class="tab_content">
текст 3
</div>
<!--- Содержимое вкладки 4 --->
<div style="display: none;" id="tab4" class="tab_content">
текст 4
</div>
<!--- Содержимое вкладки 5 --->
<div style="display: none;" id="tab5" class="tab_content">
текст 5
</div>
</div>
<!--- Конец содержимого --->
<!--- Конец меню --->
</div>
</td>
</tr></tbody>
</table>
</center>
<!-- скрипты меню вкладок -->
<script type="text/javascript">
$(document).ready(function(){
$('.splLink').click(function(){
$(this).parent().children('div.splCont').toggle('normal');
return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".tab_content").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
});
</script>Поделиться9632012-01-27 15:00:12
Leonheart
-чмокнула в щёчку, поставила плюсик, забрала таблицу, улетела- Вы супер-герой. Молодец, уважаете старину.
Поделиться9642012-01-27 22:47:21
1. Ссылка на форум
http://wildcatslive.rolka.su/
2. Скрин таблицы
Вот: Ссылочка)))
3. Скрипты и всевозможные примочки. Чат, плеер, часы, календарь, прокрутка, бегущая строка и пр.
Окошко для текста и окошки с названием вкладок белые и полупрозрачные. В каждом окошке (в каждой вкладке) должна быть прокрутка.
4. Форматирование текста
Consolars или ещё, какой нибудь красивый шрифт.
5. Картинки для вставки. 




Надеюсь заказ оформлен правильно)
Отредактировано Ulian (2012-01-27 22:51:40)
Поделиться9652012-01-28 10:03:29
html-верх:
<style>
#menu {
margin-top: 0px;
width: 180px;
height: 25px;}
#menu span {
text-align: center;
display: block;
margin: 0 0 5px 0;
padding: 5px;
}
#submenu,#menu span {
border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
background: transparent url(http://savepic.net/2378354.png) repeat top left;}
#menu .tabactive {
background:#8c7c60;}
#submenu {
padding: 0px;
text-align: center;
font-size: 12px;
width: 540px;}
.submenutext {
padding: 5px;
display: none;
height: 194px;
color: #000;
font-family: 'comic sans ms';}
</style>Объявление:
<center><table style="width: 615px;">
<tbody>
<tr>
<td valign=top align="center">
<div id="menu"> <b>
<span alt="#sm1" style="cursor: pointer;"><img src="http://x-lines.ru/icp/ghW75/000000/0/20/Rprivetstvie.png"></span>
<span alt="#sm2" style="cursor: pointer;"><img src="http://x-lines.ru/icp/ghW75/000000/0/20/RvaZno.png"></span>
<span alt="#sm3" style="cursor: pointer;"><img src="http://x-lines.ru/icp/ghW75/000000/0/20/Radministraciy.png"></span>
<span alt="#sm4" style="cursor: pointer;"><img src="http://x-lines.ru/icp/ghW75/000000/0/20/RpogodaPiPvremy.png"></span>
<span alt="#sm5" style="cursor: pointer;"><img src="http://x-lines.ru/icp/ghW75/000000/0/20/Rreklama.png"></span>
</b>
</div>
</td>
<td id="MenuTxT" align="center" valign="top">
<div id="submenu" align="center">
<div id="sm1" class="submenutext" style="display:block;"><div style="width: 100%; height: 194px; overflow: auto;"><br/>
Текст "приветствие"
</div></div>
<div id="sm2" class="submenutext"><div style="width: 100%; height: 194px; overflow: auto;"><br/>
Текст "важно"
</div></div>
<div id="sm3" class="submenutext"><div style="width: 100%; height: 194px; overflow: auto;"><br/>
Текст "администрация"
</div></div>
<div id="sm4" class="submenutext"><div style="width: 100%; height: 194px; overflow: auto;"><br/>
Текст "погода"
</div></div>
<div id="sm5" class="submenutext"><div style="width: 100%; height: 194px; overflow: auto;"><br/>
Текст "реклама"
</div></div>
</div>
</td>
</tr>
</tbody>
</table></center>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>Поделиться9662012-01-28 11:31:14
Большое спасибо)) Всё работает))
Поделиться9672012-01-28 21:37:41
1. Ссылка на форум: http://narutolateryear.rolka.su/
2. Эскиз таблицы:
Сверху кнопки, при нажатии одной, меняется окошко с информацией.
Новости_______Полезное_______Навигация_______Администрация
3. Скрипты и всевозможные примочки. Чат, плеер, часы, календарь, прокрутка, бегущая строка и пр.
Для каждого окошка свой фон.
4. Форматирование текста
...
5. Картинки для вставки.
Новости -http://fc01.deviantart.net/fs70/i/2012/025/c/c/naruto_571_by_narutospoiler-d4nk5q5.jpg
Полезное -http://fc07.deviantart.net/fs71/f/2010/174/8/0/Kushina_Jinchuriki_by_Bankai_no_jutsu.jpg
Навигация -http://fc07.deviantart.net/fs71/f/2011/107/3/3/gedo_mazo_by_itachiulquiorra-d3e71ag.png
Администрация -http://fc09.deviantart.net/fs70/i/2010/039/c/2/Colo_jinchuriki_by_Dark_nyghtmare.jpg (без полосок сверху)
Чтобы у каждого окошка с информацией был свой фон картинкой, исходники сверху.
Поделиться9682012-01-28 23:31:15
(без полосок сверху)
Без каких полосок?
И шо - вы мну предлагаете каждую картинку отредактировать?
Поделиться9692012-01-29 03:02:38
Leonheart, хм... ну логично=) согласен=)
Поделиться9702012-01-29 14:04:45
ну логично=) согласен=)
ладно, чо-нить придумаю...
Поделиться9712012-01-29 15:49:47
Leonheart,
спасибо
Поделиться9722012-01-29 23:07:09
Html-верх:
<style>
#menu {
margin-bottom: -20px;
margin-top: -12px;}
#menu span {
padding: 2px 15px 2px 15px;
margin: 0px 25px;
width: 100px;
display: inline;
color: maroon;}
#menu .tabactive {
color: #fff;}
#submenu {
padding: 3px;
width: 700px;}
.submenutext {
display: none;
text-align: center;
font-size: 12px;
height: 300px;}
#sm1 {background: url(http://uploads.ru/i/n/O/w/nOw5a.jpg) transparent no-repeat center;}
#sm2 {background: url(http://uploads.ru/i/g/T/q/gTqVX.jpg) transparent no-repeat center;}
#sm3 {background: url(http://uploads.ru/i/o/t/P/otP7L.png) transparent no-repeat center;}
#sm4 {background: url(http://uploads.ru/i/F/i/d/FidVX.jpg) transparent no-repeat center;}
</style>Объявление:
<center><table style="width: 100%;" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr height="40">
<td align="center">
<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>
<span alt="#sm4" style="cursor: pointer;">Администрация</span>
</b>
</div>
</td>
</tr>
<tr height="300">
<td id="MenuTxT" align="center" valign="top">
<div id="submenu" align="center">
<div id="sm1" class="submenutext" style="display:block;"><br/>
Текст новостей
</div>
<div id="sm2" class="submenutext"><br/>
Текст полезностей
</div>
<div id="sm3" class="submenutext"><br/>
Текст навигации
</div>
<div id="sm4" class="submenutext"><br/>
Текст админ-состава
</div>
</td>
</tr>
</tbody>
</table></center>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>Поделиться9732012-02-01 00:56:01
1. Ссылка на форум
http://nng15.anihub.ru/
2. Скрин таблицы
http://s2.itrash.ru/idb/97084a24146805a … geni-1.png
3. Скрипты и всевозможные примочки. Чат, плеер, часы, календарь, прокрутка, бегущая строка и пр.
прокрутка
4. Форматирование текста
просто написать там и там "текст"
5. Картинки для вставки.
...
Поделиться9742012-02-01 10:44:27
1. Ссылка на форум
http://praytonar.rolka.su/
2. Скрин таблицы
http://s018.radikal.ru/i515/1202/87/35aa8dc325e5.jpg
3. Скрипты и всевозможные примочки. Чат, плеер, часы, календарь, прокрутка, бегущая строка и пр.
Нужна прокрутка (как на картинке)
4. Форматирование текста
-
5. Картинки для вставки.
Та которая на изображении и чтобы "админ., погода, путев." и так далее были картинками.
И еще напишите куда вставлять фон для таблицы. Заранее большое спасибо! =)
Поделиться9752012-02-01 11:18:09
И еще напишите куда вставлять фон для таблицы.
Фон для всей таблицы, или для окна с переменным контентом?
Ну и где картинка хоть на одну кнопку. Или хотя б ее размеры?
Поделиться9762012-02-01 11:41:40
Leonheart
ну, чтобы и таблица с текстом была с фоном =) И чтобы края были как на рисунке закругленными, это возможно?
А размер примерно 170х70
Поделиться9772012-02-01 12:18:57
Nikita380, вырезайте фон с закругленными краями каждой колонки отдельно!
Поделиться9792012-02-01 14:18:45
Nikita380,
<style type="text/css">
#pun-announcement .container {padding: 1em 1em 1em 1em}
</style>
<center><table style="width: 100%; text-align: center;" cellpadding="0" cellspacing="0" border="0">
<tr><td style="width: 400px;" valign="top" align="center">
<div style="width: 350px; height: 175px; background: url(http://s2.itrash.ru/idb/d8e58d130d289ffde0f676381e0db9d9/oBez_imen124i-1.png) top center no-repeat; padding: 5px 0 5px 0;" align="center">
<!-- Картинка левого заголовка -->
<p align="center"><img src="http://s2.itrash.ru/idb/d8e58d130d289ffde0f676381e0db9d9/oBez_41241241.png"></p>
<!-- Конец картинки заголовка -->
<div style="width: 300px; height: 125px; overflow: auto; text-align: center;">
<!-- Содержимое левой колонки -->
текст левой колонки
<!-- Конец содержимого -->
</div>
</div></td>
<td style="width: 400px;" valign="top" align="center">
<div style="width: 350px; height: 175px; background: url(http://s2.itrash.ru/idb/d8e58d130d289ffde0f676381e0db9d9/oBez_imen124i-1.png) top center no-repeat; padding: 5px 0 5px 0;" align="center">
<!-- Картинка правого заголовка -->
<p align="center"><img src="http://s2.itrash.ru/idb/d8e58d130d289ffde0f676381e0db9d9/oBez_ime41241ni-1.png"></p>
<!-- Конец картинки заголовка -->
<div style="width: 300px; height: 125px; overflow: auto; text-align: center;">
<!-- Содержимое правой колонки -->
текст правой колонки
<!-- Конец содержимого -->
</div></div></td></tr></table></center>Поделиться9802012-02-01 14:51:23
Nikita380, вырезайте фон с закругленными краями каждой колонки отдельно!
Это ведь меня тоже касается, да? =) Тогда сделайте из того же рассчета, а я потом оформлю это и поставлю, так получится?
Поделиться9812012-02-01 15:01:16
Kokos_v, нет - вас не касается - вы не давали картинок
размеры указаны. Проблем быть не должно.
Поделиться9822012-02-01 15:09:21
Leonheart
Это здорово =)
Поделиться9832012-02-01 17:40:36
Kokos_v,
<style type="text/css">
#pun-announcement .container {padding: 1em 0em 1em 0em}
</style>
<center><table cellpadding="0" cellspacing="3" border="0">
<tr style="height: 245px;"><td style="width: 300px; border: 2px solid #000; border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; -moz-border-radius:10px; -o-border-radius:10px;" align="center">
<!-- Картинка 300х245 -->
<img style="width: 300px; height: 245px; margin: 0 0 -2px 0;" src="картинка">
<!-- End картинки -->
</td>
<td style="width: 470px;" rowspan="2" align="center">
<style>
#menu {
margin-top: -7px;
width: 170px;
height: 70px;}
#menu span {
text-align:center;
display:block;
margin: 4px 0;
padding: 0px;
}
#submenu,#menu span {
border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border: 2px solid #000;}
#submenu {
padding: 0px;
height: 333px;
text-align: center;
font-size: 12px;
width: 300px;
background: url(ссылка) top center no-repeat; /* картинка на фон контента размер - 300х333 */
}
.submenutext {
display: none;
height: 333px;}
</style>
<center><table style="width: 100%;" border="0" cellpadding="0" cellspacing="3">
<tbody>
<tr>
<td style="widht: 170px;" align="center" valign="top">
<div id="menu">
<span alt="#sm1" style="cursor: pointer;"><img style="margin: 0 0 -2px 0;" src="ССЫЛКА_НА_КАРТИНКУ_КНОПКИ_1"></span>
<span alt="#sm2" style="cursor: pointer;"><img style="margin: 0 0 -2px 0;" src="ССЫЛКА_НА_КАРТИНКУ_КНОПКИ_2"></span>
<span alt="#sm3" style="cursor: pointer;"><img style="margin: 0 0 -2px 0;" src="ССЫЛКА_НА_КАРТИНКУ_КНОПКИ_3"></span>
<span alt="#sm4" style="cursor: pointer;"><img style="margin: 0 0 -2px 0;" src="ССЫЛКА_НА_КАРТИНКУ_КНОПКИ_4"></span>
<span alt="#sm5" style="cursor: pointer;"><img style="margin: 0 0 -2px 0;" src="ССЫЛКА_НА_КАРТИНКУ_КНОПКИ_5"></span>
</div>
</td>
<td id="MenuTxT" style="width: 304px;" align="center" valign="top">
<div id="submenu" align="center">
<div id="sm1" class="submenutext" style="display:block;"><div style="width: 98%; height: 333px; overflow: auto;"><br/>
Текст действий в игре
</div></div>
<div id="sm2" class="submenutext"><div style="width: 98%; height: 333px; overflow: auto;"><br/>
Текст погоды
</div></div>
<div id="sm3" class="submenutext"><div style="width: 98%; height: 333px; overflow: auto;"><br/>
Текст путеводителя
</div></div>
<div id="sm4" class="submenutext"><div style="width: 98%; height: 333px; overflow: auto;"><br/>
Текст администрации
</div></div>
<div id="sm5" class="submenutext"><div style="width: 98%; height: 333px; overflow: auto;"><br/>
Текст для пиарщиков
</div></div>
</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").hide();
var activeDiv = $(this).attr("alt");
$("div."+activeDiv).fadeIn();
return false; });
});
</script>
</td></tr>
<tr style="height: 88px;">
<td style="border: 2px solid #000; border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; -moz-border-radius:10px; -o-border-radius:10px;" align="center"><marquee style="width: 97%; height: 31px;">
под баннеры
</marquee></td>
</tr>
</table></center>К слову,
1. IE скругление не поддерживает,
2. Перед вставкой картинки 300х245 предварительно закруглить края - граница на изо не накладывается,
3. Рекомендуемый размер картинок на кнопки 166х60 
4. Куды вставлять картинки на фон, кнопки и просто картинку - подписано
Поделиться9842012-02-01 17:48:33
Leonheart
Спасибо, отлично смотрится =)
Последний вопрос, для фона поля с текстом подойдут изображения формата PNG?
Поделиться9852012-02-01 17:56:22
Kokos_v, любые 
Поделиться9862012-02-01 19:16:46
Kokos_v
любого граф. формата, которое прочитает ваш браузер.
Поделиться9872012-02-04 16:09:39
1. Ссылка на форум
http://academysherr.rolka.su/
2. Скрин таблицы
http://s018.radikal.ru/i501/1202/42/c10004f23ad0.jpg
3. Скрипты и всевозможные примочки. Чат, плеер, часы, календарь, прокрутка, бегущая строка и пр.
Нужна прокрутка
4. Форматирование текста
-
5. Картинки для вставки.
http://s018.radikal.ru/i525/1202/22/a9d49444d05a.jpg
http://s018.radikal.ru/i502/1202/4f/e4659bc08fc9.png
Отредактировано Имала (2012-02-04 16:52:02)
Поделиться9882012-02-04 16:42:09
Имала, уберите с фона таблицы кусок: "Важное" и отдельной картинкой сделайте с прозрачным серым фоном - иначе на разных разрешениях начнет ползать текст...
Поделиться9892012-02-04 16:52:13
Leonheart
Вроде бы поправила.
Поделиться9902012-02-04 17:17:53
Имала,
<center><table style="width: 750px; height: 500px; background: url(http://s018.radikal.ru/i525/1202/22/a9d49444d05a.jpg) top center no-repeat;" cellpadding="0" cellspacing="0" border="0"> <tr style="height: 247px;"><td style="width: 270px;" align="center" valign="bottom" rowspan="2"><div style="width: 100%; height: 415px; overflow: auto;"> Новости для гостей </div></td><td style="width: 224px;" align="center" valign="bottom"><div style="width: 100%; height: 182px; overflow: auto;"> Администрация </div></td><td style="width: 256px;" align="center" valign="bottom"><div style="width: 100%; height: 182px; overflow: auto;"> Игрокам </div></td></tr> <tr style="height: 253px;"><td align="center" valign="bottom"><div style="width: 100%; height: 175px; overflow: auto;"> Ссылки </div></td><td align="center" valign="bottom"><div style="width: 233px; height: 199px; background: url(http://s018.radikal.ru/i502/1202/4f/e4659bc08fc9.png) top center no-repeat; margin-bottom: 14px;"> <br/><br/><br/> <div style="width: 98%; height: 145px; overflow: auto;"> Важное </div> </div></td></tr></table></center>
Похожие темы
| Заказ таблиц 4 < | Архив тем | 2010-02-12 |
| Заказ таблиц 3 | Архив тем | 2009-09-20 |
| Заказ таблиц №6 | Архив тем | 2011-01-09 |
| Заказ таблиц №2 | Архив тем | 2009-05-04 |
| Заказ таблиц №7 | Архив тем | 2011-06-13 |