Единый форум поддержки

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

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


Вы здесь » Единый форум поддержки » Архив » Таблицы на заказ (15)


Таблицы на заказ (15)

Сообщений 621 страница 640 из 1000

1

Продолжение темы Таблицы на заказ (14).
Напомню требования:

При заказе таблиц от вас требуется:
1) Эскиз вашей будущей таблицы, сделанный в любом графическом редакторе (Пэинт, Фотошоп и т.д.) - обязательно!
2) Ссылка на ваш форум !Заказы без ссылок приниматься не будут!
3) Указать необходимые прокрутки, всплывающие окна, границы таблиц и т.п.

Заказы типа "Сделайте: Как там!" также приниматься не будут. Потрудитесь нарисовать макет таблицы самостоятельно.

И помните, чем подробнее опишите то, что нужно, тем точнее получите результат.

+3

621

Не актуально.

Отредактировано Mortal DI (Пн, 23 Сен 2013 18:36:17)

0

622

hermilus

Заказ
hermilus написал(а):

1) Эскиз вашей будущей таблицы, сделанный в любом графическом редакторе (Пэинт, Фотошоп и т.д.) - обязательно!
эскизы

    http://s4.uploads.ru/t/eIkty.jpg
    http://s5.uploads.ru/t/Vvd0b.jpg
    http://s4.uploads.ru/t/stU0D.jpg

2) Ссылка на ваш форум !Заказы без ссылок приниматься не будут!
http://testsforme.mybb.ru/
3) Указать необходимые прокрутки, всплывающие окна, границы таблиц и т.п.
ширина таблицы в общем должна составлять 1071px, высота примерно 162px, на заднем фоне таблице будет фон, переключатели тоже будут картинками...

html-верх

<style type="text/css">
/*общая таблица*/
#taba {
     height: 162px;
     width: 1071px;
     margin: -320px 0px 0px -111px;
/*    background: url() no-repeat top center*/ /*фон под всю таблицу - кнопки, информ табло и полезные ссылки*/
    }

#taba, #menu, #submenu, #menu img, #menu .tabactive, #submenu, .submenutext, .links {
/*     border: solid 1px #e12;*/
    }

#menu {
    margin-top: 0px;
    width: 200px;
    height: 160px;
    background-repeat: no-repeat;
    }
#submenu, #menu img, .links {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
/*    background: #430105; */
    }
#menu img {
    display: block !important;
    }
#menu .tabactive {
    background: #460203;
    }
#submenu {
    padding: 3px;
    height: 154px;
    text-align: center;
    font-size: 12px;
    width: 587px;
/*    background: url("http://s5.uploads.ru/agw63.png") no-repeat top center;*/ /*фон под информационное поле без кнопок-переключателей*/
    }
.submenutext {
    width: auto;
    height: 150px;
    }

/*блок с полезными ссылками*/
.links {
    position: relative;
    width: 250px;
    height: 160px;
    text-align: center;
    }

/*полезные ссылки*/
.links a {
    }
</style>

html-низ

<script type="text/javascript">
$(document).ready(function() {
$("td.#MenuTxT div.submenutext").hide();
<!--$(".tabs span:first").addClass("active").show(); -->
$("td.#MenuTxT div.submenutext:first").show();
$("div.#menu img").click(function() {
    $("div.#menu img").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("td.#MenuTxT div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $("div."+activeDiv).fadeIn();
    return false; });
});
</script>

Объявление

<table id=taba>
   <tr>
      <td width=815px>
         <table style="width:810px">
            <tbody>
               <tr>
                  <td valign="top">
                     <div id="menu">
                        <div><img alt="#sm1" src="http://savepic.net/3882017.jpg" style="cursor: pointer;"/></div>
                        <div><img alt="#sm2" src="http://savepic.net/3876897.jpg" style="cursor: pointer; margin: 9px 0px"/></div>
                        <div><img alt="#sm3" src="http://savepic.net/3874849.jpg" style="cursor: pointer; margin: 9px 0px"/></div>
                     </div>
                  </td>
                  <td id="MenuTxT"  align="center" valign="top">
                     <div id="submenu" align="center">

                        <div id="sm1" class="submenutext" style="display:block;"><br/><br/>
текст первой вкладки
                        </div>
                        <div id="sm2" class="submenutext">
                           <table  width=582px>
                              <tr>
                                 <td>
картинка 1</br>
<img src="http://savepic.net/3921952m.jpg"/>
                                 </td>
                                 <td>
картинка 2</br>
<img src="http://savepic.net/3921952m.jpg"/>
                                 </td>
                              </tr>
                              <tr>
                                 <td colspan=2>
текст
                                 </td>
                              </tr>
                           </table>
                        </div>
                        <div id="sm3" class="submenutext"><br/><br/>
текст третьей вкладки
                        </div>

                     </div>
                  </td>
               </tr>
            </tbody>
         </table>
      </td>
      <td>
         <div class="links"></br>
<a href="http://testsforme.mybb.ru/">Полезные</a></br>
<a href="http://testsforme.mybb.ru/">ссылки</a>
         </div>
      </td>
   </tr>
</table>

Комментарии

Поскольку вы не указали, нужно ли и если да, то каким образом необходимо оформить ссылки, я не стал их оформлять. Будет уточнение по этому поводу с вашей стороны - несите - оформим.
Поскольку вы не дали размеров картинок во второй вкладке - высота ячеек под них регулируется высотой самих картинок.
Поскольку вы не указали, где должно располагаться Объявление (по-умолчанию его место между пользовательской панелью и строкой приветствия), но, как я понял, заготовили под него место над панелью навигации, таблице задан сдвиг вверх и влево, чтобы вписаться в эту темно-серую область. Если вам это не нужно - уберите красную сроку.
Поскольку вы не указали наличие прокруток - их нет нигде. Будут нужны - возвращайтесь.
Синим отмечены ссылки для кнопок-переключателей.
Светло-синим - расстояния между кнопками-переключателями

Результат

http://savepic.net/3909664m.jpg http://savepic.net/3910688m.jpg http://savepic.net/3907616m.jpg

0

623

Простите, что повторяюсь, по-моему про меня забыли :(

Здравствуйте! Хочу заказать таблицу на форум http://wolfsopinion.mybb.ru/.

Картинка №1

http://s4.uploads.ru/ehK6J.png

Картинка №2

http://s4.uploads.ru/av6m9.png
Там где цифра 1 - текст выплывает при нажатии/наведении курсором(как вам проще) на аватарку.

С лучшими то же самое, что и во второй картинке.
В Игре просто текст.
С баннерами надеюсь все понятно, там ничего особого не нужно.

Картинка №3

http://s4.uploads.ru/gvBpo.png
Там где цифра 2 текст выплывает при нажатии на кнопки "Важное", "Новости" и "На заметку". Также в этой колонке находится простой текст над этими кнопками.

Сразу скажу, что таблица по длине должна быть 815 px, а по высоте около 300.
Всплывающий текст должен быть в окошке с одноцветным светлым фоном, но не полупрозрачный.
Также важно, чтобы если основной текст не влезает появлялась бы полоса прокрутки.

0

624

Лесси, нет, про вас не забыли. Как раз вашим заказом я сейчас и занимаюсь. Вчера выложил таблицу для пользователя, оставившим заказ перед вами.
Я вас очень попрошу дать все необходимые данные заранее. Если вы знаете, какой где должен быть цвет - дайте код, если где-то должен быть фон - ссылку, если где-то должна быть структура (таблица для баннеров, заголовки, центрирование текста, отступы или пустые строки) - пишите. Потому что потом приходится переделывать и едва ли не всё. Чем больше дадите информации, тем точнее можно выполнить заказ сразу.

0

625

Remus John Lupin
очень приятно что про меня помнят :)

Я надеюсь, что оформлением займется мой многоуважаемый дизайнер. Так что необходимо сделать только основу.

Можно кое-что добавить?

Картинка № 4

http://s4.uploads.ru/bmXeO.png

В вкладке "Игра" сделать 4 одинаковых контейнера с рамками. Вместо голубых квадратиков я вставлю картинку 70*70. Прямоугольники открываются при нажатии - растягивают таблицу( справа появляется бегунок):

Картинка № 5

http://s5.uploads.ru/ZQsKT.png

Извините что не сказала сразу и прибавила работы.

Отредактировано Лесси (Пн, 23 Сен 2013 22:29:19)

0

626

Лесси написал(а):

Можно кое-что добавить?

добавлять можно и нужно.
На обоих картинках (4 и 5) активные язычки к вкладкам Игра. Картинка №4, как я понимаю, действительно Игра, а вот что на пятой? Начало?
И я не совсем понял, что значит

Лесси написал(а):

Прямоугольники открываются при нажатии - растягивают таблицу( справа появляется бегунок):

Это должно быть нечто вроде спойлеров?

И еще один важный момент. Для того, чтобы реализовать просимое вами для вкладки АМС, мне нужно точно знать размеры картинок, размеры поля, в котором будет поясняющий текст, их, этих аватарок - точное количество и месторасположение. Учтите еще один момент: изменять количество участников АМС (количество аватаров-кнопок) будет весьма затруднительно.

Отредактировано Remus John Lupin (Вт, 24 Сен 2013 00:23:17)

0

627

Remus John Lupin написал(а):

Это должно быть нечто вроде спойлеров?

да, спайлеров :)

Remus John Lupin написал(а):

И еще один важный момент. Для того, чтобы реализовать просимое вами для вкладки АМС, мне нужно точно знать размеры картинок, размеры поля, в котором будет поясняющий текст, их, этих аватарок - точное количество и месторасположение. Учтите еще один момент: изменять количество участников АМС (количество аватаров-кнопок) будет весьма затруднительно.

понимаю. Будет 8 аватарок. Размеры - 100*100.
А размер поля с поясняющим текстом не может растягиваться по длине? а ширина - 200 рх

Remus John Lupin написал(а):

На обоих картинках (4 и 5) активные язычки к вкладкам Игра. Картинка №4, как я понимаю, действительно Игра, а вот что на пятой? Начало?И я не совсем понял, что значит

На пятой картинке показано как желательно было бы чтобы выглядела таблица при открытом спойлере вкладки игры.
А в начале новости всякие. Картинка № 3 - начало.

Картинка №3

http://s4.uploads.ru/gvBpo.png
Там где цифра 2 текст выплывает при нажатии на кнопки "Важное", "Новости" и "На заметку". Также в этой колонке находится простой текст над этими кнопками.

Над кнопками - простой текст. Его желательно взять в рамку. Под рамкой - три кнопки. При нажатии на них всплывает текст. Размеры те же, что и в поля с тестом для АМС.

0

628

Лесси, Мерлин всемогущий, это будет такой Франкенфтейн http://www.kolobok.us/smiles/light_skin/crazy.gif

Лесси написал(а):

А размер поля с поясняющим текстом не может растягиваться по длине?

Я попробую что-то придумать.
Таблица очень сложная, многоярусная, с большим количеством "карманов"-матрешек. Не знаю, насколько эту будет удобно и насколько вообще и в принципе целесообразно засовывать весь форум в объявление вместо того, чтобы соорудить только карту, но воля ваша. Попробуем.

0

629

Remus John Lupin
не попробуешь - никогда не узнаешь. Спасибо :)

0

630

Лесси

Заказ
Лесси написал(а):

Хочу заказать таблицу на форум http://wolfsopinion.mybb.ru/.
Картинка №1

    http://s4.uploads.ru/ehK6J.png

Картинка №2

    http://s4.uploads.ru/av6m9.png
    Там где цифра 1 - текст выплывает при нажатии/наведении курсором(как вам проще) на аватарку.

С лучшими то же самое, что и во второй картинке.
В Игре просто текст.
С баннерами надеюсь все понятно, там ничего особого не нужно.
Картинка №3

    http://s4.uploads.ru/gvBpo.png
    Там где цифра 2 текст выплывает при нажатии на кнопки "Важное", "Новости" и "На заметку". Также в этой колонке находится простой текст над этими кнопками.

Сразу скажу, что таблица по длине должна быть 815 px, а по высоте около 300.
Всплывающий текст должен быть в окошке с одноцветным светлым фоном, но не полупрозрачный.
Также важно, чтобы если основной текст не влезает появлялась бы полоса прокрутки.

Лесси написал(а):

Я надеюсь, что оформлением займется мой многоуважаемый дизайнер. Так что необходимо сделать только основу.

Можно кое-что добавить?
Картинка № 4

    http://s4.uploads.ru/bmXeO.png

В вкладке "Игра" сделать 4 одинаковых контейнера с рамками. Вместо голубых квадратиков я вставлю картинку 70*70. Прямоугольники открываются при нажатии - растягивают таблицу( справа появляется бегунок):
Картинка № 5

    http://s5.uploads.ru/ZQsKT.png

html-верх

<style type="text/css">
/*======= AA - ОСНОВНАЯ ТАБЛИЦА========*/

/*AA0 - бордеры основной таблицы*/
#menu, #submenu, #menu .tabactive, #submenu, #menu span, .submenutext, .links, .links h3 {
/*    border: solid 1px #e12;*/
    }

/*AA1.1 - контейнер под язычки вкладок*/
#menu {
    height: auto;
    padding-left: 3px;
    }

/*AA1.2 - настройка заголовков на язычках*/
#menu span {
    display: inline-block;
    width: 113.2px;
    margin: 0px -3px;
    padding: 11px;
    text-align: center;
    font: bold 18px 'palatino linotype';
    font-variant: small-caps;
    color: #111;

    border: solid 2px #333333;
    }

/*AA1.3 - оформление язычка при наведении*/
#menu span:hover {
    color: #000000;
    text-shadow: 2px 2px 2px #424D7C;

    border: solid 2px #333333;
    }

/*AA1.4 - оформление активной вкладки (язычка)*/
#menu span.tabactive {
    color: #000000;
    text-shadow: 2px 2px 2px #424D7C;

    border: solid 2px #333333;
    border-bottom: none;
    }

/*AA2.1 - информ поле*/
#submenu {
    height: 300px;
    width: 815px;
    padding: 3px;
    margin-top: -6px;
    text-align: center;
    font-size: 12px;
    border: solid 2px #333333;
    border-top: none; 
    border-radius: 0px 0px 5px 5px;
    -webkit-border-radius: 0px 0px 5px 5px;
    -khtml-border-radius: 0px 0px 5px 5px;
    -moz-border-radius: 0px 0px 5px 5px;
    -o-border-radius: 0px 0px 5px 5px;
/*    background: #efeff0;*/
    }

/*AA2.2 - внутренний блок информ поля под содержимое*/
.submenutext {
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    }

/*======== AВ - ТАБЛИЦА НОВОСТЕЙ========*/

/*AВ0 - бордеры таблицы новостей*/
#menu-news, #submenu-news, #menu-news .tabactive, .submenutext-news {
/*    border: solid 1px #e12;*/
    }

/*AВ1.1 - блок с текстом*/
.news-text {
    height: 226px;
    width: 500px;
    border: 1px solid #333333;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    -moz-border-radius: 15px;
    -o-border-radius: 15px;
    }

/*AВ1.2 - внутренний блок с текстом*/
.news_text {
    height: 213px;
    margin: 7px 3px;
    text-align: center;
    overflow-y: auto;
    }

/*AВ2.1 - контейнер под язычки вкладок*/
#menu-news {
    height: auto;
    padding-left: 2px;
    }

/*AВ2.2 - настройка заголовков на язычках*/
#menu-news span {
    display: inline-block;
    width: 125px;
    margin: 0px 60px;
    padding: 6px;
    color: #111;
    text-align: center;
    font: bold 14px 'palatino linotype';
    font-variant: small-caps;
    border: solid 2px #333333;
    border-radius: 30em/60px;
    -webkit-border-radius: 30em/60px;
    -khtml-border-radius: 30em/60px;
    -moz-border-radius: 30em/60px;
    -o-border-radius: 30em/60px;
    overflow-y: auto;
    }

/*AВ2.3 - оформление активной вкладки (язычка)*/
#menu-news span:hover, #menu-news span.tabactive {
    color: #000000;
    text-shadow: 2px 2px 2px #424D7C;
    border: solid 2px #333333;
    }

/*AВ3.1 - информ поле*/
#submenu-news {
    height: 220px;
    width: 200px;
    padding: 3px;
    margin: 0px 0px 5px 0px;
    text-align: center;
    font-size: 12px;
    border: solid 1px #333333;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    -moz-border-radius: 15px;
    -o-border-radius: 15px;
/*    background: #efeff0;*/
    }

/*AВ3.2 - внутренний блок информ поля под содержимое*/
.submenutext-news {
    height: 215px;
    overflow-y: auto;
    margin-top: 2px;
    }

/*========== АС - ТАБЛИЦ ИГРЫ=========*/

/*AС1.1*/
#spo_all {
    width: auto;
    margin: 0 auto 0 auto;
    }

/*AС1.2*/
#spo_top {
    width: 340px;
    height: auto;
    min-height: 80px;
    margin: 8px auto 0px;
    padding: 5px;
    color: #000;
    font: /*bold*/ 12px Verdana 'palatino linotype';
    cursor: pointer;
    border: 1px solid;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    }

/*AС1.3*/
#spo_top img {
    float: left;
    display: block;
    width: auto;
    height: auto;
    margin: 4px;
    border: solid 1px #e12;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    }

/*AС1.4*/
#spoiler4 {
    display: none;
    width: 338px;
    height: auto;
    max-height: 165px;
    margin: -3px auto 8px auto;
    padding: 6px;
    background: #FAFCFE;
    border: 1px solid #000;
    border-top: 0;
    border-radius: 0px 0px 5px 5px;
    -webkit-border-radius: 0px 0px 5px 5px;
    -khtml-border-radius: 0px 0px 5px 5px;
    -moz-border-radius: 0px 0px 5px 5px;
    -o-border-radius: 0px 0px 5px 5px;
    overflow-y: auto;
    }

/*AС1.5*/
#spo_option {
    font-weight: bold;
    cursor: pointer;
    float: left;
    }

/*AС1.6*/
#spo_desc {
    float: right;
    }

/*======== АD - ТАБЛИЦЫ АМС И ЛУЧШИХ========*/

/*АD0 - бордеры*/
#menu-1, #menu-2, #menu-3, #menu-4, #menu-1 img, #menu-2 img, #menu-3 img, #menu-4 img, #submenu-ams, #submenu-best {
/*    border: solid 1px #e12;*/
    }

/*АD1.1 - блок левых аватаров*/
#menu-1, #menu-3 {
    margin-top: 0px;
    max-width: 120px;
    }

/*АD1.2 - блок правых аватаров*/
#menu-2, #menu-4 {
    margin-top: 0px;
    max-width: 470px;
    }

/*АD1.3 - картинки в левом блоке аватаров*/
#menu-1 img, #menu-3 img {
    display: block;
    margin-bottom: 6px;
    }

/*АD1.4 - картинки в правом блоке аватаров*/
#menu-2 img, #menu-4 img {
    display: inline-block;
    margin: 0px 0px 6px 6px;
    }

/*АD2.1 - оформление активной вкладки (язычка)*/
#menu-1 .tabactive, #menu-2 .tabactive, #menu-3 .tabactive, #menu-4 .tabactive {
    background-color: #460203;
    }

/*АD3.1 - информ поле*/
#submenu-ams, #submenu-best {
    width: 200px;
    height: auto;
    padding: 3px;
    text-align: center;
    font-size: 12px;
    }

/*АD3.2 - внутренний блок информ поля под содержимое*/
.submenutext-1, .submenutext-2 {
    height: 100px;
    padding: 8px;
    resize: vertical;
    overflow: auto;
    background-color: #EAF0F3;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    -moz-border-radius: 15px;
    -o-border-radius: 15px;
    }

/*======= AE - ССЫЛКИ НАВИГАЦИИ========*/

/*AE1.1 - блок со ссылками*/
.links {
    height: 295px;
    width: 267px;
    position: absolute;
    }

/*AE1.2 - настройка ссылок*/
.links a {
    color: #162546 !important; /*цвет текста ссылок*/
    background-color: #4D5789; /*фон ссылок*/
/*    border: solid 2px #9B9898; бордюры вокруг ссылок*/
    line-height: 150%; /*междустрочный интервал для ссылок*/
    width: 200px;
    padding: 3px;
    margin: 1px;
    display: block;
    }

/*AE1.3 - настройка ссылок в активе*/
.links a:hover {
    color: #162546 !important; /*цвет текста ссылок*/
    background-color: #B8C6D1; /*фон ссылок*/
    border: solid 0.5px #9B9898; /*бордюры вокруг ссылок*/
    border-bottom-style: solid !important;
    }

/*AE1.4 - заголовки*/
.links h3 {
    font: bold 16px 'palatino linotype';
    font-color: #333333;
    }
</style>

html-низ

<!--Основная таблица -->
<script type="text/javascript">
$(document).ready(function() {
$("td.#MenuTxT div.submenutext").hide();
$("#menu span:first").addClass("tabactive").show();
$("td.#MenuTxT div.submenutext:first").show();
$("div.#menu span").click(function() {
    $("div.#menu span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("td.#MenuTxT div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $("div."+activeDiv).fadeIn();
    return false; });
});
</script>

<!--Таблица в Новости -->
<script type="text/javascript">
$(document).ready(function() {
$("td.#MenuTxT-news div.submenutext-news").hide();
$("#menu-news span:first").addClass("tabactive").show();
$("td.#MenuTxT-news div.submenutext-news:first").show();
$("div.#menu-news span").click(function() {
    $("div.#menu-news span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("td.#MenuTxT-news div.submenutext-news").hide();
    var activeDiv = $(this).attr("alt");
    $("div."+activeDiv).fadeIn();
    return false; });
});
</script>

<!--Таблицы в АМС и Лучшие -->
<script type="text/javascript">
$(document).ready(function() {
$("td.#MenuTxT-1 div.submenutext-1, td.#MenuTxT-2 div.submenutext-2").hide();
<!--$("#menu-1 img:first, #menu-3 img:first").addClass("tabactive").show(); -->
$("td.#MenuTxT-1 div.submenutext-1:first, td.#MenuTxT-2 div.submenutext-2:first").show();
$("div.#menu-1 img, div.#menu-2 img, div.#menu-3 img, div.#menu-4 img").click(function() {
    $("div.#menu-1 img, div.#menu-2 img, div.#menu-3 img, div.#menu-4 img").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("td.#MenuTxT-1 div.submenutext-1, td.#MenuTxT-2 div.submenutext-2").hide();
    var activeDiv = $(this).attr("alt");
    $("div."+activeDiv).fadeIn();
    return false; });
});
</script>

Объявление

<center>
   <table style="width: 815px">
      <tbody>
         <tr>
            <td valign=top>
               <div id="menu"><b>
<span alt="#sm1" style="cursor: pointer;">Начало</span>
<span alt="#sm2" style="cursor: pointer;">Навигация</span>
<span alt="#sm3" style="cursor: pointer;">Игра</span>
<span alt="#sm4" style="cursor: pointer;">АМС</span>
<span alt="#sm5" style="cursor: pointer;">Лучшие</span>
<span alt="#sm6" style="cursor: pointer;">Баннеры</span></b>
               </div>
            </td>
         </tr>
         <tr>
            <td id="MenuTxT"  align="center" valign="top">
               <div id="submenu" align="center">
                  <div id="sm1" class="submenutext" style="display: block;">
Начало<br/>
                     <center>
                        <table style="width: 810px" valign="center" align="center">
                           <tbody>
                              <tr>
                                 <td id="MenuTxT-news" width="240px" valign="bottom" align="right">
                                    <div id="submenu-news" align="center">
                                       <div id="sn1" class="submenutext-news" style="display:block;">
текст Важное 1
                                       </div>
                                       <div id="sn2" class="submenutext-news"><br/><br/>
текст Новости 2
                                       </div>
                                       <div id="sn3" class="submenutext-news"><br/><br/>
текст На заметку 3
                                       </div>
                                    </div>
                                 </td>
                                 <td valign="top" align="center" colspan="2">
                                    <div class="news-text">
                                       <div class="news_text">
Постоянный ТЕКСТ
                                       </div>
                                    </div>
                                 </td>
                              </tr>
                              <tr>
                                 <td valign="center" align="center" colspan="3">
                                    <div id="menu-news"><b>
<span alt="#sn1" style="cursor: pointer;">Важное</span>
<span alt="#sn2" style="cursor: pointer;">Новости</span>
<span alt="#sn3" style="cursor: pointer;">На заметку</span></b>
                                    </div>
                                 </td>
                              </tr>
                           </tbody>
                        </table>
                     </center>
                  </div>
                  <div id="sm2" class="submenutext">
                     <div class="links">
<br/><h3>Заголовок навигации 1</h3>
                        <center>
<a href="http://wolfsopinion.mybb.ru/">Ссылка 1</a>
<a href="http://wolfsopinion.mybb.ru/">Ссылка 2</a>
<a href="http://wolfsopinion.mybb.ru/">Ссылка 3</a>
<a href="http://wolfsopinion.mybb.ru/">Ссылка 4</a>
<a href="http://wolfsopinion.mybb.ru/">Ссылка 5</a>
                        </center>
                     </div>
                     <div class="links" style="margin-left:272px;">
<br/><h3>Заголовок навигации 2</h3>
                        <center>
<a href="http://wolfsopinion.mybb.ru/">Ссылка 6</a>
<a href="http://wolfsopinion.mybb.ru/">Ссылка 7</a>
<a href="http://wolfsopinion.mybb.ru/">Ссылка 8</a>
<a href="http://wolfsopinion.mybb.ru/">Ссылка 9</a>
                        </center>
                     </div>
                     <div class="links" style="margin-left:544px;">
<br/><h3>Заголовок навигации 3</h3>
                        <center>
<a href="http://wolfsopinion.mybb.ru/">Ссылка 10</a>
<a href="http://wolfsopinion.mybb.ru/">Ссылка 11</a>
<a href="http://wolfsopinion.mybb.ru/">Ссылка 12</a>
<a href="http://wolfsopinion.mybb.ru/">Ссылка 13</a>
                        </center>
                     </div>
                  </div>
                  <div id="sm3" class="submenutext">
текст Игра<br/>
                     <table width="790px" height="285px">
                        <tr>
                           <td valign="top">
                              <div class="main" id="spo_all"><div class="category" id="spo_top" onclick="obj=this.parentNode.childNodes[1].style; tmp=(obj.display!='block') ? 'block' : 'none'; obj.display=tmp; return false;">

<img src="http://savepic.net/3880019.png">Заголовок левого верхнего спойлера

                              </div><div id="spoiler4">
Поясняющий текст левого верхнего спойлера
                              </div></div>
                           </td>
                           <td valign="top">
                              <div class="main" id="spo_all"><div class="category" id="spo_top" onclick="obj=this.parentNode.childNodes[1].style; tmp=(obj.display!='block') ? 'block' : 'none'; obj.display=tmp; return false;">

<img src="http://savepic.net/3880019.png">Заголовок правого верхнего спойлера

                              </div><div id="spoiler4">
Поясняющий текст правого верхнего спойлера
                              </div></div>
                           </td>
                        </tr>
                        <tr>
                           <td valign="top">
                              <div class="main" id="spo_all"><div class="category" id="spo_top" onclick="obj=this.parentNode.childNodes[1].style; tmp=(obj.display!='block') ? 'block' : 'none'; obj.display=tmp; return false;">

<img src="http://savepic.net/3880019.png">Заголовок нижнего левого спойлера

                              </div><div id="spoiler4">
Поясняющий текст нижнего левого спойлера
                              </div></div>
                           </td>
                           <td valign="top">
                              <div class="main" id="spo_all"><div class="category" id="spo_top" onclick="obj=this.parentNode.childNodes[1].style; tmp=(obj.display!='block') ? 'block' : 'none'; obj.display=tmp; return false;">

<img src="http://savepic.net/3880019.png">Заголовок правого нижнего спойлера

                              </div><div id="spoiler4">
Поясняющий текст правого нижнего спойлера
                              </div></div>
                           </td>
                        </tr>
                     </table>
                  </div>
                  <div id="sm4" class="submenutext">
<br/>АМС<br/><br/>
                     <center>
                        <table style="width: 790px" valign="center" align="center">
                           <tbody>
                              <tr>
                                 <td valign="center" align="center" width="120px">
                                    <div id="menu-1">
<img alt="#sa1" src="http://savepic.net/3928152.jpg" style="cursor: pointer; "/>
<img alt="#sa2" src="http://savepic.net/3928152.jpg" style="cursor: pointer;"/>
                                    </div>
                                 </td>
                                 <td id="MenuTxT-1" width="auto" align="center" valign="center">
                                    <div id="submenu-ams" align="center">
                                       <div id="sa1" class="submenutext-1" style="display:block;">
текст аватар амс 1
                                       </div>
                                       <div id="sa2" class="submenutext-1"><br/><br/>
текст аватар амс 2
                                       </div>
                                       <div id="sa3" class="submenutext-1"><br/><br/>
текст аватар амс 3
                                       </div>
                                       <div id="sa4" class="submenutext-1"><br/><br/>
текст аватар амс 4
                                       </div>
                                       <div id="sa5" class="submenutext-1"><br/><br/>
текст аватар амс 5
                                       </div>
                                       <div id="sa6" class="submenutext-1"><br/><br/>
текст аватар амс 6
                                       </div>
                                       <div id="sa7" class="submenutext-1"><br/><br/>
текст аватар амс 7
                                       </div>
                                       <div id="sa8" class="submenutext-1"><br/><br/>
текст аватар амс 8
                                    </div>
                                 </td>
                                 <td valign="center">
                                    <div id="menu-2">
<img alt="#sa3" src="http://savepic.net/3928152.jpg" style="cursor: pointer;"/>
<img alt="#sa4" src="http://savepic.net/3928152.jpg" style="cursor: pointer;"/>
<img alt="#sa5" src="http://savepic.net/3928152.jpg" style="cursor: pointer;"/>
<img alt="#sa6" src="http://savepic.net/3928152.jpg" style="cursor: pointer;"/>
<img alt="#sa7" src="http://savepic.net/3928152.jpg" style="cursor: pointer;"/>
<img alt="#sa8" src="http://savepic.net/3928152.jpg" style="cursor: pointer;"/>
                                    </div>
                                 </td>
                              </tr>
                           </tbody>
                        </table>
                     </center>
                  </div>
                  <div id="sm5" class="submenutext">
<br/>Лучшие<br/><br/>
                     <center>
                        <table style="width: 790px" valign="center" align="center">
                           <tbody>
                              <tr>
                                 <td valign="center" align="center" width="120px">
                                    <div id="menu-3">
<img alt="#sb1" src="http://savepic.net/3928152.jpg" style="cursor: pointer; "/>
<img alt="#sb2" src="http://savepic.net/3928152.jpg" style="cursor: pointer;"/>
                                    </div>
                                 </td>
                                 <td id="MenuTxT-2" width="auto" align="center" valign="center">
                                    <div id="submenu-best" align="center">
                                       <div id="sb1" class="submenutext-2" style="display:block;"><br/><br/>
текст аватар лучших 1
                                       </div>
                                       <div id="sb2" class="submenutext-2"><br/><br/>
текст аватар лучших 2
                                       </div>
                                       <div id="sb3" class="submenutext-2"><br/><br/>
текст аватар лучших 3
                                       </div>
                                       <div id="sb4" class="submenutext-2"><br/><br/>
текст аватар лучших 4
                                       </div>
                                       <div id="sb5" class="submenutext-2"><br/><br/>
текст аватар лучших 5
                                       </div>
                                       <div id="sb6" class="submenutext-2"><br/><br/>
текст аватар лучших 6
                                       </div>
                                       <div id="sb7" class="submenutext-2"><br/><br/>
текст аватар лучших 7
                                       </div>
                                       <div id="sb8" class="submenutext-2"><br/><br/>
текст аватар лучших 8
                                    </div>
                                 </td>
                                 <td valign="center">
                                    <div id="menu-4">
<img alt="#sb3" src="http://savepic.net/3928152.jpg" style="cursor: pointer;"/>
<img alt="#sb4" src="http://savepic.net/3928152.jpg" style="cursor: pointer;"/>
<img alt="#sb5" src="http://savepic.net/3928152.jpg" style="cursor: pointer;"/>
<img alt="#sb6" src="http://savepic.net/3928152.jpg" style="cursor: pointer;"/>
<img alt="#sb7" src="http://savepic.net/3928152.jpg" style="cursor: pointer;"/>
<img alt="#sb8" src="http://savepic.net/3928152.jpg" style="cursor: pointer;"/>
                                    </div>
                                 </td>
                              </tr>
                           </tbody>
                        </table>
                     </center>

                  </div>
                  <div id="sm6" class="submenutext">
                     <center>

<br/>текст Баннеры партнеров<br/><br/>
                        <table>
                           <tr align=center>
                              <td>
Тыкай!
                              </td>
                              <td>
Наш баннер
                              </td>
                           </tr>
                           <tr align=center>
                              <td>
<a target="top_" title="Рейтинг Ролевых Ресурсов - RPG TOP" href="http://top.roleplay.ru/20743"><img height="31" border="0" width="88" alt="Рейтинг Ролевых Ресурсов - RPG TOP" src="http://img.rpgtop.su/88x31x11x3.gif"></img></a>
                              </td>
                              <td>
<a target="_blank" href="http://catswarriorshope.mybb.ru "><img height="31" border="0" width="80" alt="КВВН Заходи!" src="http://belayazvezda.ucoz.ru/_fr/21/2360803.gif"></img></a>
                              </td>
                           </tr>
                        </table>
                        <marquee>
<a target="top_" title="Рейтинг Ролевых Ресурсов - RPG TOP" href="http://top.roleplay.ru/20743"><img height="31" border="0" width="88" alt="Рейтинг Ролевых Ресурсов - RPG TOP" src="http://img.rpgtop.su/88x31x11x3.gif"></img></a>
<a target="_blank" href="http://catswarriorshope.mybb.ru "><img height="31" border="0" width="80" alt="КВВН Заходи!" src="http://belayazvezda.ucoz.ru/_fr/21/2360803.gif"></img></a>
                        </marquee>
                     </center>
                  </div>
               </div>
            </td>
         </tr>
      </tbody>
   </table>
</center>

Комментарии


Светло-синим
- ссылки на картинки в описании спойлеров - Вкладка Игра (в этих же строках - текстовые заголовки соответствующих спойлеров)
Розовым курсивом - первые две ссылки на аватары АМС. На вкладке они расположены слева от общего информационного поля.
Розовым - остальные ссылки на аватары команды АМС. Порядок построчный (ориентируйтесь на порядковые номера в таких частях кода sa3)
Фиолетовым курсивом - первые две ссылки на аватары Лучших. Аналогично структура АМС
Фиолетовым - остальные ссылки на Лучших. Ориентироваться на порядковые номера в таких записях sb3
Помещенные между красными тегами баннеры будет отображаться бегущей строкой как только длила цепочки баннеров превысит ширину окна
Сине-зеленым - ссылки на вкладке Навигация. Подчеркнутую строку размножать или удалять в каждой секции сколько угодно
Бирюзовым - описание к ссылка Навигации
Все, что выделено желтым (цвет текста и маркер) поможет вам настроить под себя заголовки на язычках основной таблицы (сами заголовки тоже выделены желтым о объявлении). Какие параметры из выделенных за что отвечают - читайте чуть выше оных в комментариях после шифра кода, например, /*АА1.2*/

Результат

http://savepic.net/3913815m.jpg http://savepic.net/3911767m.jpg http://savepic.net/3901527m.jpg http://savepic.net/3902551m.jpg http://savepic.net/3905623m.jpg http://savepic.net/3906647m.jpg http://savepic.net/3903575m.jpg http://savepic.net/3893335m.jpg http://savepic.net/3892311m.jpg http://savepic.net/3897431m.jpg http://savepic.net/3896407m.jpg

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

Отредактировано Remus John Lupin (Ср, 25 Сен 2013 17:56:07)

+1

631

Remus John Lupin простите, а я же следующая ?)

0

632

Катюшка, не за что просить прощения. Да, вы следующая. Как раз сейчас думаю, какую структуру выбрать, чтобы вам было проще с ней орудовать.
Кстати, высоту таблицы принесите, пожалуйста (в а идеале еще и пропорции ячеек, в которых будет располагаться информация).
Разделительных черт (у вас темно-серым) быть тоже не должно?
И да, названный вами шрифт не является шрифтом по-умолчанию. Вы будете прикручивать к форуму этот шрифт/он уже прикручен? Потому что если нет, то эти заголовки нужно будет делать картинками и в таком случае у вас тоже есть работа, пока я буду собирать вам таблицу.

0

633

Remus John Lupin
почти все идеально кроме одного. В АМС (соответсвенно и в Лучших, они одинаковы) Вы не совсем правильно меня поняли (или я не правильно объяснила). В общем, я имела ввиду что при нажатии на аватарку выплывает текст то есть он появляется рядом с аватаркой, накрывая тем самым все что рядом. Я не знаю как это называется... ну как-то так.

Картинки

http://s4.uploads.ru/t/Xh9dT.png
http://s4.uploads.ru/MotW4.png

И спасибо за подробное объяснение :)

0

634

Лесси, я действительно понял не так, как вы сейчас написали и нарисовали, а так, как было написано и нарисовано в первый раз. Если бы вы как сейчас показали кусочки аватаров за облаком с пояснениями, я бы вас понял правильно сразу. :-)
По ходу дела - думайте и смотрите, что еще исправлять. И как.
Как только соберете все баги (а я как раз домастерю следующую таблицу) - поправлю все в вашей.

Лесси написал(а):

И спасибо за подробное объяснение :)

На здоровье. Главное, чтобы понятно.

0

635

Remus John Lupin
хорошо. Постараюсь теперь объяснять правильнее. Но по-моему кроме этого все идеально. :)

0

636

Remus John Lupin   высота 400
да, правильно, разделительных черт не должно быть.
Ну в принципе я и собиралась вместо заголовков картинки впихнуть )
вот вроде ячейки посчитала)

таблица

http://s5.uploads.ru/t/mbPhH.jpg

0

637

Remus John Lupin
еще один вопрос - можно ли убрать красную рамку во вкладке "Игра"? и как это сделать?

0

638

Лесси написал(а):

еще один вопрос - можно ли убрать красную рамку во вкладке "Игра"? и как это сделать?

#spo_top img {
float: left;
display: block;
width: auto;
height: auto;
margin: 4px;
border: solid 1px #e12;
border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
}

Красным отметил ваш красный бордюр, можете либо сменить цвет, либо убрать совсем бордюр таким образом: border: 0;

+1

639

kolobdur74
спасибо, помогло :)

0

640

Катюшка

Заказ
Катюшка написал(а):

Здравствуйте, хотелось бы заказать таблицу на этот форум
1)
эскиз

    http://s5.uploads.ru/t/JN2LV.jpg

2) http://tendarov.webtalk.ru/
3)
-все полосы/границы таблицы прозрачны
-фон таблицы #242938, прозрачен на 78%
-таблицу по всей ширине тела ( если можно, на всякий случай укажите , где в коде это можно изменить)
-Kvests/News/Need/Best player/Victim/Active/Administration/Navigation:  шрифт - eternal fascination , эффекты-тень (с размерами сама не могу определится)
-остальной текст: шрифт - times new roman
-там , где прокрутка, только в случае , если поле заполнено
-иконки , где Administration 40х40
-иконки, где Best player/Victim/Active 60х60

html-верх

<style type="text/css">
/*общие настройки*/
#obyava, .left-row, .kvests, .kvests:after, .need, .center-row, .text, .news, .news_in, .BVA, .right-row, .AMS, .navi {
/*    border: solid 1px #e12;*/
    }
#obyava img, .kvests, .need, .text, .news, .BVA, .AMS, .navi, .navi a  {
    display: block;
    }
.left-row, .center-row, .right-row {
    height: auto;
    }
.kvests, .kvests_in, .need, .text, .news, .news_in, .BVA, .AMS, .navi  {
    width: auto;
    text-align: center;
    }
.BVA img, .AMS img {
    display: inline-block !important;
    }

/*внешний блок*/
#obyava {
    width: 885px;
    height: 400px;
    margin: auto;
    background-color: #4F5259;
    opacity: 0.78;
    }
/*центровка картинок-заголовков*/
#obyava img {
    margin: auto;
    }
/*левая колонка*/
.left-row {
    position: relative;
    width: 228px;
    }
/*блок квесты*/
.kvests {
    height: 220px;
    }
/*внутренний блок квестов для текста с прокруткой*/
.kvests_in {
    height: 140px;
    padding: 5px;
    overflow-y: auto;
    }
/*блок нужные*/
.need {
    height: 175px;
    }
/*центральная колонка колонка*/
.center-row {
    position: absolute;
    width: 423px;
    margin: -394px 0px 0px 230px;
    }
/*блок приветствия*/
.text {
    height: 140px;
    padding: 5px;
    }
/*блок новостей*/
.news {
    height: 132px;
    }
/*внутренний блок новостей для текста с прокруткой*/
.news_in {
    height: 75px;
    padding: 5px;
    overflow-y: auto;
    }
/*блок лучших*/
.BVA {
    height: 111px;
    }
/*правая колонка*/
.right-row {
    position: absolute;
    width: 228px;
    margin: -392px 0px 0px 655px;
    }
/*блок АМС*/
.AMS {
    height: 150px;
    }
/*блок навигации*/
.navi {
    height: 245px;
    }
/*настройка ссылок*/
.navi a {
    color: #1A1B1D !important; /*цвет текста ссылок*/
    background-color: #868686; /*фон ссылок*/
    border: solid 0.5px #9E9F9A; /*бордюры вокруг ссылок*/
    border-radius: 100px 100px 10px 10px/2em 2em 3em 3em;
/*    line-height: 150%; междустрочный интервал для ссылок*/
    width: 120px;
    padding: 1px;
    margin: 3px;
    }
/*настройка ссылок в активе*/
.navi a:hover {
    color: #1A1B1D !important; /*цвет текста ссылок*/
    background-color: #242938; /*фон ссылок*/
    border: solid 0.5px #9E9F9A; /*бордюры вокруг ссылок*/
    border-bottom-style: solid !important;
    }
</style>

Объявление

<div id="obyava">
   <div class="left-row">
      <div class="kvests">
<img src="http://savepic.net/3901546.jpg"><br/>
          <div class="kvests_in">
Перечень квестов
         </div>
      </div>
      <div class="need">
<img src="http://savepic.net/3899498.jpg">
Список нужных персонажей
      </div>
   </div>
   <div class="center-row">
      <div class="text"><br/>
Текст приветствия
      </div>
      <div class="news">
<img src="http://savepic.net/3900522.jpg">
         <div class="news_in">
Новости ролевой
         </div>
      </div>
      <div class="BVA">
<img src="http://savepic.net/3905642.jpg"><br/>
<img src="http://savepic.net/3929197.jpg" style="border: solid 3px #BD9861">
<img src="http://savepic.net/3929197.jpg" style="margin: 0px 35px; border: solid 3px #BD9861">
<img src="http://savepic.net/3929197.jpg" style="border: solid 3px #BD9861">
      </div>
   </div>
   <div class="right-row">
      <div class="AMS">
<img src="http://savepic.net/3903594.jpg"><br/><br/>
<img src="http://savepic.net/3882093.jpg" style="border: solid 3px #BD9861">
<img src="http://savepic.net/3882093.jpg" style="margin: 0px 15px; border: solid 3px #BD9861">
<img src="http://savepic.net/3882093.jpg" style="border: solid 3px #BD9861">
      </div>
      <div class="navi">
         <center>
<img src="http://savepic.net/3904618.jpg"><br/>
<a href="http://tendarov.webtalk.ru/">Гостевая</a>
<a href="http://tendarov.webtalk.ru/">Сюжет</a>
<a href="http://tendarov.webtalk.ru/">Правила</a>
<a href="http://tendarov.webtalk.ru/">Акции</a>
<a href="http://tendarov.webtalk.ru/">Внешности</a>
<a href="http://tendarov.webtalk.ru/">Список ролей</a>
<a href="http://tendarov.webtalk.ru/">Регистрация</a>
         </center>
      </div>
   </div>
</div>

Комментарии

Темно-красным. Вы просили указать место, где задается ширина таблицы
Темно-синим - ссылки на ваши картинки-заголовки
Фиолетовым - цвет и толщина рамок вокруг аватаров. Если они вам не нужны, удали зачеркнутую часть кода и ему подобную в остальных строках с аватарами
Розовым - отступы справа и слева средних аватаров от соседок
Для более точной настройки оформления списка ссылок вам понадобятся коды после отмеченных синим комментариев-заголовков в html-верхе.
Первая группа сине-зеленых ссылок - аватары Лучших. Вторая группа - аватары АМС,

Результат

http://savepic.net/3918945m.jpg

Если будут неполадки, вопросы и запоздалые изменения - возвращайтесь

+1


Вы здесь » Единый форум поддержки » Архив » Таблицы на заказ (15)