Если вдруг вы совсем не умеете работать с таблицами, а скрипты даже после объяснений кажутся темным лесом, вы можете таблицу на форум заказать. Можно нарисовать в любом редакторе внешний вид или просто подробно описать все словами.
Все перестановки и видоизменения таблиц тоже можем помочь провернуть.
Заказ таблиц и помощь с ними
Сообщений 1 страница 30 из 48
Поделиться113.10.13 01:02:01
Поделиться210.09.14 18:14:34
- Доброго!
Можно ли попросить о помощи с таблицей?
Взят следующий код таблы
<!--Контент слайдера--> <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> </ul> <div class="tab_container"> <div class="tab_content" id="tab1" style="display: block;"> <table cellspacing="10" width="100%"> <tbody> <tr> <td width="50%" rowspan="2">Приветствие</td> <td width="50%">Администраторы</td> </tr> <tr> <td width="50%">Модераторы</td> </tr> </tbody> </table> </div> <div class="tab_content" id="tab2" style="display: none;"> Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. </div> <div class="tab_content" id="tab3" style="display: none;"> Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. </div> <div class="tab_content" id="tab4" style="display: none;"> Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. </div> </div> <!--/Контент слайдера--> <!--Стили слайдера--> <style type="text/css"> ul.tabs { float: left; list-style: none outside none; margin-left: -2px; padding: 0px; width: 100%; } ul.tabs li { float: left; overflow: hidden; padding: 0px; position: relative; width: 200px; text-align: center; } ul.tabs li.active { color: #000000; } ul.tabs li a { outline: medium none; padding: 0px 10px; } ul.tabs li a:hover, ul.tabs li a:focus, ul.tabs li a:active { color: #000000; } .tab_container { overflow: hidden; clear: both; width: 800px; } .tab_content { padding: 5px; } </style> <!--/Стили слайдера--> <!--Do magic :)--> <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>
Хотелось бы спросить, как решить две проблемы:
1) - При нажатии на любую вкладку табла выкидывает в самый верх - то бишь, экран убегает в изначальное положение (действует лишь когда нажимаешь на вкладку при "опущенной" прокрутке).
2) - Как изменить стиль названий текстовых вкладок? К примеру, поменять шрифт?
Ссылка на форум, где установлена таблица - http://fmamr.ru/pages/home
Поделиться310.09.14 20:07:07
При нажатии на любую вкладку табла выкидывает в самый верх
Не могу понять, в чем проблема, в скрипте проблемы нет точно. Возможно, конфликтует с чем-то, но не могу найти, с чем именно, увы ):
Как изменить стиль названий текстовых вкладок? К примеру, поменять шрифт?
Если каждый отдельно, можно название вкладок в теги одеть, по формату такому, например
<li class="active"><a href="#tab1"><font size="5" face="Arial">Вкладка 1</font></a></li>
Если все вместе, то находим
ul.tabs li {
float: left;
overflow: hidden;
padding: 0px;
position: relative;
width: 200px;
text-align: center;
}
и дописываем, что нужно между скобками
ul.tabs li.active {
color: #000000;
}
- это для активной вкладки, если захочется как-то ее выделить
некоторые теги, для примера
font-size: 12px; - размер шрифта
font: arial; - шрифт
Поделиться411.09.14 11:18:11
Chibi
- Спасибо *__* А можно ли тогда заказать у вас такую же таблицу (просто четыре переключаемые вкладки под ширину форума, заполнение наше)?) Просто остальные таблицы, в том числе и иные таблицы такого же плана, идут у нас хорошо, а вот эта дергается невесть от чего х__х
Поделиться511.09.14 20:30:28
SamTayJerome
попробуйте вот эту тогда (:
Если где-то напортачила - скажите, исправлю.
<center><table style="width: 100%;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td align="center"> <div id="menu"> <span alt="#sm1" style="cursor: pointer;"><font size="3" face="book antiqua">Будем знакомы</font></span> <span alt="#sm2" style="cursor: pointer;"><font size="3" face="book antiqua">В Аместрисе сейчас</font></span> <span alt="#sm3" style="cursor: pointer;"><font size="3" face="book antiqua">Навигация</font></span> <span alt="#sm4" style="cursor: pointer;"><font size="3" face="book antiqua">Наши друзья</font></span> </div> </td></tr> <tr> <td id="MenuTxT" align="center" valign="top"> <div id="submenu"> <div id="sm1" class="submenutext" style="display:block;"> <table cellspacing="10" width="100%"> <tbody> <tr> </tr></tbody></table><table style="table-layout: fixed; width: 100%;"> <tbody> <tr> <td colspan="2"> <center><a href="http://pleer.com/list2459364RJIB">Аместрийский плеер</a></center> <p><span style="display: block; text-align: center;">Здравствуйте и добро пожаловать в Аместрис, многоуважаемые гости! Возможно, вы пока - всего лишь человеческие души, не обретшие телесной оболочки у нас, а, быть может, уже давно осязаемые персонажи, но мы очень рады видеть вас тут. На этой странице вы можете узнать последние новости, а также основную суть нашего форума. Для перехода в основную часть кликайте по «Аместрису» в меню навигации.<br> Желаем вам хорошего времяпрепровождения и надеемся, что оно будет связано с нами! <br></span></p><center> <b>Внимание!</b></center> На данный момент больше всего мы нуждаемся в персонажах из следующих организаций: Революционеры, «Семиглавый дракон». Из канонов больше всего нам необходимы следующие персонажи: Рой Мустанг; Гордыня; Данте; Уинри Рокбелл. Кроме того, мы также нуждаемся в сюжетных неканонах из <a href="http://fmamr.ru/viewtopic.php?id=7#p10">этой акции</a>.<p></p> </td> </tr> <tr> <td> <p><span style="display: block; text-align: center;"><span style="font-size: small;"><strong><span style="font-family: 'Palatino Linotype', geneva;">Фюреры Аместриса:</span></strong></span></span> ● <a href="http://fmamr.ru/profile.php?id=2">Альфонсо Элрик</a> [фюрер; ГМ; НПС; пиар; проверка анкет; организация] - 603490902; adelarelric; <a href="http://vk.com/alphonso.elric">ВК</a> <br> ● <a href="http://fmamr.ru/profile.php?id=165">Иритель</a> [зам.фюрера; ГМ; НПС] - <a href="http://vk.com/pacrolash">ВК</a> <br> ● <a href="http://fmamr.ru/profile.php?id=63">Азура</a> [зам.фюрера; проверка анкет] <br> </p><p onclick="$('#spl2').slideToggle('slow');" href="javascript://"><b>➡ Расшифровка обозначений в Аместрисе</b></p> <div id="spl2" style="display: none;"> <p><strong>Душа из Врат</strong> - гость</p> <p><strong>Аместриец</strong> - игрок</p> <p><strong>Фюрер</strong> - администратор</p> <p><strong>Зам.фюрера</strong> - модератор</p> <br> <br> </div> <p></p> <p></p> </td> <td> <p><span style="display: block; text-align: center;"><span style="font-size: small;"><strong><span style="font-family: 'Palatino Linotype', geneva;">Гордость Мелиссы:</span></strong></span></span> </p><p style="text-align: center;" onclick="$('#spl3').slideToggle('slow');" href="javascript://"><b>➡ Рейтинг аместрийцев</b></p> <div id="spl3" style="display: none;"> <p style="text-align: center;"><i>Рейтинг обновляется раз в неделю! <br>Сброс показаний происходит каждый месяц.</i><br></p> <p style="text-align: center;"><a href="http://fmamr.ru/viewtopic.php?id=413#p17606" target="_blank">Принцип расчёта рейтинга</a></p><p></p> <p style="text-align: center;"> <b>Альфонсо Элрик</b> - 89 <br> <b>Иритель</b> - 85 <br> <b>Эдвард Элрик</b> - 66 <br> <b>Гнев</b> - 49 <br> <b>Зависть</b> - 46 <br> <b>Жестокость</b> - 45 <br> <b>Алчность</b> - 44 <br> <b>Сахи</b> - 42 <br> <b>Жан Хавок</b> - 41 <br> <b>Скварл</b> - 36 </p> <br> </div> <p></p> <p style="text-align: center;" onclick="$('#spl7').slideToggle('slow');" href="javascript://"><b>➡ Особая благодарность</b></p> <div id="spl7" style="display: none;"> <p></p> <br> </div> <p></p> <center><b>Лучший аместриец недели:</b> <span style="color: #800000;"><strong>Эдвард Элрик</strong></span> <br><b>Лучшие аместрийцы месяца:</b> Эдвард Элрик; Ульрих Вальтер; Альфонсо Элрик <br><b>Лучший пост недели:</b> <br>Хавок устремил на него взор, позвал по имени. И даже с места сдвинулся, подползая ближе. Эд перевёл дух. Он понятия не имел, что бы делал, не сумей лейтенант передвигаться. Ал в руках частит мелким кашлем. <a href="http://fmamr.ru/viewtopic.php?id=40#p25471">читать дальше</a></center> <p></p> </td> </tr> </tbody> </table> </div> <div id="sm2" class="submenutext"><br /><br /> <table style="table-layout: fixed; width: 100%;"> <tbody> <tr> <td><span style="display: block; text-align: center;"><span style="font-size: small;"><strong><span style="font-family: 'Palatino Linotype', geneva;">Кратко о фэндоме:</span></strong></span><p></p></span></td> <td><span style="display: block; text-align: center;"><span style="font-size: small;"><strong><span style="font-family: 'Palatino Linotype', geneva;">Кратко о сюжете:</span></strong></span><p></p></span></td> <td><span style="display: block; text-align: center;"><span style="font-size: small;"><strong><span style="font-family: 'Palatino Linotype', geneva;">Очередность постов:</span></strong></span><p></p></span> <p style="text-align: center;"><span style="font-size: x-small;"><strong>(Дата в игре: 01.07.1914; день)</strong></span></p></td> </tr> <tr><td><p> "Стальной алхимик" — манга Хирому Аракавы. Аниме-адаптацию по мотивам манги сняла студия Bones, выпустив 51-серийный аниме-сериал (ТВ-1, по которому мы и играем). Действие сюжета происходит в стране Аместрис, где алхимия широко распространена, как точная наука. Мир "Стального алхимика" по своему антуражу схож с Европой времён промышленной революции. Два главных героя, братья Эдвард и Альфонс Элрики, потерпев провал в попытке с помощью алхимии воскресить свою умершую мать, ищут легендарный философский камень, чтобы вернуть руку и ногу Эдварда и тело Альфонса, утраченные в ходе неудачной трансмутации.</p> </td> <td> <p> АУ конца ТВ-1. Элрики достигли своей цели, вернув Альфонсу тело, однако он потерял память и не помнит ничего с момента трансмутации матери. Казалось бы, гомункулы повержены, все счастливы... Но никто не ожидал, что у Данте найдётся ученик, который сможет воскресить учителя, пусть и в виде гомункула. Теперь женщина хочет стать настоящим человеком, и для достижения своей цели пойдёт на всё - начиная от создания армии гомункулов и заканчивая пропагандой своей религии и сжигания еретиков. </p> </td> <td> <p> </p><p onclick="$('#spl1').slideToggle('slow');" href="javascript://"><span style="font-size: small;"><strong><span style="font-family: 'Palatino Linotype', geneva;">➡ Сюжетные эпизоды</span></strong></span></p> <div id="spl1" style="display: none;"> <a href="http://fmamr.ru/viewtopic.php?id=41">Улицы Централа [Централ]</a> - Эдвард Элрик, <u>Альфонсо Элрик</u> | Макс Веббер, <u>Жан Хавок</u> <br> <a href="http://fmamr.ru/viewtopic.php?id=47#p50">Лиор</a> - <u>Гнев</u>, НПС <br> <a href="http://fmamr.ru/viewtopic.php?id=37">Переулки</a> - Жестокость, Алчность, Скварл, Ульрих Вальтер, <u>Сахи</u> <br> <br> </div> <p></p> <p onclick="$('#spl4').slideToggle('slow');" href="javascript://"><span style="font-size: small;"><strong><span style="font-family: 'Palatino Linotype', geneva;">➡ Личные эпизоды</span></strong></span></p> <div id="spl4" style="display: none;"> <a href="http://fmamr.ru/viewtopic.php?id=37">Переулки [Централ]</a> - Азура, <u>Пакролаш Итсига</u> <br> <br> </div> <p></p> <p onclick="$('#spl5').slideToggle('slow');" href="javascript://"><span style="font-size: small;"><strong><span style="font-family: 'Palatino Linotype', geneva;">➡ Овы</span></strong></span></p> <div id="spl5" style="display: none;"> <br> <br> </div> <p></p> <p onclick="$('#spl6').slideToggle('slow');" href="javascript://"><span style="font-size: small;"><strong><span style="font-family: 'Palatino Linotype', geneva;">➡ Бонусные серии</span></strong></span></p> <div id="spl6" style="display: none;"> <br> <br> </div> <p></p> <br> <b>Важно для игры:</b><br> <a href="http://fmamr.ru/viewtopic.php?id=9">Сюжет</a><br> <a href="http://fmamr.ru/viewtopic.php?id=12">Помощь по игре</a><br> <a href="http://fmamr.ru/viewtopic.php?id=10">Хронология игры</a><br> <a href="http://fmamr.ru/viewtopic.php?id=11">Погода</a> </td> </tr> </tbody> </table> </div> <div id="sm3" class="submenutext"><br /><br /> <table style="table-layout: fixed; width: 100%;"> <tbody> <tr> <td colspan="4"> </td> </tr> <tr> <td> <span style="display: block; text-align: center;"><span style="font-size: small;"><strong><span style="font-family: 'Palatino Linotype', geneva;">Душам:</span></strong></span></span> </td> <td> <span style="display: block; text-align: center;"><span style="font-size: small;"><strong><span style="font-family: 'Palatino Linotype', geneva;">Аместрийцам:</span></strong></span></span> </td> <td> <span style="display: block; text-align: center;"><span style="font-size: small;"><strong><span style="font-family: 'Palatino Linotype', geneva;">Мероприятия:</span></strong></span></span> </td> <td> <span style="display: block; text-align: center;"><b><span style="font-size: small;"><strong><span style="font-family: 'Palatino Linotype', geneva;">Пиарщикам:</span></strong></span></b></span> </td> </tr> <tr> <td> ● <a href="http://fmamr.ru/viewtopic.php?id=2">Гостевая</a> <br> ● <a href="http://fmamr.ru/viewtopic.php?id=3">Подробная навигация</a><br> ● <a href="http://fmamr.ru/viewtopic.php?id=10">Хронология игры</a><br> ● <a href="http://fmamr.ru/viewtopic.php?id=9">Сюжет</a><br> ● <a href="http://fmamr.ru/viewtopic.php?id=13">Правила</a><br> ● <a href="http://fmamr.ru/viewtopic.php?id=8">Шаблон анкеты</a> <br> ● <a href="http://fmamr.ru/viewforum.php?id=3">Акции</a> <br> ● <a href="http://fmamr.ru/viewtopic.php?id=14">FAQ по миру</a> и <a href="http://fmamr.ru/viewtopic.php?id=4">форуму</a> <br> ● <a href="http://fmamr.ru/viewtopic.php?id=410">Организации</a> <br> ● <a href="http://fmamr.ru/viewtopic.php?id=26">Способности</a> <br> ●<a href="http://fmamr.ru/viewtopic.php?id=27">Энергия|Жизнь</a> <br> ● <a href="http://fmamr.ru/viewtopic.php?id=15">Описание серий</a> <br> ● <a href="http://fmamr.ru/viewtopic.php?id=22">Список внешностей</a> и <a href="http://fmamr.ru/viewtopic.php?id=23">имён гос.алхимиков</a> <p></p> </td> <td> <p> ● <a href="http://fmamr.ru/viewtopic.php?id=21">Смена/создание организации</a><br> ● <a href="http://fmamr.ru/viewtopic.php?id=432">Редактирование анкет</a> <br> ● <a href="http://fmamr.ru/viewtopic.php?id=31">Заказ локаций</a> <br> ● <a href="http://fmamr.ru/viewtopic.php?id=30">Заказ аватара</a> <br> ● <a href="http://fmamr.ru/viewtopic.php?id=28">Ф.К., К.К. и души</a><br> ● <a href="http://fmamr.ru/viewtopic.php?id=25">Бонусы</a> <br> ● <a href="http://fmamr.ru/viewtopic.php?id=79">Подарки</a> <br> ● <a href="http://fmamr.ru/viewtopic.php?id=78">Награды</a><br> ● <a href="http://fmamr.ru/viewtopic.php?id=300#p9512">Сделаем Мелиссу лучше</a> <br> ● <a href="http://fmamr.ru/viewtopic.php?id=24">Отсутствие, уход, возвращение</a> </p> </td> <td> <p> ● <a href="http://fmamr.ru/viewtopic.php?id=489">«Zoo»</a> <br> ● <a href="http://fmamr.ru/viewtopic.php?id=390#p15181">Викторина vol.2</a> <br> ● <a href="http://fmamr.ru/viewtopic.php?id=412">Лучшие посты недели</a> <br> ● <a href="http://fmamr.ru/viewtopic.php?id=413">Лучшие аместрийцы недели|месяца</a> </p> </td> <td> <p> ● <a href="http://fmamr.ru/viewtopic.php?id=73">Наши листовки</a> <br>● <a href="http://fmamr.ru/viewtopic.php?id=444">Ваши листовки. Глава 7</a> <br>● <a href="http://fmamr.ru/viewtopic.php?id=74">Баннерообмен</a> <br>● <a href="http://fmamr.ru/viewtopic.php?id=341#p12645">Обмен кликами в топе</a> <br>● <a href="http://fmamr.ru/viewtopic.php?id=76#p79">Правила и заявки партнёрства</a> <br>● <a href="http://fmamr.ru/viewtopic.php?id=72">Как правильно пиарить?</a> </p> </td> </tr> <tr> </tr></tbody> </table> </div> <div id="sm4" class="submenutext"><br /><br /> <a href="http://sw.webtalk.ru/" target="_blank"> <img src="http://uploads.ru/t/o/k/1/ok12U.jpg" title=" Bleach: Swords' world"></a> <a href="http://hanami.rolka.su/" target="_blank"><img src="http://savepic.org/4914951.png" title="Поиграем в любовь?"></a> <a href="http://silvermillennium.anihub.ru/"><img src="https://forumstatic.ru/files/0013/9c/f9/45772.gif" title="Sailor Moon. Silver Millennium"></a> <a href="http://bleach-z.ru/" target="_blank"> <img src="http://s4.uploads.ru/6ypF3.gif" title="FRPG: BLEACH. ZKNR"></a> <a href="http://mybloodydemon.mybb.ru" target="_blank"><img src="http://savepic.ru/3224301.gif"></a> <a href="http://str.rolebb.ru/"><img src="http://i052.radikal.ru/1208/47/ccce1e6d4af6.gif"></a> <a href="http://historyisnow.mybb.ru/" target="_blank" title="Hetalia: history is now"><img src="http://sc.uploads.ru/aZPhK.gif"></a> <a href="http://ftparallel.rusff.me/"><img src="http://sb.uploads.ru/4hgRd.jpg"></a> <a href="http://eisen.anihub.ru/"><img src="http://savepic.net/5950507.png" title="Eisen"></a> <a title="To Aru Majutsu no Index" href="http://majutsunoindex.anihub.ru/"><img src="http://s9.uploads.ru/lT58N.gif" border="0"></a> <a href="http://raiden.anihub.ru/"><img src="http://s018.radikal.ru/i509/1403/e2/1b8c425ec6eb.gif" width="88" height="31" border="0"></a> <a href="http://dnnextlife.rolka.su" target="_blank"><img src="http://i52.fastpic.ru/big/2013/0324/55/f9e64d7e743e9acca1dc620fb493e755.gif" border="0" title="Death note: Next Life" width="88" height="31"></a> <a href="http://peacefullwar.rolka.su" target="_blank"><img src="http://s5.uploads.ru/3ewfD.gif" border="0" title="Мирная Война между расами демонов, вампиров и людей" width="88" height="31"></a> </div> </div> </td> </tr> </tbody> </table></center> <style> #menu {margin: 0px;} #menu span { padding: 25px; margin: 0px; width: 200px; } #submenu { padding: 0px; width: 800px; height: 260px; } .submenutext { display: none; width: 798px; height: 258px;} </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>
Поделиться612.09.14 20:10:46
Chibi
- Спасибо *_*
Поделиться713.04.15 13:28:36
Доброго времени суток!
Ширина таблицы – 900px; Высота таблицы – 440px; Границы таблицы, как и прокрутка указаны на эскизе. Прокрутка обозначена красным цветом.(!); ; Таблица в объявлении должна стоять по центру. По любым вопросам обращаться в ЛС, как и с готовым результатом.
http://sh.uploads.ru/4slN6.png
Отредактировано uwa (13.04.15 13:29:40)
Поделиться813.04.15 19:42:18
uwa
добра (:
<table style="width: 900px; height: 440px; text-align: center; vertical-align: top;"> <tr style="height: 220px; vertical-align: top;"> <td style="width: 250px; border: solid 1px; border-radius: 15px;"><div style="font-size: 13px; text-align: center;">Приветствие</div><div style="position: relative; height: 210px; overflow:auto;"> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </div></td> <td style="width: 170px; border: solid 1px; border-radius: 15px;"><div style="font-size: 13px; text-align: center;">Полезные ссылки</div><br> <a href="ссылка">название</a><br> <a href="ссылка">название</a><br> <a href="ссылка">название</a><br> <a href="ссылка">название</a><br> <a href="ссылка">название</a><br> <a href="ссылка">название</a><br> <a href="ссылка">название</a><br> <a href="ссылка">название</a><br> <a href="ссылка">название</a><br> <a href="ссылка">название</a> </td> <td style="width: 250px; border: solid 1px; border-radius: 15px;"><div style="font-size: 13px; text-align: center;">В игре</div><div style="position: relative; height: 210px; overflow:auto;"> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </div></td> <td style="width: 230px; height: 440px; border: solid 1px; border-radius: 15px;" rowspan="2"><div style="font-size: 13px; text-align: center;">Новости</div><div style="position: relative; height: 435px; overflow:auto;"> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </div></td> </tr> <tr style="height: 220px; vertical-align: top;"><td style="width: 200px; border: solid 1px; border-radius: 15px;"> <div style="font-size: 13px; text-align: center;">Администрация</div> <a href="ссылка"><img src="картинка"></a> <a href="ссылка"><img src="картинка"></a> <a href="ссылка"><img src="картинка"></a> <br><br> <div style="font-size: 13px; text-align: center;">Модераторы</div> <a href="ссылка"><img src="картинка"></a> <a href="ссылка"><img src="картинка"></a> <a href="ссылка"><img src="картинка"></a> <br> <a href="ссылка"><img src="картинка"></a> <a href="ссылка"><img src="картинка"></a> <a href="ссылка"><img src="картинка"></a> </td> <td style="width: 150px; border: solid 1px; border-radius: 15px;"><div style="font-size: 13px; text-align: center;">Лучшие игроки</div><br> <a href="ссылка"><img src="картинка"></a> <a href="ссылка"><img src="картинка"></a> <a href="ссылка"><img src="картинка"></a> <br><br> <table style="text-align: center; width: 150px;"><tr> <td style="width: 70%;">Лучшая пара<br> <a href="ссылка"><img src="картинка"></a></td> <td style="width: 30%;">Герой<br> <a href="ссылка"><img src="картинка"></a></td> </tr></table> </td> <td style="width: 250px; border: solid 1px; border-radius: 15px;"><div style="font-size: 13px; text-align: center;">Погода</div><div style="position: relative; height: 210px; overflow:auto;"> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </div></td> </tr></table>
Поделиться914.04.15 15:09:23
chibi
Великолепно! Большое спасибо.
Поделиться1006.07.15 14:51:34
Доброго времени суток. Таблица уже есть готовая, но никак не соображу, что куда вставлять, чтобы новости ( как у вас в шапке) прокручивались. Заранее спасибо!
<table bgimage='#ffffff' cellpadding='1' cellspacing='1' border='0' align='center' width='880px'> <tr tr valign=top align=center> <td width='220px'> <img src="http://s1.uploads.ru/i/j00K5.png" alt="" border="0"> <br><a href="http://territoryoferrors.mybb.ru/viewforum.php?id=6t=" class="tvm" target="">Сюжет </a> <a href="http://territoryoferrors.mybb.ru/viewtopic.php?id=4" class="tvm" target="">Правила</a> <a href="http://territoryoferrors.mybb.ru/viewtopic.php?id=3" class="tvm" target="">Задать вопрос </a> <a href="http://territoryoferrors.mybb.ru/viewtopic.php?id=5" class="tvm" target="">Шаблон анкеты </a> <a href="http://territoryoferrors.mybb.ru/viewtopic.php?id=78" class="tvm" target="">Wanted! </a> <br><img src="http://s1.uploads.ru/i/Gh1W2.png" alt="" border="0"> <br><br>Топы, Топы, Топы</td> <td width='300px'> <img src="http://s1.uploads.ru/i/rsRkz.png" alt="" border="0"> <br> Добро пожаловать на «Территорию заблуждений». Форум открывает свои двери и приглашает всех желающих посетить самые дальние уголки вселенной! Ведётся активный набор игроков и модераторов. Будем рады любой инициативе с вашей стороны. На форуме приемлем любой вид отношений, в том числе и слэш. </td> <td width='230px'> <img src="http://s1.uploads.ru/i/Bvbgh.png" alt="" border="0"> <br><br> <img src="http://s1.uploads.ru/i/4WlgO.png" alt="" border="0"> <br><br> <a href="http://forum-top.ru/vote/4348" title="Рейтинг форумов Forum-top.ru" target="blank"><img src="http://forum-top.ru/uploads/buttons/forum-top_88x31_1" alt="Рейтинг форумов Forum-top.ru" /></a> <a href="http://awesome.f-rpg.ru/"><img src="http://awesome.f-rpg.ru/files/0015/94/f6/34000.gif"></a><a href="http://invertedparadise.anihub.ru/"><img src="http://se.uploads.ru/n8e2A.gif" title="Inverted Paradise"></a> <a href="https://futura.rusff.me/"><img src="https://forumstatic.ru/files/0013/61/45/19664.gif" title="каталог аниме форумов"></a></td> </tr></tbody> </table> </td> </tr> </table>
Поделиться1106.07.15 23:23:45
Monada
так
код вот
<table bgimage='#ffffff' cellpadding='1' cellspacing='1' border='0' align='center' width='880px'> <tr tr valign=top align=center> <td width='220px'> <img src="http://s1.uploads.ru/i/j00K5.png" alt="" border="0"> <br><a href="http://territoryoferrors.mybb.ru/viewforum.php?id=6t=" class="tvm" target="">Сюжет </a> <a href="http://territoryoferrors.mybb.ru/viewtopic.php?id=4" class="tvm" target="">Правила</a> <a href="http://territoryoferrors.mybb.ru/viewtopic.php?id=3" class="tvm" target="">Задать вопрос </a> <a href="http://territoryoferrors.mybb.ru/viewtopic.php?id=5" class="tvm" target="">Шаблон анкеты </a> <a href="http://territoryoferrors.mybb.ru/viewtopic.php?id=78" class="tvm" target="">Wanted! </a> <br><img src="http://s1.uploads.ru/i/Gh1W2.png" alt="" border="0"> <br><br>Топы, Топы, Топы</td> <td width='300px'> <img src="http://s1.uploads.ru/i/rsRkz.png" alt="" border="0"> <br> <div style="overflow: auto; overflow-x: hidden; height: 200px; padding-right: 3px;"> Добро пожаловать на «Территорию заблуждений». Форум открывает свои двери и приглашает всех желающих посетить самые дальние уголки вселенной! Ведётся активный набор игроков и модераторов. Будем рады любой инициативе с вашей стороны. На форуме приемлем любой вид отношений, в том числе и слэш. </div></td> <td width='230px'> <img src="http://s1.uploads.ru/i/Bvbgh.png" alt="" border="0"> <br><br> <img src="http://s1.uploads.ru/i/4WlgO.png" alt="" border="0"> <br><br> <a href="http://forum-top.ru/vote/4348" title="Рейтинг форумов Forum-top.ru" target="blank"><img src="http://forum-top.ru/uploads/buttons/forum-top_88x31_1" alt="Рейтинг форумов Forum-top.ru" /></a> <a href="http://awesome.f-rpg.ru/"><img src="http://awesome.f-rpg.ru/files/0015/94/f6/34000.gif"></a><a href="http://invertedparadise.anihub.ru/"><img src="http://se.uploads.ru/n8e2A.gif" title="Inverted Paradise"></a> <a href="https://futura.rusff.me/"><img src="https://forumstatic.ru/files/0013/61/45/19664.gif" title="каталог аниме форумов"></a></td> </tr></tbody> </table> </td> </tr> </table>
перед текстом новостей стоит див, и там есть строчка "height: 200px;", которую можно отрегулировать под вашу форумную таблицу. т.е. если прокрутка будет слишком большой, то поставьте 180px или чуть меньше, если наоборот прокрутка будет слишком маленькой - поставьте 220px. в общем, отрегулируйте под себя (: она будет появляться автоматически, когда будет много текста.
Поделиться1207.07.15 08:39:20
chibi
Чиби-сан спасибо огромное)
Поделиться1312.07.15 20:30:30
день добрый
тут под спойлером схемка, она весьма неаккуратная, за что прошу прощения, но вроде понятно, что там должно быть
ширина таблицы - 900 пикселей, высота ориентировочно на 350
красные штучки - полосы прокрутки
должна быть по центру
очень сильно надеюсь на вас :<
Поделиться1412.07.15 22:22:21
kou
а фон нужен.. такой же? или это просто как картинка? (:
нужны ли всплывающие окошечки для администрации/активистов?
завтра сделаю
Поделиться1512.07.15 23:32:14
chibi
фон не нужен х) просто цвет оставила, чтобы было видно разделение между колонками
о, окошечки. как я могла про них забыть вообще, дырявая моя голова
заранее благодарю за помощь :>
Поделиться1613.07.15 14:55:00
kou
в цвета css (второе окно) нужно вставить стиль всплывающих подсказок
.toltip { border: none; text-decoration: none; position: relative; padding: 0px 15px;} .toltip span { margin-left: -999em; position: absolute;} .toltip:hover span { font-family:verdana; position: absolute; left: -40px; top: 13px; z-index: 99; margin-left: 0;} .tooltip { border: none; text-decoration: none; position: relative; padding: 0px 10px;} .tooltip span { margin-left: -999em; position: absolute;} .tooltip:hover span { font-family:verdana; position: absolute; left: -10px; top: 13px; z-index: 99; margin-left: 0;} .top { z-index: 200; position: absolute; background-color: #0D1209; color: #474F3E; border: none; box-shadow: 0px 0px 4px #161616; padding: 5px; width: 150px; text-align: center;}
вот эта часть отвечает за внешний вид
.top {
z-index: 200;
position: absolute;
background-color: #0D1209; - фон
color: #474F3E; - цвет текста
border: none;
box-shadow: 0px 0px 4px #161616;
padding: 5px;
width: 150px;
text-align: center;}
ну и сама таблица
<table style="width: 900px; height: 330px; text-align: center; vertical-align: top;"><tr> <td style="width: 300px; height: 175px; vertical-align: top;"><div style="font-family: verdana; font-size: 14px; letter-spacing: 1px; text-align: center; padding-bottom: 5px;">администрация</div> <a href="ссылка" class="toltip"><img src="http://i.imgur.com/IzX5lB9.png"><span class="top"><b>ник</b><br>описание</span></a> <a href="ссылка" class="toltip"><img src="http://i.imgur.com/IzX5lB9.png"><span class="top"><b>ник</b><br>описание</span></a> <a href="ссылка" class="toltip"><img src="http://i.imgur.com/IzX5lB9.png"><span class="top"><b>ник</b><br>описание</span></a> <div style="text-align: justify; padding: 5px 40px 10px 40px;">В обычное время мы все, сознавая это или нет, понимаем, что существует любовь, для которой нет пределов, и тем не менее соглашаемся, и даже довольно спокойно, что наша-то любовь, в сущности, так себе, второго сорта.</div></td> <td style="width: 300px; height: 175px; vertical-align: top;"><div style="font-family: verdana; font-size: 14px; letter-spacing: 1px; text-align: center; padding-bottom: 5px;">о проекте</div> <div style="text-align: justify; padding: 0px 30px 5px 30px;"><div style="height: 100px; overflow:auto; padding-right: 3px;">Разумеется, в наши дни уже никого не удивляет, что люди работают с утра до ночи, а затем сообразно личным своим вкусам убивают остающееся им для жизни время на карты, сидение в кафе и на болтовню. Но есть ведь такие города и страны, где люди хотя бы временами подозревают о существовании чего-то иного. Вообще-то говоря, от этого их жизнь не меняется. Но подозрение все-таки мелькнуло, и то слава Богу.</div></div> <a href="ссылка">название</a>/<a href="ссылка">название</a>/<a href="ссылка">название</a><br> <a href="ссылка">название</a>/<a href="ссылка">название</a> </td> <td style="width: 300px; height: 175px; vertical-align: top;"><div style="font-family: verdana; font-size: 14px; letter-spacing: 1px; text-align: center; padding-bottom: 5px;">новости</div> <div style="text-align: justify; padding: 0px 40px 5px 40px;"><div style="height: 130px; overflow:auto; padding-right: 3px;"> <b>01.07</b> Зато более оригинально другое – смерть здесь связана с известными трудностями. Впрочем, трудность – это не то слово, правильнее было бы сказать некомфортабельность. Болеть всегда неприятно, но существуют города и страны, которые поддерживают вас во время недуга и где в известном смысле можно позволить себе роскошь поболеть. Больной нуждается в ласке, ему хочется на что-то опереться, это вполне естественно. <br><br><b>02.06</b> Но в Оране все требует крепкого здоровья: и капризы климата, и размах деловой жизни, серость окружающего, короткие сумерки и стиль развлечений. Больной там по-настоящему одинок… Каково же тому, кто лежит на смертном одре, в глухом капкане, за сотнями потрескивающих от зноя стен, меж тем как в эту минуту целый город по телефону или за столиками кафе говорит о коммерческих сделках, коносаментах и учете векселей. И вы поймете тогда, до чего же некомфортабельна может стать смерть, даже вполне современная, когда она приходит туда, где всегда сушь.</div></div> </td></tr> <tr><td style="width: 300px; height: 155px; vertical-align: top;"><div style="font-family: verdana; font-size: 14px; letter-spacing: 1px; text-align: center; padding-bottom: 5px;">активисты</div> <a href="ссылка" class="toltip"><img src="http://i.imgur.com/IzX5lB9.png"><span class="top"><b>ник</b><br>описание</span></a> <a href="ссылка" class="toltip"><img src="http://i.imgur.com/IzX5lB9.png"><span class="top"><b>ник</b><br>описание</span></a> <a href="ссылка" class="toltip"><img src="http://i.imgur.com/IzX5lB9.png"><span class="top"><b>ник</b><br>описание</span></a> <br><br><br> <a href="ссылка" class="toltip"><img src="http://i.imgur.com/IzX5lB9.png"><span class="top"><b>ник</b><br>описание</span></a> <a href="ссылка" class="toltip"><img src="http://i.imgur.com/IzX5lB9.png"><span class="top"><b>ник</b><br>описание</span></a> <a href="ссылка" class="toltip"><img src="http://i.imgur.com/IzX5lB9.png"><span class="top"><b>ник</b><br>описание</span></a> <br></td> <td style="width: 300px; height: 155px; vertical-align: top;"><div style="font-family: verdana; font-size: 14px; letter-spacing: 1px; text-align: center; padding-bottom: 5px;">лучшие месяца</div> <a href="ссылка" class="tooltip"><img src="http://i.imgur.com/czDKEOH.png"><span class="top"><b>ник</b><br>описание</span></a> <a href="ссылка" class="tooltip"><img src="http://i.imgur.com/czDKEOH.png"><span class="top"><b>ник</b><br>описание</span></a> </td> <td style="width: 300px; height: 155px; vertical-align: top;"><div style="font-family: verdana; font-size: 14px; letter-spacing: 1px; text-align: center; padding-bottom: 5px;">партнеры</div> <div style="padding: 0px 40px 5px 40px;"><div style="height: 110px; overflow: auto; padding-right: 1x;"> баннеры партнеров тут </div></div></td></tr></table>
Поделиться1713.07.15 18:09:04
chibi
спасибо огромное *^* вы меня очень выручили
Поделиться1805.08.15 13:18:13
вроде туда
у меня животрепещущий вопрос
как сделать в таблице переключатели, допустим, как тут, и реально ли, чтобы они (переключатели, то бишь) были только в одной колонке?
Поделиться1905.08.15 14:28:26
kou
Таблицы, панельки и пр. В этой теме "контейнер с вкладками" - это то, что ты ищешь. Его нужно видоизменить под дизайн. Вкладки можно и в одной колонке делать, и в одной строке - как угодно
Поделиться2005.08.15 14:55:08
Grey Zeva
спасиб большой
Поделиться2106.08.15 20:18:58
ха-ха
моя таблица в хроме стоит на месте, но в файрфоксе неизбежно уходит вправо
что я делаю не так
костяк таблицы
Код:<ul class="tabs"> <li class="active"><a href="#tab1">Вкладка 1</a></li> <li><a href="#tab2">Вкладка 2</a></li> </ul> <table style="padding: 5px; width: 825px; height: 415px; margin-left: 35px; color: #1b182d; border:1px solid #c22035;"> <tbody> <tr> <td style="width: 275px; height: 415px; vertical-align: top; font-size: 10px; text-align: center;"> </td> <td style="width: 275px; height: 415px; vertical-align: top; font-size: 10px; text-align: center;"> <div class="tab_container1"> <div style="display: block;" id="tab1" class="tab_content"> текст 1 </div> <div style="display: none;" id="tab2" class="tab_content"> текст 2 </div> </div> </td> <td style="width: 275px; height: 415px; vertical-align: top; font-size: 10px; text-align: center;"> </td> </tr> </tbody> </table>часть отвечающая за внешний вид
Код:<style> .container1 {width: 275px; margin: 0 auto; padding: 0;} ul.tabs { margin-left: 375px; padding: 0; float: left; list-style: none; height: 30px; width: 275px; width: 100%; } ul.tabs li { float: left; margin: 0; padding: 0; height: 25px; line-height: 25px; border: 0px; border-top: 1px solid #c22035; border-bottom: 1px solid #c22035; border-right: 1px solid #c22035; border-left: 1px solid #c22035; margin-bottom: 2px; background: url(); overflow: hidden; position: relative; } ul.tabs li a { text-decoration: none; color: transparent; display: block; padding: 0 5px; background: url(); outline: none; } ul.tabs li a:hover { background: url(); border-bottom: 0px solid #1b182d; border-top: 0px solid #1b182d; border-left: 0px solid #1b182d; border-right: 0px solid #1b182d; } html ul.tabs li.active { 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 a:hover { background: url(); border-bottom: 0px solid #160f0a; } .tab_container1 { width: 275px; height: 415px; background-image : url(); border-bottom: 0px solid #000000; border-top: 0px solid #000000; border-left: 0px solid #000000; border-right: 0px solid #000000; } .tab_content { padding: 5px; } .tab_content h2 { font-weight: normal; padding-bottom: 2px; border-bottom: 0px dashed #000000; } </style>
Отредактировано kou (06.08.15 20:20:56)
Поделиться2206.08.15 21:59:19
kou
у тебя ширина нечётная. Одни браузеры этот пиксель влево дают, другие - вправо.
Поделиться2306.08.15 22:27:08
Grey Zeva
ох, спасибо
я уже думала что чего-то не проглядела, а про нечетную ширину не догадывалась даже
UPD
изменение ширины таблицы на четную чего-то не помогло совсем :D
Отредактировано kou (06.08.15 22:32:02)
Поделиться2406.08.15 22:33:47
kou
а сильно едет?
Поделиться2507.08.15 19:37:27
Grey Zeva
практически за пределы экрана, только кусок в несколько пикселей в стороне торчит :D
Поделиться2607.08.15 21:25:20
kou
офигеть. ненавижу лису :DDDD
надо ковыряться и смотреть, тут я уже вряд ли помогу
Поделиться2707.08.15 22:08:00
Grey Zeva
а она ненавидит меня D:
в любом случае я благодарна за попытки спасти меня из пучины безумия
Поделиться2808.08.15 13:43:56
kou
а можно мне ВООБЩЕ весь код таблицы, не только вкладок
что-то подсказывает, что дело в нем
Поделиться2908.08.15 14:43:20
chibi
в этом сообщении все
Поделиться3008.08.15 15:56:16
kou
я просто зашла к тебе на пробник и там таблица немного другая
или отдельно контейнеры тоже едут?..