ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее
Внимание! Нужно ваше мнение! Выбираем новый логотип, новую стилистику и новую разметку заявок для проекта ролевых заявок.

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



[выполнено]Таблица животные

Сообщений 1 страница 10 из 11

1

1. Ссылка на форум:
http://wolftigers.rolka.su/
2. Эскиз таблицы:
http://s1.uploads.ru/t/JMagu.png
3. Дополнительные предпочтения:
Все кроме главной открываются при клике.

0

2

[mod]Принято.[/mod]

Альма написал(а):

Все кроме главной открываются при клике.

в смысле?  Вам нужен контейнер? Или как выпадающее меню?
С поворотом картинки разберемся, но не знаю, смогу ли привязать туда ссылки. Что - то не думаю, что так можно.
Границы нужны?
В общем, посмотрю, но будьте готовы чуть поправить эскиз.

Подпись автора

При заказе таблицы, пожалуйста, сразу указывайте ее ширину и длину, а также другие подробности важные при оформлении таблицы(ширину границ, фон и прочее). Заказы, в которых сразу не будет указано всех подробностей, не переделываются по просьбам: "еще фон сделайте", "а края закруглить можно", " и цвет текста другой сделайте"  и прочее в том же духе.

0

3

Бу написал(а):

в смысле?  Вам нужен контейнер? Или как выпадающее меню?
С поворотом картинки разберемся, но не знаю, смогу ли привязать туда ссылки. Что - то не думаю, что так можно.
Границы нужны?
В общем, посмотрю, но будьте готовы чуть поправить эскиз.

Ну если вы о открытых то вот пример - http://wtbf.rolka.su/ только она сильно отличается от той которую я хоЧу.
Картинку тогда просто можем вставить. А тогда добавить еще и полезные ссылки
Границы нужны. Должно быть видно где начинается таблица, а где нет.
Подправлю хорошо, только скажите как.

0

4

Альма
А можно саму картинку или ссылку на нее?

Подпись автора

При заказе таблицы, пожалуйста, сразу указывайте ее ширину и длину, а также другие подробности важные при оформлении таблицы(ширину границ, фон и прочее). Заказы, в которых сразу не будет указано всех подробностей, не переделываются по просьбам: "еще фон сделайте", "а края закруглить можно", " и цвет текста другой сделайте"  и прочее в том же духе.

0

5

Бу написал(а):

Альма
А можно саму картинку или ссылку на нее?

Картинку ладно вот - http://img-fotki.yandex.ru/get/4104/kio … cbb0_L.jpg

0

6

Альма
Вот вам сразу несколько вариантов

С движением

хтмл низ, всегда один и тот же

Код:
<!--Спойлер - контейнер-->
<script type="text/javascript" src="http://szenprogs.ru/scripts/jquery-1.3.2.js"></script>
<script type="text/javascript"> 
  $(document).ready(function(){
    $('.splLink').click(function(){
      $(this).parent().children('div.splCont').toggle('normal');
      return false;
    });
  });
</script>
Объявление, когда картинка переворачивается, ссылки появляются
Код:
<center><table style="width: 90%">
<tr><td><div class="spll"><DIV><div class=splLink href="javscript://">
Главная</DIV></DIV></td>
<td><div class="spll">
<DIV><div class=splLink href="javscript://" style="cursor:pointer;">В игре</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>
текст в игре</DIV></DIV>
</div></td>
<td><div class="spll">
<DIV><div class=splLink href="javscript://" style="cursor:pointer;">Баннеры</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>
баннеры
</DIV></DIV>
</div></td>
<td><div class="spll">
<DIV><div class=splLink href="javscript://" style="cursor:pointer;">Админ. состав</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>
текст админов</DIV></DIV>
</div></td>
<td><div class="spll">
<DIV><div class=splLink href="javscript://" style="cursor:pointer;">Новости</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>
текст новостей
</DIV></DIV>
</div></td>
</tr>
<tr><td  colspan="5">
<table style="text-align: left; width: 100%; border: 2px solid #9d8a5c; " >
<tr>
<td width="60%">
Текст
</td>
<td width="40%"><div class="navigation">
<div class="view view-ninth">
	<div class="mask mask-1"><img src="http://img-fotki.yandex.ru/get/4104/kiowa-mike.8/0_27272_fd93cbb0_L.jpg" /></div>
	<div class="mask mask-2"></div>
	<div class="content">
<ul><div style="font-size: 13px; font-family: Microsoft Sans Serif;">
<li><a href="ссылка">название</a>
<li><a href="ссылка">название</a>
<li><a href="ссылка">название</a>
<li><a href="ссылка">название</a>
<li><a href="ссылка">название</a>
<li><a href="ссылка">название</a>
</ul></div>
	</div>
</div></div>
</td>
</tr>
</table>

</td></tr>
</table></center>

Чтобы добавить ссылки дублируем

<li><a href="ссылка">название</a>

объявление, когда картинка не переворачивается, но ссылки появляются
Код:
<center><table style="width: 90%">
<tr><td><div class="spll"><DIV><div class=splLink href="javscript://">
Главная</DIV></DIV></td>
<td><div class="spll">
<DIV><div class=splLink href="javscript://" style="cursor:pointer;">В игре</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>
текст в игре</DIV></DIV>
</div></td>
<td><div class="spll">
<DIV><div class=splLink href="javscript://" style="cursor:pointer;">Баннеры</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>
баннеры
</DIV></DIV>
</div></td>
<td><div class="spll">
<DIV><div class=splLink href="javscript://" style="cursor:pointer;">Админ. состав</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>
текст админов</DIV></DIV>
</div></td>
<td><div class="spll">
<DIV><div class=splLink href="javscript://" style="cursor:pointer;">Новости</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>
текст новостей
</DIV></DIV>
</div></td>
</tr>
<tr><td  colspan="5">
<table style="text-align: left; width: 100%; border: 2px solid #9d8a5c; " >
<tr>
<td width="60%">
Текст
</td>
<td width="40%"><div class="navigation">
<div class="view view-ninth"><img src="http://img-fotki.yandex.ru/get/4104/kiowa-mike.8/0_27272_fd93cbb0_L.jpg" />
	<div class="mask mask-1"></div>
	<div class="mask mask-2"></div>
	<div class="content">
<ul><div style="font-size: 13px; font-family: Microsoft Sans Serif;">
<li><a href="ссылка">название</a>
<li><a href="ссылка">название</a>
<li><a href="ссылка">название</a>
<li><a href="ссылка">название</a>
<li><a href="ссылка">название</a>
<li><a href="ссылка">название</a>
</ul></div>
	</div>
</div></div>
</td>
</tr>
</table>

</td></tr>
</table></center>

Чтобы добавить ссылки дублируем

<li><a href="ссылка">название</a>

хтмл верх, вариант 1, здесь цвет фона под ссылками будет коричневый
Код:
<style> 
div .splLink {width: 110px; height: 25px; border: 2px solid #9d8a5c; background: #cfb06f; text-align: center; font-family: Comic Sans Ms; font-size: 12px; padding: 5px;}
.spll {width: 130px; height: 70px; }
.spll div .splCont {height: auto; width: 300px; background: #cfb06f; padding: 5px; z-index: 1000; margin-top: 5px; border: 2px solid #9d8a5c; font-size: 11px; font-family: Microsoft Sans Serif; text-align: center;}
</style> 

<style> 
.navigation {
position: relative;
width: 100%;
}
.view {
   width: 301px;
   height: 448px;
   margin: 8px;
   float: left;
 overflow: hidden;
   position: relative;
   text-align: center;
   background: #000000;

}

.view .mask,.view .content {
   width: 301px;
   height: 448px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}

.view-ninth .content {
    background: rgba(227, 199, 141, 0.9);
    height: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity: 0.5;
    width: 361px;
    overflow: hidden;
    -webkit-transform: rotate(-33.5deg) translate(-112px, 166px);
    -moz-transform: rotate(-33.5deg) translate(-112px, 166px);
    -o-transform: rotate(-33.5deg) translate(-112px, 166px);
    -ms-transform: rotate(-33.5deg) translate(-112px, 166px);
    transform: rotate(-33.5deg) translate(-112px, 166px);
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transition: all 0.4s ease-in-out 0.3s;
    -moz-transition: all 0.4s ease-in-out 0.3s;
    -o-transition: all 0.4s ease-in-out 0.3s;
    transition: all 0.4s ease-in-out 0.3s;
}
.view-ninth:hover .content {
    width: 301px;
   height: 448px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    opacity: 0.9;
    top: 0px;
    -webkit-transform: rotate(0deg) translate(0, 0);
    -moz-transform: rotate(0deg) translate(0, 0);
    -o-transform: rotate(0deg) translate(0, 0);
    -ms-transform: rotate(0deg) translate(0, 0);
    transform: rotate(0deg) translate(0, 0);
}
.view-ninth:hover .mask-1, .view-ninth:hover .mask-2 {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}

.view-ninth:hover .mask-1 {
    -webkit-transform: rotateX(190deg) translateX(0px);
    -moz-transform: rotateX(190deg) translateX(1px);
    -o-transform: rotateX(190deg) translateX(1px);
    -ms-transform: rotateX(190deg) translateX(1px);
    transform: rotateX(190deg) translateX(1px);
}
.view-ninth:hover .mask-2 {
    -webkit-transform: rotate(40.5deg) translateX(-1px);
    -moz-transform: rotate(40.5deg) translateX(-1px);
    -o-transform: rotate(40.5deg) translateX(-1px);
    -ms-transform: rotate(40.5deg) translateX(-1px);
    transform: rotate(40.5deg) translateX(-1px);
}

.view-ninth .content ul{
text-align: center !important;
padding-left: 5px;
padding-top: 5px;
}

.view-ninth .content ul a{
color: #f6ecd3;
  text-decoration: none;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
display: block;
}


.view-ninth .content ul a:hover{

color: black;
padding-left: 5px;
text-shadow: none;
}
</style>
хтмл верх, вариант 2, здесь цвет фона под ссылками будет черный
Код:
<style> 
div .splLink {width: 110px; height: 25px; border: 2px solid #9d8a5c; background: #cfb06f; text-align: center; font-family: Comic Sans Ms; font-size: 12px; padding: 5px;}
.spll {width: 130px; height: 70px; }
.spll div .splCont {height: auto; width: 300px; background: #cfb06f; padding: 5px; z-index: 1000; margin-top: 5px; border: 2px solid #9d8a5c; font-size: 11px; font-family: Microsoft Sans Serif; text-align: center;}
</style> 

<style> 
.navigation {
position: relative;
width: 100%;
}
.view {
   width: 301px;
   height: 448px;
   margin: 8px;
   float: left;
 overflow: hidden;
   position: relative;
   text-align: center;
   background: #000000;

}

.view .mask,.view .content {
   width: 301px;
   height: 448px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}

.view-ninth .content {
    background: rgba(0, 0, 0, 0.9);
    height: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity: 0.5;
    width: 361px;
    overflow: hidden;
    -webkit-transform: rotate(-33.5deg) translate(-112px, 166px);
    -moz-transform: rotate(-33.5deg) translate(-112px, 166px);
    -o-transform: rotate(-33.5deg) translate(-112px, 166px);
    -ms-transform: rotate(-33.5deg) translate(-112px, 166px);
    transform: rotate(-33.5deg) translate(-112px, 166px);
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transition: all 0.4s ease-in-out 0.3s;
    -moz-transition: all 0.4s ease-in-out 0.3s;
    -o-transition: all 0.4s ease-in-out 0.3s;
    transition: all 0.4s ease-in-out 0.3s;
}
.view-ninth:hover .content {
    width: 301px;
   height: 448px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    opacity: 0.9;
    top: 0px;
    -webkit-transform: rotate(0deg) translate(0, 0);
    -moz-transform: rotate(0deg) translate(0, 0);
    -o-transform: rotate(0deg) translate(0, 0);
    -ms-transform: rotate(0deg) translate(0, 0);
    transform: rotate(0deg) translate(0, 0);
}
.view-ninth:hover .mask-1, .view-ninth:hover .mask-2 {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}

.view-ninth:hover .mask-1 {
    -webkit-transform: rotateX(190deg) translateX(0px);
    -moz-transform: rotateX(190deg) translateX(1px);
    -o-transform: rotateX(190deg) translateX(1px);
    -ms-transform: rotateX(190deg) translateX(1px);
    transform: rotateX(190deg) translateX(1px);
}
.view-ninth:hover .mask-2 {
    -webkit-transform: rotate(40.5deg) translateX(-1px);
    -moz-transform: rotate(40.5deg) translateX(-1px);
    -o-transform: rotate(40.5deg) translateX(-1px);
    -ms-transform: rotate(40.5deg) translateX(-1px);
    transform: rotate(40.5deg) translateX(-1px);
}

.view-ninth .content ul{
text-align: center !important;
padding-left: 5px;
padding-top: 5px;
}

.view-ninth .content ul a{
color: #f6ecd3;
  text-decoration: none;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
display: block;
}


.view-ninth .content ul a:hover{

color: black;
padding-left: 5px;
text-shadow: none;
}
</style>

Вы можете поставить код первого объявления, а хтмл второй или объявление второе ,а хтмл первый, или оба первых кода. Разница будет только в оформлении.

Обычная таблица

Здесь ячейку "Главная" пришлось убрать, не вмещалось все
объявление

Код:
<center><table style="width: 100%">
<tr>
<td><div class="spll">
<DIV><div class=splLink href="javscript://" style="cursor:pointer;">В игре</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>
текст в игре</DIV></DIV>
</div></td>
<td><div class="spll">
<DIV><div class=splLink href="javscript://" style="cursor:pointer;">Баннеры</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>
баннеры
</DIV></DIV>
</div></td>
<td><div class="spll">
<DIV><div class=splLink href="javscript://" style="cursor:pointer;">Админ. состав</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>
текст админов</DIV></DIV>
</div></td>
<td><div class="spll">
<DIV><div class=splLink href="javscript://" style="cursor:pointer;">Новости</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>
текст новостей
</DIV></DIV>
</div></td>
<td><div class="spll">
<DIV><div class=splLink href="javscript://" style="cursor:pointer;">Ссылки</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>
текст ссылок
</DIV></DIV>
</div></td>
</tr>
<tr><td  colspan="5">
<table style="text-align: left; width: 100%; border: 2px solid #9d8a5c; " >
<tr>
<td width="60%">
Текст
</td>
<td width="40%"><img src="http://img-fotki.yandex.ru/get/4104/kiowa-mike.8/0_27272_fd93cbb0_L.jpg" />
</td>
</tr>
</table>

</td></tr>
</table></center>

верх

Код:
<style> 
div .splLink {width: 110px; height: 25px; border: 2px solid #9d8a5c; background: #cfb06f; text-align: center; font-family: Comic Sans Ms; font-size: 12px; padding: 5px;}
.spll {width: 130px; height: 70px; }
.spll div .splCont {height: auto; width: 300px; background: #cfb06f; padding: 5px; z-index: 1000; margin-top: 5px; border: 2px solid #9d8a5c; font-size: 11px; font-family: Microsoft Sans Serif; text-align: center;}
</style>

низ

Код:
<!--Спойлер - контейнер-->
<script type="text/javascript" src="http://szenprogs.ru/scripts/jquery-1.3.2.js"></script>
<script type="text/javascript"> 
  $(document).ready(function(){
    $('.splLink').click(function(){
      $(this).parent().children('div.splCont').toggle('normal');
      return false;
    });
  });
</script>
Подпись автора

При заказе таблицы, пожалуйста, сразу указывайте ее ширину и длину, а также другие подробности важные при оформлении таблицы(ширину границ, фон и прочее). Заказы, в которых сразу не будет указано всех подробностей, не переделываются по просьбам: "еще фон сделайте", "а края закруглить можно", " и цвет текста другой сделайте"  и прочее в том же духе.

0

7

Бу
сейчас попробую. спасибо огромное!

0

8

Эм. у меня ссылки внизу картинки, а текст в главной  вверху, при открытие вкладок текс появляется, но не скрывает тот.
А еще нет важных баннеров....

0

9

А я не могу у вас хтмл верх найти, вы его вообще не поставили?

Альма написал(а):

А еще нет важных баннеров....

Просто отделяете их от основного текста отступами <br> и вставляете коды

Подпись автора

При заказе таблицы, пожалуйста, сразу указывайте ее ширину и длину, а также другие подробности важные при оформлении таблицы(ширину границ, фон и прочее). Заказы, в которых сразу не будет указано всех подробностей, не переделываются по просьбам: "еще фон сделайте", "а края закруглить можно", " и цвет текста другой сделайте"  и прочее в том же духе.

0

10

Бу написал(а):

А я не могу у вас хтмл верх найти, вы его вообще не поставили?

поставила

0