1. Ссылка на форум: http://spandau.mybb.ru/
2. Эскиз таблицы: http://s3.uploads.ru/ms7Wy.png
3. Дополнительные предпочтения: Я буду только рад, если изготовитель обсудит со мной некоторые моменты, объяснит, есть что-то, из того, что я попросил, выполнить невозможно. Картинки для таблицы со вкладками (в верхнем правом углу) могу предоставить - если они необходимы. если мы можете сделать пока без них - замечательно. Только объясните, как потом мне их самостоятельно вставить =)
[Выполнено]Таблица. Шпандау
Страница: 1
Тема закрыта
Сообщений 1 страница 4 из 4
Поделиться109.11.12 19:50
- Бестелесный дух прошлого
- Уважение: +0
Поделиться211.11.12 10:08
- Бестелесный дух прошлого
- Уважение: +298
Взяла.
Поделиться311.11.12 18:27
- Бестелесный дух прошлого
- Уважение: +298
верх
Код:
<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
- Бестелесный дух прошлого
- Уважение: +0
Бу
большое спасибо, установили)))
Тема закрыта
Страница: 1
