1. Ссылка на форум: http://spandau.mybb.ru/
2. Эскиз таблицы: http://s3.uploads.ru/ms7Wy.png
3. Дополнительные предпочтения: Я буду только рад, если изготовитель обсудит со мной некоторые моменты, объяснит, есть что-то, из того, что я попросил, выполнить невозможно. Картинки для таблицы со вкладками (в верхнем правом углу) могу предоставить - если они необходимы. если мы можете сделать пока без них - замечательно. Только объясните, как потом мне их самостоятельно вставить =)
[Выполнено]Таблица. Шпандау
Сообщений 1 страница 4 из 4
Поделиться109.11.12 19:50
Поделиться211.11.12 10:08
Взяла.
Поделиться311.11.12 18:27
верх
<style> .container1 {width: 415px; margin: 0 auto; padding: 0;} ul.tabs { margin-top: 0px; padding: 0; float: left; list-style: none; height: 40px; width: 415px; } ul.tabs li { float: left; margin: 0; padding: 0; height: 40px; line-height: 40px; border: 0px; border-top: 1px solid #000000; border-bottom: 0px 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: 415px; height: 200px; border-bottom: 1px solid #000000; border-top: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; } .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 width="830px" height="400px" > <tr> <td width="415px" height="200px> <div class="container"> <div class="html-box"> <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> </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> </div> </div> </td> <td valign="top" width="410px"><div style="text-align: center; border: 1px solid #160f0a; padding: 5px; width: 98%; height: 20px;"> Навигация</div><br/>текст текст текст </td> </tr> <tr> <td width="415px" valign="top" ><div style="text-align: center; border: 1px solid #160f0a; padding: 5px; width: 98%; height: 20px; "> Новости</div><br/>текст тексттекст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</td> <td width="415px" rowspan="2" valign="top" ><div style="text-align: center; border: 1px solid #160f0a; padding: 5px; width: 98%; height: 20px; "> Гордость нации</div><table width="415px" height="200px"> <tr> <td width="150px" rowspan="2" >игрок месяца</td> <td width="265px" height="100px">итоги конкурса</td> </tr> <tr> <td width="265px">лучший квест</td> </tr> </table> </td> </tr> <tr> <td width="415px" valign="top" ><div style="text-align: center; border: 1px solid #160f0a; padding: 5px; width: 98%; height: 20px; "> Важно</div><br/>текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</td> </tr> </table>
объявление вариант 2
<table width="830px" height="400px" > <tr> <td width="415px" height="200px> <div class="container"> <div class="html-box"> <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> </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> </div> </div> </td> <td valign="top" width="410px"><div style="text-align: center; border: 1px solid #160f0a; padding: 5px; width: 98%; height: 20px;"> Навигация</div><br/>текст текст текст </td> </tr> <tr> <td width="415px" valign="top" ><div style="text-align: center; border: 1px solid #160f0a; padding: 5px; width: 98%; height: 20px; "> Новости</div><br/>текст тексттекст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</td> <td width="415px" rowspan="2" valign="top" ><div style="text-align: center; border: 1px solid #160f0a; padding: 5px; width: 98%; height: 20px; "> Гордость нации</div><table width="415px" height="200px"> <tr> <td width="150px" rowspan="2" ><div style="text-align: center; border: 1px solid #160f0a; padding: 5px; width: 95%; height: 210px; ">игрок месяца</div></td> <td width="265px" height="100px"><div style="text-align: center; border: 1px solid #160f0a; padding: 5px; width: 98%; height: 100px; ">итоги конкурса</div></td> </tr> <tr> <td width="265px"><div style="text-align: center; border: 1px solid #160f0a; padding: 5px; width: 98%; height: 100px; margin-top: -5px">лучший квест</div></td> </tr> </table> </td> </tr> <tr> <td width="415px" valign="top" ><div style="text-align: center; border: 1px solid #160f0a; padding: 5px; width: 98%; height: 20px; "> Важно</div><br/>текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</td> </tr> </table>
В общем, рамками я выделила только названия ячеек, т.е. новости, навигация и т.п., (ну и поля в ячейке гордость нации тоже выделила рамками, но это только во втором варианте). У самой таблицы рамок нет, мне показалось, что не очень эстетично, скажем так, смотрится.
Поделиться411.11.12 21:16
Бу
большое спасибо, установили)))