Кама
Слушайте, вообще - то все кнопки и наверху умещаются. У меня тестовик уже, но и так, все нормально. тэкс Или вы будете картинками заливать?
Да, кстати, вам оформлять как - то нужно? Или вы сами цвета настроите?
Таблицы для форумов
Сообщений 11 страница 20 из 27
Поделиться1103.08.12 21:56
Поделиться1203.08.12 22:09
Бу
Амм, у нас не открываются форумы лайвролка, русфф, опк и др. Так что, я увидеть не могу...
Поделиться1303.08.12 22:20
Кама
Ну, тогда пробуйте, нравится/не нравится, ползет/не ползет
верх
<style> .container1 {width: 900px; margin: 0 auto; padding: 0;} ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 36px; width:790px; } ul.tabs li { float: left; padding-bottom: 10px; margin-left: 0px; height: 12px; margin-top: 10px; line-height: 25px; margin-bottom: -2px; overflow: hidden; position: relative; text-transform: uppercase; font-size: 10px; font-weight: bold; } ul.tabs li a { text-decoration: none; color: transparent; display: block; padding: 0 5px; background: url(); outline: none; } ul.tabs li a:hover { 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:#цвет; border-top: 1px solid #160f0a; border-left: 1px solid #160f0a; border-right: 1px solid #160f0a; border-top-left-radius: 5px; border-top-right-radius: 5px; text-transform: uppercase; font-size: 10px; font-weight: bold; } html ul.tabs li.active a:hover { background: url(); border-bottom: 0px solid #160f0a; } .tab_container1 { clear: both; float: left; width: 790px; height: 335px; background:#цвет; border-radius: 7px; border: 1px solid #160f0a; } .tab_content { padding: 5px; } .tab_content h2 { font-weight: normal; padding-bottom: 2px; border-bottom: 0px dashed #000000; } </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>
объявление
<table> <tr> <td><div class="container"> <div class="html-box"> <ul class="tabs"> <li class="active"><a href="#tab1">Начало</a></li> <li><a href="#tab2">Команда</a></li> <li><a href="#tab3">Сюжет</a></li> <li><a href="#tab4">Баннеры</a></li> <li><a href="#tab5">Конкурсы</a></li><li><a href="#tab6">Европа</a></li> <li><a href="#tab7">Азия</a></li> <li><a href="#tab8">Америка</a></li> <li><a href="#tab9">Африка</a></li> <li><a href="#tab10"> Австралия </a></li> <li><a href="#tab11">Там, где лед.</a></li> </ul> <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 style="display: none;" id="tab3" class="tab_content"> текст 3 </div> <div style="display: none;" id="tab4" class="tab_content"> текст 4 </div> <div style="display: none;" id="tab5" class="tab_content"> текст 5 </div> <div style="display: none;" id="tab6" class="tab_content"> текст 6 </div> <div style="display: none;" id="tab7" class="tab_content"> текст 7 </div> <div style="display: none;" id="tab8" class="tab_content"> текст 8 </div> <div style="display: none;" id="tab9" class="tab_content"> текст 9 </div> <div style="display: none;" id="tab10" class="tab_content"> текст 10 </div> <div style="display: none;" id="tab11" class="tab_content"> текст 11 </div> </div> </div> </div></td> </tr> <tr><td><marquee id=abc direction=left behavior=scroll scrollamount=2 onMouseOut="document.all.abc.start()" onMouseOver="document.all.abc.stop()"> содержание.... </marquee></td></tr> </table>
Поделиться1403.08.12 22:27
Бу
Вместилось, да. Но мне нужно отделить одно от другого. А то пугающе она выглядит...
Поделиться1503.08.12 22:54
Кама
верх
<style> .container1 {width: 900px; margin: 0 auto; padding: 0;} ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 40px; width: 467px; width: 100%; } ul.tabs li { float: left; margin: 0; padding: 0; height: 40px; line-height: 40px; border: 0px; border-top: 0px solid #000000; border-bottom: 0px solid #000000; border-right: 0px solid #000000; border-left: 0px solid #000000; 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 #000000; border-top: 0px solid #000000; border-left: 0px solid #000000; border-right: 0px solid #000000; } 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 { clear: both; float: left; width: 710px; height: 343px; background-image : url(); background-color: #цвет фона; border-bottom: 1px solid #000000; border-top: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; -moz-border-radius-bottomright: 5px; -khtml-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -khtml-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; } .tab_content { padding: 5px; } .tab_content h2 { font-weight: normal; padding-bottom: 2px; border-bottom: 0px dashed #000000; } </style>
объявление
<table> <tr><td valign="top"><br><br><br><br><br><br><br><br><ul class="tabs"> <li><a href="#tab6">Европа</a></li> <li><a href="#tab7">Азия</a></li> <li><a href="#tab8">Америка</a></li> <li><a href="#tab9">Африка</a></li> <li><a href="#tab10"> Австралия </a></li> <li><a href="#tab11">Там, где лед.</a></li></ul></td> <td><div class="container"> <div class="html-box"> <ul class="tabs"> <li class="active"><a href="#tab1">Начало</a></li> <li><a href="#tab2">Команда</a></li> <li><a href="#tab3">Сюжет</a></li> <li><a href="#tab4">Баннеры</a></li> <li><a href="#tab5">Конкурсы</a></li> </ul> <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 style="display: none;" id="tab3" class="tab_content"> текст 3 </div> <div style="display: none;" id="tab4" class="tab_content"> текст 4 </div> <div style="display: none;" id="tab5" class="tab_content"> текст 5 </div> <div style="display: none;" id="tab6" class="tab_content"> текст 6 </div> <div style="display: none;" id="tab7" class="tab_content"> текст 7 </div> <div style="display: none;" id="tab8" class="tab_content"> текст 8 </div> <div style="display: none;" id="tab9" class="tab_content"> текст 9 </div> <div style="display: none;" id="tab10" class="tab_content"> текст 10 </div> <div style="display: none;" id="tab11" class="tab_content"> текст 11 </div> </div> </div> </div></td> </tr> <tr><td colspan="2" ><marquee id=abc direction=left behavior=scroll scrollamount=2 onMouseOut="document.all.abc.start()" onMouseOver="document.all.abc.stop()"> содержание.... </marquee></td></tr> </table>
Поделиться1603.08.12 23:04
Кама
Отправила, а потом заметила. Если фраза "там, где лед" отображается не полностью делаем так:
В объявлении
<li><a href="#tab10"> Австралия </a></li>
<li><a href="#tab11">Там, где лед.</a></li></ul></td>
<td><div class="container">
Сделайте так
Там,где лед
Поделиться1703.08.12 23:26
Бу
А почему они у меня так стоят? (ссылочки) Как расставить их по кнопкам?
Поделиться1803.08.12 23:40
Кама
верх
<style> .container1 {width: 900px; margin: 0 auto; padding: 0;} ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 40px; width: 467px; width: 100%; } ul.tabs li { width: 90px; float: left; margin: 0; padding: 0; height: 40px; line-height: 40px; border: 0px; border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000; 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 #000000; border-top: 0px solid #000000; border-left: 0px solid #000000; border-right: 0px solid #000000; } 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 { clear: both; float: left; width: 758px; height: 343px; background-image : url(); background-color: #цвет фона; border-bottom: 1px solid #000000; border-top: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; -moz-border-radius-bottomright: 5px; -khtml-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -khtml-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; } .tab_content { padding: 5px; } .tab_content h2 { font-weight: normal; padding-bottom: 2px; border-bottom: 0px dashed #000000; } </style>
Поделиться1903.08.12 23:53
Бу
О, теперь норм с кнопками. Но. Нужны закругленные края, и подровять либо кнопки пошире, либо окно меньше. И покажи, куда картинку с фоном вставить... Надеюсь, что больше не буду вас мучать...
Поделиться2004.08.12 00:10
Кама
<style> .container1 {width: 900px; margin: 0 auto; padding: 0;} ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 40px; width: 467px; width: 100%; } ul.tabs li { width: 110px; float: left; margin: 0; padding: 0; height: 40px; line-height: 40px; border: 0px; border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000; border-radius: 7px; 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 #000000; border-top: 0px solid #000000; border-left: 0px solid #000000; border-right: 0px solid #000000; } 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 { clear: both; float: left; width: 700px; height: 343px; background-image : url(); background-color: #цвет фона; border-bottom: 1px solid #000000; border-top: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-radius: 7px; -moz-border-radius-bottomright: 5px; -khtml-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -khtml-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; } .tab_content { padding: 5px; } .tab_content h2 { font-weight: normal; padding-bottom: 2px; border-bottom: 0px dashed #000000; } </style>
И покажи, куда картинку с фоном вставить
Хм, майбовский стиль не даст поставить картинку на все объявление, ибо колонку с окном он как бы выделяет и картинку там не отображает. Плюс, если у вас картинка не однородная криво будет смотреться.
Будет так:
Но, если не смущает, то вот.
в ul.tabs li{ и .tab_container1 (в хтмл верх) добавляем строчку
background-image : url(картинка);
и начало таблицы прописываем вот так
<table background="картинка">