1. Ссылка на форум: http://cwhope.rusff.ru/
2. Эскиз таблицы: 
3. Дополнительные предпочтения: никаких, вроде. По мере прибытия таблицы могут появиться.
Отредактировано Герда (10.01.14 16:03)
[устарело] Таблица. Коты-Воители. Html.
Сообщений 1 страница 10 из 11
Поделиться108.11.13 21:15
Поделиться209.11.13 12:08
- Бестелесный дух прошлого
- Уважение: +394
Inferno
Приняла. 
Поделиться309.11.13 12:44
- Бестелесный дух прошлого
- Уважение: +394
Inferno
Пробуем
HTML-низ
Код:<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>
HTML-верх
Код:<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: 1px dotted #000000; border-bottom: 1px dotted #000000; border-right: 1px dotted #000000; border-left: 1px dotted #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: 900px; height: 343px; background-image : url(); background-color: #FFFFFF; border-bottom: 1px solid #000000; border-top: 0px solid #000000; border-left: 0px solid #000000; border-right: 0px 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; color: black; } .tab_content { padding: 5px; } .tab_content h2 { font-weight: normal; padding-bottom: 2px; border-bottom: 0px dashed #000000; } </style>
Объявление
Код:<ul class="tabs"> <li class="active"><a href="#tab1">Основное</a></li> <li><a href="#tab2">Полезно</a></li> <li><a href="#tab3">Реклама</a></li> </ul> <div class="tab_container1"> <div style="display: block;" id="tab1" class="tab_content"> <table border="0" cellpadding="3" cellspacing="1" style="width: 890px; height: 338px;"> <tbody> <tr> <td style="text-align: center; overflow-y: scroll; height: 322px;">1</td> <td style="text-align: center; overflow-y: scroll; height: 322px;">2</td> <td style="text-align: center; overflow-y: scroll; height: 322px;">3</td> </tbody> </table> </div> <div style="display: none;" id="tab2" class="tab_content"> <table border="0" cellpadding="4" cellspacing="1" style="width: 890px; height: 400px;"> <tbody> <tr> <td style="text-align: center; width: 290px; overflow-y: scroll; height: 322px;">1</td> <td style="text-align: center; overflow-y: scroll; height: 322px;">2</td> </tr> </tbody> </table> </div> <div style="display: none;" id="tab3" class="tab_content"> <table border="0" cellpadding="7" cellspacing="17" style="width: 890px; height: 400px;"> <tbody> <tr> <td style="text-align: center; width: 290px; overflow-y: scroll; height: 322px;">1</td> <td style="text-align: center; overflow-y: scroll; height: 322px;">2</td> </tr> </tbody> </table> </div> </div> <table border="0" cellpadding="5" cellspacing="1" style="width: 890px; height: 60px;"> <tbody> <tr> <td style="text-align: center; color: black overflow-y: scroll; ;">Баннеры</td> </tr> </tbody> </table>
Поделиться409.11.13 13:40
Jii-Jo
Широковата. А если такой вариант:
например
Поделиться509.11.13 13:42
- Бестелесный дух прошлого
- Уважение: +394
Inferno написал(а):
А если такой вариант:
а в живую можно глянуть?
Поделиться709.11.13 13:53
- Бестелесный дух прошлого
- Уважение: +394
Inferno
Попробуйте так:
HTML-верх
Код:<style> .container1 {width: 820px; 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; padding-top: 4px; margin: 0px; width: 140px; height: 25px; font-family: 'palatino linotype'; font-size: 15px; } ul.tabs li a { text-decoration: none; color: transparent; display: block; padding: 0 5px; background: url(); outline: none; } ul.tabs li a:hover { letter-spacing: 1px; border: 1px solid #000; -webkit-border-radius: 5px; -khtml-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } html ul.tabs li.active { letter-spacing: 1px; border: 1px solid #000; -webkit-border-radius: 5px; -khtml-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } html ul.tabs li.active a:hover { background: url(); border-bottom: 0px solid #160f0a; } .tab_container1 { padding-bottom: 4px; border: 1px solid #000; -webkit-border-radius: 10px; -khtml-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; width: 820px; } .tab_content { padding: 5px; } .tab_content h2 { font-weight: normal; padding-bottom: 2px; border-bottom: 0px dashed #000000; } </style>
Поделиться809.11.13 14:01
Jii-Jo
Опять же, слишком широко :\
показать
И как бы сделать так, чтобы верхние переключатели были по центру? надеюсь, я не наглею .D
Поделиться909.11.13 14:02
- Бестелесный дух прошлого
- Уважение: +394
Inferno
Ссылку на тестовый, не наблюдаю таблицы на форуме
