1. Ссылка на форум:
http://cwtpoa.mybb.ru/
2. Эскиз таблицы:
3. Дополнительные предпочтения:
-
🎧 Подкаст «НЕТЕРОЛЕВЫЕ»
Рассказываем и обсуждаем Форумные Ролевые Игры (ФРПГ).
Telegram Обсудить
ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Заказать дизайн, графику или скрипты » Заказать верстку и скрипты » Таблица. HTML.
1. Ссылка на форум:
http://cwtpoa.mybb.ru/
2. Эскиз таблицы:
3. Дополнительные предпочтения:
-
Могу попробовать сделать, но уточните размеры таблицы и ячеек
Вместо нас никто не полезет в наши окопы
Лайфстрим
высота - 350 px
ширина - 725 px
283х350 - первый скрин, вертикальные полосы прокрутки
159х350 - первый скрин, узкая полоса для ссылок
230х350 - второй скрин, вертикальная полоса прокрутки (размер аватарок, если считать именно по этим размерам: 109 в ширину и 160 в высоту. Расстояние между ними и от краев таблицы/границы в 10 px)
725х110 - третий скрин, узкая полоса для аватарок
241х240 - узкая полоса посредине (ширина всех трех колонок одинаковая - 241 px)
Я не знал, какие именно размеры Вам нужны, поэтому постарался отмерить как можно точнее. Отличаться, конечно же, может, все на Ваше усмотрение. Заранее спасибо с:
241х240 - узкая полоса посредине
а где на скрине она изображена? я вижу только 3 колонки
Вместо нас никто не полезет в наши окопы
В общем вот что получилось.
Код:<!--Контейнер с вкладками для информации--> <style> .container1 {width: 725px; margin: 0 auto; padding: 0;} ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 40px; width: 100%; } ul.tabs li { float: left; margin: 0; padding: 0; height: 38px; line-height: 40px; overflow: hidden; position: relative; border: 1px solid black; margin-left: 140px; } ul.tabs li a { text-decoration: none; color: black; display: block; padding: 0 5px; outline: none; } ul.tabs li a:hover { background: url(); border-bottom: 0px solid #000000; border-top: 0px solid #000000; border-left: 0px solid #000000; border-right: 0px solid #000000; } html ul.tabs li.active { background: transparent; box-shadow: 0px 0px 1px black; } html ul.tabs li.active a:hover { background: transparent; } .tab_container1 { clear: both; background: transparent; box-shadow: 0 0 6px rgba(0, 0, 0, 0.6); -khtml-border-radiua: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px; -webkit-border-radius: 4px; } .tab_content { padding: 5px; } .tab_content h2 { font-weight: normal; padding-bottom: 2px; border-bottom: 0px dashed #000000; } </style>
Код:<!--Контейнер с вкладками для информации--> </style> <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>
Код:<ul class="tabs"> <li class="active"><a href="#tab1">Новости</a></li> <li class=""><a href="#tab2">Персонажи</a></li> <li class=""><a href="#tab3">Реклама</a></li> </ul> <div class="tab_container1"> <div style="display: none;" id="tab1" class="tab_content"> <table border="1" cellpadding="1" cellspacing="1" style="width: 100%; height: 332px;"> <tbody> <tr> <td style="width: 39%; text-align: center;"><div style="height: 332px; width: 100%; overflow-y: scroll; overflow-x: hidden;"> Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст <div></div></div></td> <td style="width: 22%; text-align: center;"><div style="height: 332px; width: 100%; overflow-y:auto; overflow-x: hidden;"> <p><a href="url">Ссылка</a></p> <p><a href="url">Ссылка</a></p> <p><a href="url">Ссылка</a></p> <p><a href="url">Ссылка</a></p> <p><a href="url">Ссылка</a></p> <p><a href="url">Ссылка</a></p> <p><a href="url">Ссылка</a></p> <div></div></div></td> <td style="width: 39%; text-align: center;"><div style="height: 332px; width: 100%; overflow-y: scroll; overflow-x: hidden;"> Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст <div></div></div></td> </tr> </tbody> </table> </div> <div style="display: block;" id="tab2" class="tab_content"> <table border="1" cellpadding="1" cellspacing="1" style=" width: 100%; height: 332px;"> <tbody> <tr> <td style="width: 32%; text-align: center;"><div style="height: 100%;width: 100%; overflow-y: scroll; overflow-x: hidden;"> Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Т<div></div></div></td> <td style="text-align: center; cellpadding: 10px"><div style="height: 100%; width: 100%; overflow-y: scroll; overflow-x: hidden; cellpadding: 10px"> <img src="http://sd.uploads.ru/Zik4n.jpg"> <img src="http://sd.uploads.ru/Zik4n.jpg"> <img src="http://sd.uploads.ru/Zik4n.jpg"> <img src="http://sd.uploads.ru/Zik4n.jpg"> <img src="http://sd.uploads.ru/Zik4n.jpg"> <img src="http://sd.uploads.ru/Zik4n.jpg"> <div></div></div></td> </tr> </tbody> </table> </div> <div style="display: none;" id="tab3" class="tab_content"> <table border="1" cellpadding="1" cellspacing="1" style="width: 100%; height: 332px;"> <tbody> <tr> <td colspan="3" style="text-align: center;height: 110px;">Баннеры</td> </tr> <tr> <td style="width: 33%; height: 222px; text-align: center;"><div style="height: 100%; width: 100%; overflow-y: auto; overflow-x: hidden;"> Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст <div></div></div></td> <td style="width: 33%; height: 222px; text-align: center;"><div style="height: 100%; width: 100%; overflow-y:auto; overflow-x: hidden;"> <p><a href="url">Ссылка</a></p> <p><a href="url">Ссылка</a></p> <p><a href="url">Ссылка</a></p> <p><a href="url">Ссылка</a></p> <p><a href="url">Ссылка</a></p> <p><a href="url">Ссылка</a></p> <p><a href="url">Ссылка</a></p> <div></div></div></td> <td style="width: 33%; height: 222px; text-align: center;"><div style="height: 100%; width: 100%; overflow-y: auto; overflow-x: hidden;"> Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст <div></div></div></td> </tr> </tbody> </table> </div> </div>
Прокрутка стоит во всех колонках, только она появится в том случае, если размер текста будет больше размера таблица (пример вкладка 3). Если хотите её совсем убрать найдите строчку в объявлении (общий вид строки начитается с тега <td>)
<div style="height: 100%; width: 100%; overflow-y: scroll; overflow-x: hidden;">
Замените
scroll - всегда добавляются полосы прокрутки
на
auto - полосы прокрутки добавляются только при необходимости
Если надо совсем убрать прокрутку, то замените на hidden - отображается только область внутри элемента, остальное будет скрыто.
P.S. Извиняюсь за выбор картинок во второй вкладке, использовались просто для примера. Если будут косяки, то сообщите - будем исправлять
Вместо нас никто не полезет в наши окопы
Лайфстрим
Спасибо большое, все чудесно)
Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Заказать дизайн, графику или скрипты » Заказать верстку и скрипты » Таблица. HTML.