Верстка таблиц

Поделиться12014-04-07 11:28:27

Автор: Нафаня
Я ухожу в себя и открываю целый мир.
Зарегистрирован: 2014-02-27
Приглашений: 0
Сообщений: 5595
Уважение: [+268/-4]
Позитив: [+309/-0]
Пол: Женский
Возраст: 32 [1992-04-07]
Провел на форуме:
1 месяц 6 дней
Последний визит:
2020-12-31 16:58:02

На нашем форуме вы можете найти помощь в верстке таблиц для вашей ролевой. Но данная услуга доступна лишь за Зефирки.

Внесение изменений в уже существующую таблицу или "поправить код" - бесплатно;
Верстка простой таблицы (без вкладок) - 30 зефирок;
Верстка таблицы средней сложности (с вкладками и пр) - 40 зефирок;
Верстка сложной таблицы (вкладки, слайдеры и пр) - 50 зефирок;

Шаблон заявки:

Код:

[b]1. Название ролевой, ссылка:[/b]
[b]2. Что требуется:[/b]

Верстальщики:
Джи

+1

Поделиться22014-04-11 15:50:05

Автор: Нафаня
Я ухожу в себя и открываю целый мир.
Зарегистрирован: 2014-02-27
Приглашений: 0
Сообщений: 5595
Уважение: [+268/-4]
Позитив: [+309/-0]
Пол: Женский
Возраст: 32 [1992-04-07]
Провел на форуме:
1 месяц 6 дней
Последний визит:
2020-12-31 16:58:02

1. Название ролевой, ссылка:
Запретный Сектор, http://forbiddensector.f-rpg.ru/
2. Что требуется:

Свернутый текст

Пояснения: Там где кружочки по возможности вот этот скрипт http://pcvector.net/scripts/image-effec … denii.html демо2. Под ними блок, куда будут вставляться картинка и текст к ней, но хотелось бы там скрипт что бы эти блоки пролистывались сами через N-ое время или с помощью стрелок. А там где Навигация, желательно вот это http://pcvector.net/scripts/menu_and_na … -css3.html (второй вариант).

0

Поделиться32014-04-11 15:53:36

Автор: Джи
Гость

Нафаня, принимаю, в ближайшие 24 часа будет

+1

Поделиться42014-04-11 15:55:46

Автор: Нафаня
Я ухожу в себя и открываю целый мир.
Зарегистрирован: 2014-02-27
Приглашений: 0
Сообщений: 5595
Уважение: [+268/-4]
Позитив: [+309/-0]
Пол: Женский
Возраст: 32 [1992-04-07]
Провел на форуме:
1 месяц 6 дней
Последний визит:
2020-12-31 16:58:02

Джи, с нетерпением жду)

0

Поделиться52014-04-15 13:18:52

Автор: Джи
Гость

Нафаня, ну-сс, держи))

Код:

<table border="0" cellpadding="1" cellspacing="1" style="width: 850px;">
	<tbody>
    <tr>
    	<td colspan="1" height="100px" rowspan="2" style="text-align: center;" width="500px">
        <div class="news">Здесь будет много интересных вестей. Первая из них - мы возрождаемся! :) Здесь будет много интересных вестей. Первая из них - мы возрождаемся! :) Здесь будет много интересных вестей. Первая из них - мы возрождаемся! :) Здесь будет много интересных вестей. Первая из них - мы возрождаемся! :) Здесь будет много интересных вестей. Первая из них - мы возрождаемся! :) Здесь будет много интересных вестей. Первая из них - мы возрождаемся! :) Здесь будет много интересных вестей. Первая из них - мы возрождаемся! :) Здесь будет много интересных вестей. Первая из них - мы возрождаемся! :) Здесь будет много интересных вестей. Первая из них - мы возрождаемся! :) Здесь будет много интересных вестей. Первая из них - мы возрождаемся! :) Здесь будет много интересных вестей. Первая из них - мы возрождаемся! :) Здесь будет много интересных вестей. Первая из них - мы возрождаемся! :) Здесь будет много интересных вестей. Первая из них - мы возрождаемся! :) Здесь будет много интересных вестей. Первая из них - мы возрождаемся! :) Здесь будет много интересных вестей. Первая из них - мы возрождаемся! :) Здесь будет много интересных вестей. Первая из них - мы возрождаемся! :) Здесь будет много интересных вестей. Первая из них - мы возрождаемся! :) Здесь будет много интересных вестей. Первая из них - мы возрождаемся! :) Здесь будет много интересных вестей. Первая из них - мы возрождаемся! :) Здесь будет много интересных вестей. Первая из них - мы возрождаемся! :) мм</div>
    	</td>
    	<td style="text-align: center;" width="290px" height="90px"><center>
        <div class="imgholder">
        	<div class="outer1 circle">&nbsp;</div>
        	<div class="outer2 circle">&nbsp;</div>
        	<figure><img src="http://forbiddensector.f-rpg.ru/img/avatars/0014/0f/30/4-1397223501.png"> <figcaption class="caption">Клайд Мейсон</figcaption></figure>
        </div>
        <div class="imgholder">
        	<div class="outer1 circle">&nbsp;</div>
        	<div class="outer2 circle">&nbsp;</div>
        	<figure><img src="http://forbiddensector.f-rpg.ru/img/avatars/0014/0f/30/4-1397223501.png"> <figcaption class="caption">Клайд Мейсон</figcaption></figure>
        </div>
        <div class="imgholder">
        	<div class="outer1 circle">&nbsp;</div>
        	<div class="outer2 circle">&nbsp;</div>
        	<figure><img src="http://forbiddensector.f-rpg.ru/img/avatars/0014/0f/30/2-1397220921.png"> <figcaption class="caption">Чарли</figcaption></figure>
        </div>
  </center>
    	</td>
    </tr>
    <tr>
    	<td style="text-align: center;" width="290px">
<script src=https://forumstatic.ru/files/0011/e9/e1/27099.js></script>
<style>
#pun-announcement #slider {
	margin: 0 auto;
}
#pun-announcement #slides, #pun-announcement #control {
	display: inline-block;
        text-align: center;
}
#pun-announcement #slides {
	width: 210px;
	margin: 0;
	border: none;
}
#pun-announcement #control {
	vertical-align: middle;
}
#pun-announcement #control a {
	display: inline-block;
	pointer: cursor;
	margin: 0 5px;
	width: 32px;
	height: 32px;
	padding-top: 5px;
	text-decoration: none;
}
#next{
background: url(http://www.iconsearch.ru/uploads/icons/kids/32x32/next-sail.png) no-repeat center center;}
#prev{
background: url(http://www.iconsearch.ru/uploads/icons/kids/32x32/previos-sail.png) no-repeat center center;}
#pun-announcement #control a:hover {

}</style>

    <div id="slider">
    	<table>
        <tr>
        	<td id="control"><a href="#" id="prev"></a></td>

        	<td id="slides">
            <div>

            	<table border="0" cellpadding="1" cellspacing="1" style="width: 100%;height: 114px;">
	<tbody>
    <tr>
    	<td width="50px"><img alt="" height="50" src="картинка" width="50"></td>
    	<td>описание картинки 1</td>
    </tr>
	</tbody>
</table>

            </div>
            <div>

            	<table border="0" cellpadding="1" cellspacing="1" style="width: 100%;height: 114px;">
	<tbody>
    <tr>
    	<td width="50px"><img alt="" height="50" src="картинка" width="50"></td>
    	<td>описание картинки 2</td>
    </tr>
	</tbody>
</table>

            </div>
            <div>

            	<table border="0" cellpadding="1" cellspacing="1" style="width: 100%;height: 114px;">
	<tbody>
    <tr>
    	<td width="50px"><img alt="" height="50" src="картинка" width="50"></td>
    	<td>описание картинки 3</td>
    </tr>
	</tbody>
</table>

            </div>
            <div>

            	<table border="0" cellpadding="1" cellspacing="1" style="width: 100%;height: 114px;">
	<tbody>
    <tr>
    	<td width="50px"><img alt="" height="50" src="картинка" width="50"></td>
    	<td>описание картинки 4</td>
    </tr>
	</tbody>
</table> 

            </div>
        	</td>
        	
        	<td id="control"><a href="#" id="next"></a></td>
        </tr>
    	</table>
    </div>


<script>
justSlider(
	$('#pun-announcement #slider'), 
	{
    left: $('#pun-announcement #control #prev'),
    right: $('#pun-announcement #control #next'),
    auto: 10000
	});

</script>

</td>
    </tr>
    <tr>
    	<td colspan="2" height="40px" style="text-align: center;"><div class="ph-dot-nav nav">
    <a href="#">Первая</a>
    <a href="#">Вторая</a>
    <a href="#">Третья</a>
    <a href="#">Четвертая</a>
    <a href="#">Пятая</a>
    <a href="#">Шестая</a>
    <div class="effect"></div>
	</div></td>
    </tr>
	</tbody>
</table>

<style type="text/css">.news {height: 200px; overflow-y: auto; margin-left: 20px; text-align: justify;}</style>
<style type="text/css">
.imgholder{
position: relative;
width: 30px;
height: 130px;
float: left;
margin: 0px 24px -60px 30px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px
}

/* thumbnails style */
.imgholder figure{
position: absolute;
left: -2px;
top: -2px;
width: 70px;
height: 62px;
margin: 0;
overflow: hidden;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
}
.imgholder img{
position: absolute;
left: 1px;
top: 1px;
width: 90%;
height: 100%;
z-index: 2;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
opacity: 0;
filter: alpha(opacity = 0);
transform: scale(1.5,1.5);
-ms-transform: scale(1.5,1.5);
-moz-transform: scale(1.5,1.5);
-webkit-transform: scale(1.5,1.5);
transition: opacity 1s ease-in, transform 1.5s;
-moz-transition: opacity 1s ease-in, -moz-transform 1.5s;
-webkit-transition: opacity 1s ease-in, -webkit-transform 1.5s;
}
.imgholder:hover img{
opacity:1!important;
filter: alpha(opacity = 100);
transform: scale(1,1);
-ms-transform: scale(1,1);
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
}
.imgholder figcaption{
position: absolute;
top: 40%;
width: 66px;
opacity: 1;
filter: alpha(opacity = 100);
color: #004E87;
font-weight: bold;
text-shadow: -1px -1px 0 #fff;
z-index: 4;
transform: scale(1,1);
-ms-transform: scale(1,1);
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
transition: opacity 1s, transform 1s ease;
-moz-transition: opacity 1s, -moz-transform 1s ease;
-webkit-transition: opacity 1s, -webkit-transform 1s ease;
}
.imgholder:hover figcaption{
opacity: 0;
filter: alpha(opacity = 0);
transform: scale(1.5,1.5);
-ms-transform: scale(1.5,1.5);
-moz-transform: scale(1.5,1.5);
-webkit-transform: scale(1.5,1.5);
}
/* decoration style */
.imgholder .circle{
position: absolute;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
}
.imgholder .outer1{
top: -8px;
left: -8px;
width: 60px;
height: 60px;
z-index: 2;
border: 8px solid;
border-color: #DEEBFC;
box-shadow: 0 0 3px #AFD3FF;
-moz-box-shadow: 0 0 3px #AFD3FF;
-webkit-box-shadow: 0 0 3px #AFD3FF;
background: #ffffff;
background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e2efff 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e2efff));
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
background: radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2efff',GradientType=1 );
transition: box-shadow 1s ease-out, border-color 1.5s;
-moz-transition: -moz-box-shadow 1s ease-out, border-color 1.5s;
-webkit-transition: -webkit-box-shadow 1s ease-out, border-color 1.5s;
}

.imgholder .outer2{
top: -10px;
left: -10px;
width: 60px;
height: 60px;
z-index: 1;
border: 10px solid;
border-color: #9BC8FF;
box-shadow: 0 0 20px #8EB9FF;
-moz-box-shadow: 0 0 20px #8EB9FF;
-webkit-box-shadow: 0px 0 20px #8EB9FF;
opacity: 0;
filter: alpha(opacity = 0);
transform: scale(1.3,1.3);
-ms-transform: scale(1.3,1.3);
-moz-transform: scale(1.3,1.3);
-webkit-transform: scale(1.3,1.3);
transition: opacity 1s ease 0.3s, transform 1s ease-out 0.3s;
-moz-transition: opacity 1s ease 0.3s, -moz-transform 1s ease-out 0.3s;
-webkit-transition: opacity 1s ease 0.3s, -webkit-transform 1s ease-out 0.3s;}
.imgholder:hover .outer2{
	opacity:1;
	filter: alpha(opacity = 100);
	transform: scale(1,1);
	-ms-transform: scale(1,1);
	-moz-transform: scale(1,1);
	-webkit-transform: scale(1,1);
}

.nav {
  text-align: center;
  overflow: hidden;
  margin: 2em auto;
  width: 100%;
  position: relative; }
  .nav a {
display: block;
position: relative;
margin-top: 20px;
top: -28px;
float: left;
padding: 1em 0 2em;
width: 140px;
text-decoration: none;
color: #393939;
-webkit-transition: .7s;
-moz-transition: .7s;
-o-transition: .7s;
-ms-transition: .7s;
transition: .7s;
}
.nav a:hover {
color: #c6342e;
}

.effect {
	position: absolute;
  left: -12.5%;
  -webkit-transition: 0.7s ease-in-out;
  -moz-transition: 0.7s ease-in-out;
  -o-transition: 0.7s ease-in-out;
  -ms-transition: 0.7s ease-in-out;
  transition: 0.7s ease-in-out; }

	.nav a:nth-child(1):hover ~ .effect {
	  left: 8%; }
	.nav a:nth-child(2):hover ~ .effect {
	  left: 24.8%!important; }
	.nav a:nth-child(3):hover ~ .effect {
	  left: 41.5%!important; }
	.nav a:nth-child(4):hover ~ .effect {
	  left: 58%!important; }
	.nav a:nth-child(5):hover ~ .effect {
	  left: 74.5%!important; }
	.nav a:nth-child(6):hover ~ .effect {
	  left: 91%!important; }
.ph-dot-nav:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  background: #c6342e;
  bottom: 40px; }
.ph-dot-nav a:after {
content: "";
position: absolute;
width: 4px;
height: 4px;
bottom: 10px;
left: 50%;
margin-left: -2px;
background: #c6342e;
border-radius: 100%; }
.ph-dot-nav .effect {
  width: 10px;
  height: 10px;
  bottom: 36px; 
	margin-left: -5px;
  background: #c6342e;
  border-radius: 100%; }
</style>

With love