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

Объявление

GEMcross

Кроссовер, ориентированный на активную игру и уютный флуд.
Собираем у себя драгоценных игроков уже почти три года.

Посетить

💰 Теперь у нас можно приобрести "Мгновенные уведомления от Алекса"

Скрипт оповещает пользователей о событиях на форуме в реальном времени, придавая динамики общению.
Автор: Alex_63 | Платформа: MyBB.ru.

У нас: структурированная документация, возможность платить иностранными картами, перевыпустить подписку или купить бессрочно.

Купить скрипт

🔥 Новинка в портфолио: ДИЗАЙН ФОРУМА В СТИЛЕ ФЭНТЭЗИ С ПРОЗРАЧНОСТЬЮ

Платформа: MyBB.ru (RusFF)
Стоимость: 8000 рублей;
Авторы: Moju & Gerda

Посмотреть

🌟 ОПЛАТА ЗАКАЗА НАГРАДНЫМИ БАЛЛАМИ И СКИДКИ

Заказы можно оплачивать наградными баллами (НБ). Полностью или частично.
Бартер за НБ осуществляется на условиях платного заказа, в качестве оплаты - НБ.
А если у вас есть любой платный заказ, вы можете обменять НБ на скидочные купоны.

узнать подробности

📣 Наш проект: Ролевой поисковик

Поиск роли на текстовых ролевых
Проект от специалистов FD

Спойлеры и обсуждение

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

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

Подробнее

SPECIAL OFFER: We distribute designs for free

Finalizing the layout for your project;
Developing a style code;
Mobile version included if you wish.

Details

Support the project

If you want to help us:
Become a moderator
Suggestions • Reviews

Details
СкрытьПоказать
❗ ❗ ❗ Technical work is underway. We'll fix it soon. :) If you're english-speaker and want to use our forum, switch to the russian language. This is temporary, until the works with multi-language option will be done. Sorry for the inconvenience.

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

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

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

Страница: 1 2  
Тема закрыта

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

1

  • Автор: Альма
  • Бестелесный дух прошлого
  • Уважение: +43

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

0

2

  • Автор: Бу
  • Бестелесный дух прошлого
  • Бу
  • Уважение: +298

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

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

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

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

0

3

  • Автор: Альма
  • Бестелесный дух прошлого
  • Уважение: +43
Бу написал(а):

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

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

0

4

  • Автор: Бу
  • Бестелесный дух прошлого
  • Бу
  • Уважение: +298

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

0

5

  • Автор: Альма
  • Бестелесный дух прошлого
  • Уважение: +43
Бу написал(а):

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

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

0

6

  • Автор: Бу
  • Бестелесный дух прошлого
  • Бу
  • Уважение: +298

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

С движением

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

Код:
<!--Спойлер - контейнер-->
<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

  • Автор: Альма
  • Бестелесный дух прошлого
  • Уважение: +43

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

0

8

  • Автор: Альма
  • Бестелесный дух прошлого
  • Уважение: +43

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

0

9

  • Автор: Бу
  • Бестелесный дух прошлого
  • Бу
  • Уважение: +298

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

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

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

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

0

10

  • Автор: Альма
  • Бестелесный дух прошлого
  • Уважение: +43
Бу написал(а):

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

поставила

0

Тема закрыта
Страница: 1 2