1. Ссылка на форум: http://testo.onaruto.ru/
2. Эскиз таблицы:
3. Дополнительные предпочтения:
Фон - прозрачный. Кнопки вкладок можно сделать картинками?
ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Заказать дизайн, графику или скрипты » Заказать верстку и скрипты » Таблица с контейнирами.
1. Ссылка на форум: http://testo.onaruto.ru/
2. Эскиз таблицы:
3. Дополнительные предпочтения:
Фон - прозрачный. Кнопки вкладок можно сделать картинками?
Сова717
Принимаю.
Вопрос возник насчет проктурки в 1, 3 и 5 вкладках. там пропрутка вправо/влево или Слайдер?
Jii-Jo
Нет, нет. Обычная полоса прокрутки, как справа на форумной странице
Сова717
Хорошо) В ближайшее время таблица будет
Jii-Jo
Спасибо
Сова717
Смотрим:
http://tfp.mybb.ru
Код:<center> <table style="width: 800px; height: 530px;"> <tbody> <tr> <td valign="top"> <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> <span alt="#sm5" style="cursor: pointer;">Навигация</span> <span alt="#sm6" style="cursor: pointer;">Пиар</span> </b></div> </td> <td align="center" id="MenuTxT" valign="top"> <div align="center" id="submenu"> <div class="submenutext" id="sm1" style="display:block;"> <!--Приветствие--> <table align="center" border="1" cellpadding="5" cellspacing="2" style="width: 90%; height: 500px;"> <tbody> <tr style="height: 20%;"> <!--Картинка--> <td style="text-align: center; width: 50%;"><img alt="" src="ссылка"></td> <!--Картинка--> <td style="text-align: center; width: 50%;"><img alt="" src="ссылка"></td> </tr> <tr style="vertical-align: top; "> <td style="text-align: center; width: 50%; height: 400px;"> <div style="overflow-y: auto; height: 400px;"> <p>Текст с прокруткой</p> <br> <p>Текст с прокруткой</p> <br> <p>Текст с прокруткой</p> <br> <p>Текст с прокруткой</p> <br> <p>Текст с прокруткой</p> <br> <p>Текст с прокруткой</p> <br> <p>Текст с прокруткой</p> <br> <p>Текст с прокруткой</p> <br> <p>Текст с прокруткой</p> <br> <p>Текст с прокруткой</p> <br> <p>Текст с прокруткой</p> <br> <p>Текст с прокруткой</p> <br> <p>Текст с прокруткой</p> <br> </div> </td> <td style="text-align: center; width: 50%;"> <div style="overflow-y: auto; height: 400px;"> <p>Текст с прокруткой</p> <br> <p>Текст с прокруткой</p> <br> <p>Текст с прокруткой</p> <br> <p>Текст с прокруткой</p> <br> <p>Текст с прокруткой</p> <br> <p>Текст с прокруткой</p> <br> <p>Текст с прокруткой</p> <br> <p>Текст с прокруткой</p> <br> <p>Текст с прокруткой</p> <br> <p>Текст с прокруткой</p> <br> <p>Текст с прокруткой</p> <br> <p>Текст с прокруткой</p> <br> <p>Текст с прокруткой</p> <br> <p>Текст с прокруткой</p> <br> <p>Текст с прокруткой</p> <br> </div> </div> </div> </td> </tr> </tbody> </table> <!--END/Приветствие--> </div> <div class="submenutext" id="sm2"> <!--Новости--> <table align="center" border="1" cellpadding="5" cellspacing="2" style="width: 90%; height: 500px;"> <tbody> <tr style="height: 20%;"> <td style="text-align: center; width: 50%;"> <div style="overflow-y: auto; height: 400px;"> Текст. Много текста с прокруткой </div> </td> <td style="text-align: center; width: 50%;"> <div style="overflow-y: auto; height: 400px;">Текст. Много текста с прокруткой</div> </td> </tr> </tbody> </table> <!--END/Новости--> </div> <div class="submenutext" id="sm3"> <!--Миры--> <table align="center" border="1" cellpadding="5" cellspacing="2" style="width: 90%; height: 500px;"> <tbody> <tr style="height: 20%;"> <!--Картинка--> <td style="text-align: center; width: 50%;"><img alt="" src="ссылка"></td> <!--Картинка--> <td style="text-align: center; width: 50%;"><img alt="" src="ссылка"></td> </tr> <tr style="vertical-align: top; "> <td style="text-align: center; width: 50%; height: 400px;"> <div style="overflow-y: auto; height: 400px;"> <p>Текст с прокруткой</p> <p>Текст с прокруткой </p> <p>Текст с прокруткой </p> <p>Текст с прокруткой </p> <p>Текст с прокруткой</p> <p>Текст с прокруткой</p> <p>Текст с прокруткой </p> <p>Текст с прокруткой</p> <p>Текст с прокруткой </p> <p>Текст с прокруткой</p> <p>Текст с прокруткой </p> <p>Текст с прокруткой</p> <p>Текст с прокруткой </p> <p>Текст с прокруткой</p> <p>Текст с прокруткой </p> <p>Текст с прокруткой</p> <p>Текст с прокруткой </p> <p>Текст с прокруткой</p> <p>Текст с прокруткой </p> <p>Текст с прокруткой</p> <p>Текст с прокруткой </p> <p>Текст с прокруткой</p> <p>Текст с прокруткой </p> </div> </td> <td style="text-align: center; width: 50%;"> <div style="overflow-y: auto; height: 400px;"> <p>Текст с прокруткой </p> <p>Текст с прокруткой</p> <p>Текст с прокруткой</p> <p>Текст с прокруткой</p> <p>Текст с прокруткой</p> <p>Текст с прокруткой </p> <div>Текст с прокруткой</div> <div> <p>Текст с прокруткой </p> <div>Текст с прокруткой</div> <div> <p>Текст с прокруткой </p> <div>Текст с прокруткой</div> <div> </div> <div>Текст с прокруткой </div> </div> </div> </div> </td> </tr> </tbody> </table> <!--END/Миры--></div> <div class="submenutext" id="sm4"> <!--Газета--> <table align="center" border="1" cellpadding="5" cellspacing="2" style="width: 90%; height: 500px;"> <tbody> <tr style="height: 20%;"> <td style="text-align: center; width: 50%;"> <div style="overflow-y: auto; height: 400px;">Текст. Много текста с прокруткой</div> </td> </tr> </tbody> </table> <!--END/Газета--> </div> <div class="submenutext" id="sm5"> <!--Навигация--> <table align="center" border="1" cellpadding="5" cellspacing="2" style="width: 90%; height: 500px;"> <tbody> <tr style="height: 20%;"> <td style="text-align: center; width: 50%;"><img alt="" src="ссылка"></td> <td style="text-align: center; width: 50%;"><img alt="" src="ссылка"></td> </tr> <tr style="vertical-align: top; "> <td style="text-align: center; width: 50%; height: 400px;"> <div style="overflow-y: auto; height: 400px;"> <p>Текст с прокруткой</p> <p>Текст с прокруткой </p> <p>Текст с прокруткой </p> <p>Текст с прокруткой </p> <p>Текст с прокруткой</p> <p>Текст с прокруткой</p> <p>Текст с прокруткой </p> <p>Текст с прокруткой</p> <p>Текст с прокруткой </p> <p>Текст с прокруткой</p> <p>Текст с прокруткой </p> <p>Текст с прокруткой</p> <p>Текст с прокруткой </p> <p>Текст с прокруткой</p> <p>Текст с прокруткой </p> <p>Текст с прокруткой</p> <p>Текст с прокруткой </p> <p>Текст с прокруткой</p> <p>Текст с прокруткой </p> <p>Текст с прокруткой</p> <p>Текст с прокруткой </p> <p>Текст с прокруткой</p> <p>Текст с прокруткой </p> </div> </td> <td style="text-align: center; width: 50%;"> <div style="overflow-y: auto; height: 400px;"> <p>Текст с прокруткой </p> <p>Текст с прокруткой</p> <p>Текст с прокруткой</p> <p>Текст с прокруткой</p> <p>Текст с прокруткой</p> <p>Текст с прокруткой </p> <div>Текст с прокруткой</div> <div> <p>Текст с прокруткой </p> <div>Текст с прокруткой</div> <div> <p>Текст с прокруткой </p> <div>Текст с прокруткой</div> <div> </div> <div>Текст с прокруткой </div> </div> </div> </div> </td> </tr> </tbody> </table> <!--END/Навигация--></div> <div class="submenutext" id="sm6"> <table align="center" border="1" cellpadding="5" cellspacing="2" style="width: 90%; height: 500px;"> <tbody> <tr style="height: 7%;"> <td style="text-align: center; width: 50%;"> <div style="overflow-y: auto;">Баннер</div> </td> </tr> <tr style="height: 5%; font-size: 12px;"> <td style="text-align: center; width: 50%;"> <div style="overflow-y: auto;"><code>Код </code></div> </td> </tr> <tr style="height: 20%;"> <td style="text-align: center; width: 50%; "> <div style="overflow-y: auto;">Остальные</div> </td> </tr> </tbody> </table> </div> </div> </td> </tr> </tbody> </table> </center> <style type="text/css">#menu { margin-top: -5px; width: 180px; height: 60px; background-repeat : no-repeat;} #menu span { text-align:left; display:block; color:#000000; margin: 7px 0; padding: 11px; } #submenu, #menu span { border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; background:transparent; } #menu .tabactive { color: #000000; background:rgba(255, 255, 255, 0.28); font-family: Lucida Console; letter-spacing: 1px; font-size: 12px; } #menu span { font-family: Lucida Console; letter-spacing: 1px; font-size: 12px; } #submenu { padding: 6px; height: 500px; text-align: center; font-size: 1.0em; width: 540px; } .submenutext { display: none; width: 111%; }</style> <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>
Jii-Jo
Спасибо большое.
Jii-Jo
А не подскажите, какого размера окошки для картинок?
Сова717
180px на 60px
Пожалуйста
Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Заказать дизайн, графику или скрипты » Заказать верстку и скрипты » Таблица с контейнирами.