1. Ссылка на форум: http://testosorum.spybb.ru/
2. Эскиз таблицы:
3. Дополнительные предпочтения: хотелось бы, чтобы границы таблицы были не видны, а общим фоном стояла эта картинка с прозрачностью 70-80%:
Отредактировано Jii-Jo (05.04.14 09:51)
ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Заказать дизайн, графику или скрипты » Заказать верстку и скрипты » [Выполнено] Таблица.
1. Ссылка на форум: http://testosorum.spybb.ru/
2. Эскиз таблицы:
3. Дополнительные предпочтения: хотелось бы, чтобы границы таблицы были не видны, а общим фоном стояла эта картинка с прозрачностью 70-80%:
Отредактировано Jii-Jo (05.04.14 09:51)
Matsubara
Доброго времени суток!
Актуально ещё? Если да, то я возьмусь)
Да, актуально)
Matsubara
Завтра будет сделано 
Jii-Jo
Хорошо, заранее спасибо ^ ^
Matsubara
Поскольку фон слишком резал глаз, то вот так 
Всё в объявление можно.
<ul class="tabs">
<li class="active"><a href="#tab1">Ichi-ban</a></li>
<li><a href="#tab2">Ni-ban</a></li>
</ul>
<div class="tab_container1">
<div style="display: block;" id="tab1" class="tab_content">
<!-- Текст -->
<table align="center" border="0" cellpadding="5" cellspacing="3" style="width: 890px; height: 600px;">
<tbody>
<tr>
<td style="text-align: center; width: 30%;">
<p><b>Погода в ролевой</b></p>
<div id="pro_1">
<p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </p>
</div>
<br>
<br>
<p><b>Персонал</b></p>
<div id="pro_2">
<p><img alt="" height="50" src="ссылка" width="50"> <img alt="" height="50" src="ссылка" width="50"> <img alt="" height="50" src="ссылка" width="50"></p>
</div>
</td>
<td rowspan="1" style="text-align: center; width: 40%;">Облако тегов</td>
<td style="text-align: center; width: 30%;">
<p><b>PR</b></p>
<p><u>Ник</u>: </p>
<p><u>Пароль</u>: </p>
<br>
<br>
<p><b>Заходим каждый день</b></p>
<p>Топы</p>
</td>
</tr>
</tbody>
</table>
<!--END//Текст-->
<!--Стили-->
<style type="text/css">
#pro_1 {
height: 110px;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
margin-top: 6px;
}
#pro_2 {
height: 170px; width: 100%;
overflow-y: auto;
overflow-x: hidden;
margin-top: 6px;
}
</style>
<!--END//Стили-->
</div>
<div style="display: none;" id="tab2" class="tab_content">
<!-- Текст -->
<table align="center" border="0" cellpadding="5" cellspacing="3" style="width: 890px; height: 600px;">
<tbody>
<tr>
<td style="text-align: center; width: 30%;">
<p><b>Отличившиеся</b></p>
<div id="pro_3">
<p><a href="профиль"><img alt="" title="Ник" height="50" src="ссылка" width="50"></a> <a href="профиль"><img alt="" title="Ник" height="50" src="ссылка" width="50"></a> <a href="профиль"><img alt="" title="Ник" height="50" src="ссылка" width="50"></a></p>
<p><a href="профиль"><img alt="" title="Ник" height="50" src="ссылка" width="50"></a> <a href="профиль"><img alt="" title="Ник" height="50" src="ссылка" width="50"></a> <a href="профиль"><img alt="" title="Ник" height="50" src="ссылка" width="50"></a> </p>
<p><a href="профиль"><img alt="" title="Ник" height="50" src="ссылка" width="50"></a> <a href="профиль"><img alt="" title="Ник" height="50" src="ссылка" width="50"></a> </p>
</div>
</td>
<td rowspan="1" style="text-align: center; width: 40%;">
<p><b>Новости</b></p>
<div id="news">
<p>Много текста</p>
</div>
</td>
</tr>
</tbody>
</table>
<!--END//Текст-->
<!--Стили-->
<style type="text/css">
#news {
height: 520px;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
margin-top: 6px;
}
#pro_3 {
height: 81%;
width: 100%;
overflow-y: scroll;
vertical-align: middle;
margin-top: 6px;
}
</style>
<!--END//Стили-->
</div>
</div>
<!-- Стиль контейнера -->
<style>
.container1 {width: 900px; margin: 0 auto; padding: 0;}
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 28px;
width: 100%;
}
ul.tabs li {
float: left;
padding: 0;
height: 36px;
line-height: 36px;
letter-spacing: 3px;
border: 0px dotted #000000;
margin-bottom: -2px;
background: wheat;
text-align: center;
width: 120px;
overflow: hidden;
position: relative;
margin-left: 286px;
left: -110px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
ul.tabs li a {
text-decoration: none;
color: transparent;
display: block;
padding: 0 5px;
background: url();
outline: none;
}
ul.tabs li a:hover {
border-top: 1px solid #000000;
border-bottom: 0px dotted #000000;
border-right: 0px dotted #000000;
border-left: 0px dotted #000000;
}
html ul.tabs li.active {
border-top: 2px solid #000000;
border-bottom: 0px dotted #000000;
border-right: 0px dotted #000000;
border-left: 0px dotted #000000;
}
html ul.tabs li.active a:hover {
border-bottom: 0px solid #160f0a;
}
.tab_container1 {
clear: both;
float: left;
width: 900px;
height: 600px;
background-color: wheat;
border: 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;
}
.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>
Matsubara
Извиняюсь за столь долгий ответ )
Фон изменять здесь:
.tab_container1 {
..
width: 900px;
height: 600px;
background-color: wheat;
border: 0px solid #000000;
...
}
Насчет теней не поняла, но если при наведении и активных, то вот здесь:
ul.tabs li a:hover {
border-top: 1px solid #000000;
border-bottom: 0px dotted #000000;
border-right: 0px dotted #000000;
border-left: 0px dotted #000000;
}html ul.tabs li.active {
border-top: 2px solid #000000;
border-bottom: 0px dotted #000000;
border-right: 0px dotted #000000;
border-left: 0px dotted #000000;
}html ul.tabs li.active a:hover {
border-bottom: 0px solid #160f0a;
}
Jii-Jo
Еще раз большое Вам спасибо ^ ^
Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Заказать дизайн, графику или скрипты » Заказать верстку и скрипты » [Выполнено] Таблица.