1. Ссылка на форум:
http://wolftigers.rolka.su/
2. Эскиз таблицы:
3. Дополнительные предпочтения:
Все кроме главной открываются при клике.
🎧 Подкаст «НЕТЕРОЛЕВЫЕ»
Рассказываем и обсуждаем Форумные Ролевые Игры (ФРПГ).
Telegram Обсудить
ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Заказать дизайн, графику или скрипты » Заказать верстку и скрипты » [выполнено]Таблица животные
1. Ссылка на форум:
http://wolftigers.rolka.su/
2. Эскиз таблицы:
3. Дополнительные предпочтения:
Все кроме главной открываются при клике.
[mod]Принято.[/mod]
Все кроме главной открываются при клике.
в смысле? Вам нужен контейнер? Или как выпадающее меню?
С поворотом картинки разберемся, но не знаю, смогу ли привязать туда ссылки. Что - то не думаю, что так можно.
Границы нужны?
В общем, посмотрю, но будьте готовы чуть поправить эскиз.
При заказе таблицы, пожалуйста, сразу указывайте ее ширину и длину, а также другие подробности важные при оформлении таблицы(ширину границ, фон и прочее). Заказы, в которых сразу не будет указано всех подробностей, не переделываются по просьбам: "еще фон сделайте", "а края закруглить можно", " и цвет текста другой сделайте" и прочее в том же духе.
в смысле? Вам нужен контейнер? Или как выпадающее меню?
С поворотом картинки разберемся, но не знаю, смогу ли привязать туда ссылки. Что - то не думаю, что так можно.
Границы нужны?
В общем, посмотрю, но будьте готовы чуть поправить эскиз.
Ну если вы о открытых то вот пример - http://wtbf.rolka.su/ только она сильно отличается от той которую я хоЧу.
Картинку тогда просто можем вставить. А тогда добавить еще и полезные ссылки
Границы нужны. Должно быть видно где начинается таблица, а где нет.
Подправлю хорошо, только скажите как.
Альма
А можно саму картинку или ссылку на нее?
При заказе таблицы, пожалуйста, сразу указывайте ее ширину и длину, а также другие подробности важные при оформлении таблицы(ширину границ, фон и прочее). Заказы, в которых сразу не будет указано всех подробностей, не переделываются по просьбам: "еще фон сделайте", "а края закруглить можно", " и цвет текста другой сделайте" и прочее в том же духе.
Альма
А можно саму картинку или ссылку на нее?
Картинку ладно вот - http://img-fotki.yandex.ru/get/4104/kio … cbb0_L.jpg
Альма
Вот вам сразу несколько вариантов
хтмл низ, всегда один и тот же
Код:<!--Спойлер - контейнер--> <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>
При заказе таблицы, пожалуйста, сразу указывайте ее ширину и длину, а также другие подробности важные при оформлении таблицы(ширину границ, фон и прочее). Заказы, в которых сразу не будет указано всех подробностей, не переделываются по просьбам: "еще фон сделайте", "а края закруглить можно", " и цвет текста другой сделайте" и прочее в том же духе.
Бу
сейчас попробую. спасибо огромное!
Эм. у меня ссылки внизу картинки, а текст в главной вверху, при открытие вкладок текс появляется, но не скрывает тот.
А еще нет важных баннеров....
А я не могу у вас хтмл верх найти, вы его вообще не поставили?
А еще нет важных баннеров....
Просто отделяете их от основного текста отступами <br> и вставляете коды
При заказе таблицы, пожалуйста, сразу указывайте ее ширину и длину, а также другие подробности важные при оформлении таблицы(ширину границ, фон и прочее). Заказы, в которых сразу не будет указано всех подробностей, не переделываются по просьбам: "еще фон сделайте", "а края закруглить можно", " и цвет текста другой сделайте" и прочее в том же духе.
А я не могу у вас хтмл верх найти, вы его вообще не поставили?
поставила
Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Заказать дизайн, графику или скрипты » Заказать верстку и скрипты » [выполнено]Таблица животные