1. Ссылка на форум: http://probnik7.rolka.su/
2. Эскиз таблицы:
Экскиз
общий вид
1.
2.
3.
4.
5.
Графика
1.
2.
3.
4.
5.
3. Дополнительные предпочтения:
Вроде на экскизе отметила и бегунки и разделения на столбцы и т.д. Только это.
Таблица
Страница: 1
Тема закрыта
Сообщений 1 страница 3 из 3
Поделиться103.12.12 21:55
Поделиться208.12.12 19:34
- Бестелесный дух прошлого
- Уважение: +298
Ukiro
верх
Код:
<style>
.container1 {width: 808px; margin: 0 auto; padding: 0;}
ul.tabs {
padding: 0;
float: left;
list-style: none;
height: 40px;
width: 808px;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 40px;
line-height: 40px;
width: 150px;
text-align: center;
border: 0px;
margin-bottom: -2px;
background: url(http://s2.uploads.ru/yJmZQ.png);
overflow: hidden;
position: relative;
}
ul.tabs li a {
text-decoration: none;
color: transparent;
display: block;
padding: 0 5px;
outline: none;
}
ul.tabs li a:hover {
}
html ul.tabs li.active {
background: url(http://s2.uploads.ru/yJmZQ.png);
}
html ul.tabs li.active a:hover {
border-bottom: 0px solid #160f0a;
}
.tab_container1 {
clear: both;
float: left;
width: 800px;
height: 296px;
margin-top: -5px;}
.tab_content {
padding: 5px;
}
.tab_content h2 {
font-weight: normal;
padding-bottom: 2px;
}
</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>объявление
Код:
<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>
<li><a href="#tab4">4</a></li>
<li><a href="#tab5">5</a></li>
</ul>
<div class="tab_container1">
<div style="display: block;" id="tab1" class="tab_content">
<table style="width:808px; height: 296px; background: url(http://s2.uploads.ru/OtiCa.jpg);">
<tr>
<td ><br><br><br><br><div style="text-align: center; margin-left: 20px; padding: 5px; width: 200px; height: 190px; ">
текст 1 текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
</div>
</td>
<td >
<br><br><br><br><div style="text-align: center; margin-left: 245px; padding: 5px; width: 290px; height: 190px; overflow-y: scroll;">
текст 2 текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
</div>
</td>
</tr>
</table>
</div>
<div style="display: none;" id="tab2" class="tab_content">
<table style="width:808px; height: 296px; background: url(http://s2.uploads.ru/ZjOq1.jpg);">
<tr>
<td ><br><br><br><br><div style="text-align: center; margin-left: 20px; padding: 5px; width: 230px; height: 190px; overflow-y: scroll;">
текст 3 текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
</div>
</td>
<td >
<br><br><br><br><div style="text-align: center; margin-left: 205px; padding: 5px; width: 280px; height: 190px; overflow-y: scroll;">
текст 4 текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
</div>
</td>
</tr>
</table>
</div>
<div style="display: none;" id="tab3" class="tab_content">
<table style="width:808px; height: 296px; background: url(http://s2.uploads.ru/kYBZS.jpg);">
<tr>
<td ><br><br><div style="text-align: center; margin-left: 290px; padding: 5px; width: 100px; height: 150px; ">
текст 5 <br>текст <br>текст
</div>
</td>
<td > <br><br><div style="text-align: center; margin-left: 20px; padding: 5px; width: 150px; height: 150px; ">
текст 6 <br>текст <br>текст
</div>
</td>
</tr>
</table>
</div>
<div style="display: none;" id="tab4" class="tab_content">
<table style="width:808px; height: 296px; background: url(http://s2.uploads.ru/sQIvn.jpg);">
<tr>
<td ><br><br><br><br><div style="text-align: center; margin-left: 20px; padding: 5px; width: 200px; height: 210px; overflow-y: scroll;">
текст 7 текст текст
</div>
</td>
<td ><br><br><br><br><div style="text-align: center; margin-left: 20px; padding: 5px; width: 200px; height: 210px; overflow-y: scroll;">
текст 8 текст текст
</div>
</td>
<td > <br><br><br><div style="text-align: center; margin-left: 20px; padding: 5px; width: 270px; height: 220px; overflow-y: scroll;">
текст 9 текст текст
</div>
</td>
</tr>
</table>
</div>
<div style="display: none;" id="tab5" class="tab_content">
<table style="width:808px; height: 296px; background: url(http://s3.uploads.ru/hL0yq.jpg);">
<tr>
<td ><br><br><br><br><br><div style="text-align: center; margin-left: 280px; padding: 5px; width: 480px; height: 210px; overflow-y: scroll;">
текст 10 текст текст
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>Поделиться311.12.12 18:54
Бу
Спасибо большое! Можно вопросик... Как сдвинуть таблицу влево и сами кнопки, или как они называются, вправо. 
Тема закрыта
Страница: 1
