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

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

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


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


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

Сообщений 681 страница 700 из 1000

1

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

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

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

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

+3

681

Ангора

Заказ
Ангора написал(а):

Мне пожалуйста такую таблицу
http://s5.uploads.ru/t/nPpKs.png
Ссылка на форум http://dogscats9.mybb.ru/
На форуме сейчас стоит похожая таблица, только надо немного ее подправить.
Что изображено на схеме:
1 - календарик, который и сейчас на том же месте стоит
2 - ссылки на темы для новичков (с прокруткой)
3 - приветствие (просто текст)
4 - картинка
5 - просто текст (с прокруткой)
6 - ссылки на конкурсы (с прокруткой)
7 - бегущая строка
8 - то же самое, что сейчас в таблице написано, Добрый день и т.д., наш форум живет **** дней.
9 - ссылка на баннерообмен
Заранее большое спасибо  http://mybb.ru/f/collection/0211.gif

html-верх

<style type="text/css">
/*общие настройки*/
#obyava, .left-row, .calendar, .navi, .center-row, .text, .history, .art, .right-row, .text-1, .conk, .hallo, .hallo_in {
/*    border: solid 1px #e12;*/
    }
#obyava img, .calendar, .navi, .navi a, .text, .history, .art, .text-1, .conk, .conk a {
    display: block;
    }
.left-row, .center-row, .right-row {
    height: auto;
    position: relative;
    }
.calendar, .navi, .text, .history, .art, .text-1, .conk, .hallo, .hallo_in  {
    width: auto;
    text-align: center;
    overflow-y: auto;
    }
.art img, .hallo {
    display: inline-block !important;
    }

/*внешний блок*/
#obyava {
    width: 100%;
    height: 490px;
    margin: auto;
/*    background-color: #4F5259;*/
    opacity: 0.78;
    }
/*центровка картинок-заголовков*/
#obyava img {
    margin: auto;
    }

/*левая колонка*/
.left-row {
    width: 20%;
    }
/*блок календаря*/
.calendar {
    height: 130px;
    padding-top: 10px;
    }
/*блок навигации*/
.navi {
    height: 255px;
    }
/*настройка ссылок*/
.navi a, .conk a {
    color: #1A1B1D !important; /*цвет текста ссылок*/
    background-color: #DDE5C0; /*фон ссылок*/
    border: dashed 0.5px #C87800; /*бордюры вокруг ссылок*/
    border-bottom: dashed 0.5px #C87800 !important;
    border-radius: 10px;
/*    line-height: 150%; междустрочный интервал для ссылок*/
    width: 80%;
    padding: 1px;
    margin: 3px;
    }
/*настройка ссылок в активе*/
.navi a:hover, .conk a:hover {
    color: #1A1B1D !important; /*цвет текста ссылок*/
    background-color: #BDCB9A; /*фон ссылок*/
    border: dashed 0.5px #C87800; /*бордюры вокруг ссылок*/
    border-bottom-style: dashed !important;
    text-decoration: none;
    }

/*центральная колонка колонка*/
.center-row {
    width: 60%;
    margin: -390px auto;
    }
/*блок приветствия*/
.text {
    height: 18px;
    padding: 5px 50px;
        }
/*блок возраста форума*/
.history {
    height: 40px;
    padding: 0 5px;
    }
/*блок картинки*/
.art {
    height: 319px;
    padding: 5px 0 0 0;
    }

/*правая колонка*/
.right-row {
    width: 20%;
    float: right;
    }
/*блок текста и конкурсов справа вверху*/
.text-1 {
    height: 174px;
    padding: 5px;
    }
/*блок текста и конкурсов справа вверху*/
.conk {
    height: 196px;
    padding-top: 10px;
    }

.hallo {
    position: relative;
    height: 82px;
    padding: 0 15px 5px;
    overflow-y: hidden;
    }
.hallo_in {
    height: 62px;
    padding: 5px 0px;
    }
</style>

Объявление

<div id="obyava">
   <div class="left-row">
      <div class="calendar">
<iframe name="Calendar" src="http://avatarochka.ru/Calendar2/Calend.html" height="120" width="120" scrolling="no" frameborder="0"></iframe>
      </div>
      <div class="navi">
         <center>
<a href="http://dogscats9.mybb.ru/viewtopic.php?id=15">Задаем вопросы</a>
<a href="http://dogscats9.mybb.ru/viewtopic.php?id=277">ЕСЛИ ВАМ НА ПОЧТУ НЕ ПРИШЕЛ ПАРОЛЬ ПИШИТЕ В ЭТОЙ ТЕМЕ!</a>
<a href="http://dogscats9.mybb.ru/viewtopic.php?id=410">Заказываем статус</a>
<a href="http://dogscats9.mybb.ru/viewtopic.php?id=86#p18376">Гости говорят</a>
<a href="http://dogscats9.mybb.ru/viewforum.php?id=68">Галерея аватарок</a>
<a href="http://dogscats9.mybb.ru/viewtopic.php?id=14">Предложения и замечания</a>
<a href="http://dogscats9.mybb.ru/viewtopic.php?id=5">Знакомимся с участниками форума</a>
<a href="http://dogscats9.mybb.ru/viewtopic.php?id=190">Фото форумчан</a>
<a href="http://dogscats9.mybb.ru/viewtopic.php?id=163">Общий фотоальбом наших животных</a>
<a href="http://dogscats9.mybb.ru/viewtopic.php?id=1177">Весенняя болталка</a>
         </center>
      </div>
   </div>
   <div class="center-row">
      <div class="text">
         <marquee>
Рады вас видеть на форуме ЮФО "Лучшие друзья человека"! Вливайтесь в нашу дружную компанию! Ждем вас!
         </marquee>
      </div>
      <div class="history">
         <b>
<script type="text/javascript">
<!--
var h=(new Date()).getHours();
if (h > 23 || h < 7) document.write("Доброй ночи! Не спится?");
if (h > 6 && h < 12) document.write("С добрым утром и удачного дня!");
if (h > 11 && h < 19) document.write("Добрый день!");
if (h > 18 && h < 24) document. write("Добрый вечер! День подходит к концу, пора на форум - общаться =) ");
-->
</script>
</b> Добро пожаловать к нам!
<br>
<script language="JavaScript">
d0 = new Date(' January 15, 2010 ');
d1 = new Date();
tl = (d1.getTime() - d0.getTime()) / (1000*60*60*24);
document.write('        Наш форум живет                  <b>' + Math.round(tl) + '</b>-й день.');
</script>
      </div>
      <div class="art">
<img src="http://s019.radikal.ru/i621/1309/ee/39f60536d0c8.jpg"/><br/>
      </div>
   </div>
   <div class="right-row">
      <div class="text-1">
Текст справа с прокруткой
      </div>
      <div class="conk">
         <center>
<a href="http://dogscats9.mybb.ru/viewtopic.php?id=1913#p53667">● Новости о КОНКУРСАХ</a>
<a href="http://dogscats9.mybb.ru/viewtopic.php?id=1913#p53667">● Результаты выставки собак "Цветок орхидеи"</a>
<a href="http://dogscats9.mybb.ru/viewtopic.php?id=1927#p53914">● Конкурс "Я водяной, я водяной..." ИТОГИ</a>
<a href="http://dogscats9.mybb.ru/viewtopic.php?id=1939#p54374">● Календарь "Собака сентября 2013" ГОЛОСОВАНИЕ</a>
<a href="http://dogscats9.mybb.ru/viewtopic.php?id=1916#p53683">● Календарь "Кошка августа 2013" ИТОГИ</a>
<a href="http://dogscats9.mybb.ru/viewtopic.php?id=1929#p53916">● Конкурс авторских фото "Мое незабываемое лето" ИТОГИ</a>
         </center>
      </div>
   </div>
   <div class="hallo">
<a href="http://dogscats9.mybb.ru/viewtopic.php?id=30">Баннерообмен</a><br>
      <div class="hallo_in">
Здравствуйте! Вы находитесь на форуме любителей собак и кошек всех пород "Лучшие друзья человека"! Некоторые разделы скрыты от гостей, например такие как - Конкурсы, Дневники, ФотоМания, Болталка. Вы сможете полностью увидеть форум только после регистрации. Здесь вы найдете все о содержании, здоровье, дрессировке, выставках собак и кошек. У нас много информации о породах и спорте. Оставайтесь у нас и вы попадете в атмосферу уюта и хорошего общения! А также не забудьте зайти в нашу группу ВКонтакте <a href="http://vkontakte.ru/id135541369#/dogscats9">Группа нашего форума</a>
      </div>
   </div>
</div>

Комментарии

В принципе, тут вам, даже особо нечего будет делать, потому что я постарался перенести из старой таблицы все, что можно, поэтому заполнение вам не требуется, разве что корректировка.
Зеленым - ссылка на вашу картинку посреди таблицы.

Результат

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

Будут вопросы - приходите, потребуется переделка - возвращайтесь, все сделаем. :-)

+2

682

Remus John Lupin, Deff:flag:

Офф

У вас отлично получается с:

0

683

Доброго времени суток. Мучалась-мучалась с таблицей, пыталась сама переделать старую под нужную мне. В итоге это не увенчалось окончательным успехом х))) поэтому прошу помощи. Немного нестандартно, но все же.
Тестовик: http://diatest.rusff.ru
То, как выглядит таблица в первой вкладке (с левой стороны ссылки, а справа текст таблицы) мне нужно, чтобы так было во всех четырех вкладках. Главное, чтобы ссылки остались слева во всех четверых вкладках и не пропадали. Но при этом мне еще надо, чтобы окно справа было меньше и не налазило на закрученные края пергамента. Нестандартность помощи в том, что я бы хотела, чтобы мне объяснили где можно этот размер правого окна уменьшить) ей-богу - со многим справилась сама, но это так и не нашла XD
Код таблицы:

Заранее благодарю)

Отредактировано Штольц (Вт, 8 Окт 2013 21:32:36)

0

684

Штольц, доброго времени. Зачем вы всегда усложняете себе жизнь  :O )

Подсказка

В конце второго окна стиля находим, без спешки, 4 блока:

#menu {
  position: relative;
  z-index: 1001;
  top: -8px;
  margin-left: 390px;
  padding: 0px;
  }

#menu span {
  width: 104px;
  height: 35px;
  display: block;
  margin: 0px;
  padding: 0px;
  }

#submenu {
  padding: 0px;
  height: 200px;
  width: 400px;
  }

.submenutext {
  display: none;
  text-align: center;
  height: 180px;
  color: #291110;
  }

Меняем соответственно на:

#menu {
  position: relative;
  margin-top: 25px;
  margin-left: 124px;
  padding: 0px;
  }

#menu span {
  width: 104px;
  height: 35px;
  display: block;
  margin: 0px;
  padding: 0px;
  }

#submenu {
  padding: 0px;
  margin: 8px auto auto 95px;
  width: 460px;
  height: 255px;
  }

.submenutext {
  width: 460px;
  height: 255px;
  padding: 0px;
  text-align: center;
  overflow-y: auto;
  display: none;
  color: #291110;
  }

Обновляем код таблицы в объявлении:

Код:
<!-- Основная таблица -->
<table style="width: 880px; height: 360px; position: relative; z-index: 1000; top: -35px; margin-bottom: -50px; margin-left: 25px; background: transparent url(http://s4.uploads.ru/loATM.jpg) top center no-repeat; border: none;" cellspacing="0" cellpadding="0">
<tr>
<td style="width: 240px;">
<!-- Блок ссылок -->
<div class="lk-step" style="width: 185px; height: 102px; border: none; margin-left: 54px; margin-top: 60px;">
<a href="http://kuda-to.ru/"><img onmouseover="this.src='http://forumstatic.ru/files/0013/4f/78/21863.png'" src="http://forumstatic.ru/files/0013/4f/78/77365.png" onmouseout="this.src='http://forumstatic.ru/files/0013/4f/78/77365.png'"></a>
<a href="http://kuda-to.ru/"><img onmouseover="this.src='http://forumstatic.ru/files/0013/4f/78/21863.png'" src="http://forumstatic.ru/files/0013/4f/78/77365.png" onmouseout="this.src='http://forumstatic.ru/files/0013/4f/78/77365.png'"></a>
<a href="http://kuda-to.ru/"><img onmouseover="this.src='http://forumstatic.ru/files/0013/4f/78/21863.png'" src="http://forumstatic.ru/files/0013/4f/78/77365.png" onmouseout="this.src='http://forumstatic.ru/files/0013/4f/78/77365.png'"></a>
<a href="http://kuda-to.ru/"><img onmouseover="this.src='http://forumstatic.ru/files/0013/4f/78/21863.png'" src="http://forumstatic.ru/files/0013/4f/78/77365.png" onmouseout="this.src='http://forumstatic.ru/files/0013/4f/78/77365.png'"></a>
<a href="http://kuda-to.ru/"><img onmouseover="this.src='http://forumstatic.ru/files/0013/4f/78/21863.png'" src="http://forumstatic.ru/files/0013/4f/78/77365.png" onmouseout="this.src='http://forumstatic.ru/files/0013/4f/78/77365.png'"></a>
<a href="http://kuda-to.ru/"><img onmouseover="this.src='http://forumstatic.ru/files/0013/4f/78/21863.png'" src="http://forumstatic.ru/files/0013/4f/78/77365.png" onmouseout="this.src='http://forumstatic.ru/files/0013/4f/78/77365.png'"></a>
<a href="http://kuda-to.ru/"><img onmouseover="this.src='http://forumstatic.ru/files/0013/4f/78/21863.png'" src="http://forumstatic.ru/files/0013/4f/78/77365.png" onmouseout="this.src='http://forumstatic.ru/files/0013/4f/78/77365.png'"></a>
<a href="http://kuda-to.ru/"><img onmouseover="this.src='http://forumstatic.ru/files/0013/4f/78/21863.png'" src="http://forumstatic.ru/files/0013/4f/78/77365.png" onmouseout="this.src='http://forumstatic.ru/files/0013/4f/78/77365.png'"></a>
</div>
<!-- Конец ссылок -->
</td>
<td style="width: 640px;">
<!-- Таблица с вкладками -->
<table style="width: 640px; height: 360px; border: none;" cellpadding="0" cellspacing="0">
 <tbody>
  <tr>
   <td>
<!-- Контейнер с кнопками -->
<div id="menu">
<table style="width: 416px; height: 35px; border: none;" cellpadding="0" cellspacing="0">
<tr>
<td><span class="bttn_1" alt="#sm1" style="cursor: pointer;"></span></td>
<td><span class="bttn_2" alt="#sm2" style="cursor: pointer;"></span></td>
<td><span class="bttn_3" alt="#sm3" style="cursor: pointer;"></span></td>
<td><span class="bttn_4" alt="#sm4" style="cursor: pointer;"></span></td>
</tr>
</table>
</div>
<!-- Конец контейнера -->
   </td>
  </tr>
  <tr>
   <td id="MenuTxT" align="left" valign="top">
    <div id="submenu" align="center"> 
     <div id="sm1" class="submenutext" style="display:block;">


Текст в правом окне.
<br>- Что подать?

- Пива, - сказал незнакомец явно недружелюбно.

Корчмарь отер руки о полотняный фартук и наполнил глиняный выщербленный кувшин.

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

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

- Я ищу ночлег.

- У меня негде, - буркнул корчмарь, обозрев грязные и пыльные сапоги незнакомца. - В "Старом Наракоте" спросите.

- Мне бы здесь хотелось.

- Негде. - Корчмарь распознал наконец выговор незнакомца и сообразил, что это рив.

- Я деньги заплачу, - сказал чужак тихо, словно бы неуверенно.

И тогда-то случилась эта скверная история. Верзила с изрытой оспинами рожей, с момента появления чужака не спускавший с него глаз, встал и подошел к стойке. Двое его дружков придвинулись следом.

- Нет тут места, негодяй ты этакий, бродяга ривский, - рявкнул верзила, дыша чесноком, пивом и злобой. - Не нужно нам тут, в Стужне, таких, как твоя милость. У нас приличный город!

Незнакомец взял со стойки свой кувшин и отодвинулся. Глянул на корчмаря, но тот избегал его взгляда. Защищать рива корчмарь не собирался. Кто, в конце концов, этих ривов любит?


     </div>
     <div id="sm2" class="submenutext">


Текст второй вкладки


     </div>
     <div id="sm3" class="submenutext">


Текст третьей вкладки


     </div>
     <div id="sm4" class="submenutext">

Текст четвертой вкладки


     </div>
</div>
</td>
</tr>
</tbody>
</table>
<!-- Конец таблицы -->
</td>
</tr>
</table>
<!-- Конец основной таблицы -->
Штольц написал(а):

Нестандартность помощи в том, что я бы хотела, чтобы мне объяснили где можно этот размер правого окна уменьшить)

Решение было совсем близко с: - конец второго окна стиля:

/* Внешний каркас окна с переменным контентом */
#submenu {
  padding: 0px; //внутренние отступы
  margin: 8px auto auto 95px; //внешний отступ от верхней границы, правой, нижней и левой соответственно
  width: 460px; //ширина каркаса
  height: 255px; //высота каркаса
  }

/* Меняющаяся начинка */
.submenutext {
  width: 460px; //ширина
  height: 255px; //высота
  padding: 0px; //внутренные отступы
  text-align: center;
  overflow-y: auto;
  display: none;
  color: #291110;
  }

Выделенное красным и синим - искомое вами.

+2

685

Rion Leonheart
ох, спасибо большое хД видимо, я мазохист.

0

686

Remus John Lupin
огромное спасибо!  http://mybb.ru/f/collection/0211.gif
Да, вопросы появились. Я поставила  таблицу на пробник и появились какие-то проблемы с прокруткой правого столбца. И еще почему-то картинка и календарь, получается вся таблица - бледные (или как это правильно выразиться), если сравнить яркость картинки, которая сейчас на самом форуме стоит http://dogscats9.mybb.ru/   и на пробнике   http://proverkadc.animebb.ru/   Хотя я сейчас посмотрела, что и в "результате" точно такие же оттенки, это трудно исправить?

Отредактировано Ангора (Чт, 10 Окт 2013 21:17:04)

0

687

Ангора, пожалуйста :-)

Ангора написал(а):

И еще почему-то картинка и календарь, получается вся таблица - бледные (или как это правильно выразиться), если сравнить яркость картинки, которая сейчас на самом форуме стоит http://dogscats9.mybb.ru/   и на пробнике   http://proverkadc.animebb.ru/   Хотя я сейчас посмотрела, что и в "результате" точно такие же оттенки, это трудно исправить?

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

/*внешний блок*/
#obyava {
    width: 100%;
    height: 490px;
    margin: auto;
/*    background-color: #4F5259;*/
    opacity: 0.78;
    }

и удалите зачеркнутую строку (или заключите ее, как и строку выше, в точно такие же символы: тогда строка будет восприниматься не кодом, а комментариями, и перестанет влиять на выводимый результат)

А что до прокрутки, то не могли бы вы выразиться более конкретно, потому что у меня на мониторе (1400 пикселей в ширину) ее вообще не возникает, но она появляется при меньших разрешениях (тестировалось) и вроде бы послушно отзывалась.
Возможно, скрин бы помог.

0

688

1. Ссылка на форум:
http://fetrum.0pk.ru/
2. Ширина форума:
800 пикс.
3. Рисунок:
Таблица со вкладками.
http://s5.uploads.ru/JRA3c.png
http://s5.uploads.ru/biFTV.png
http://s4.uploads.ru/MVvkO.png
4. Границы у таблицы:
Границы нужны там, где они отмечены на рисунке.
5. Доп. элементы:
Задний фон у таблицы прозрачный. Фон у окошек такого цвета как на рисунке. Прокрутка нужна там, где отмечены окошки.

И ещё, не подскажете код при помощи которого можно сделать так, чтобы при наведении на картинку/надпись вылезало всплывающее окошко (его вид можно регулировать)?

0

689

Фетрум,

Фетрум написал(а):

И ещё, не подскажете код при помощи которого можно сделать так, чтобы при наведении на картинку/надпись вылезало всплывающее окошко (его вид можно регулировать)?

Если вам нужна непременно регулируемая подсказка (внешний вид окна/текста, размеры окна/текста, жесткое место появления), то тогда можете применить вот такое решение http://htmlbook.ru/blog/vsplyvayushchay … zka-na-css
Если же вам достаточно всплывающей подсказки от операционной системы, то среди прочих атрибутов к ссылке стоит добавить title:

Код:
<a href="http://s5.uploads.ru/JRA3c.png" title="Первая вкладка таблицы"><img src="http://s5.uploads.ru/JRA3c.png" alt=""/></a>

При таком варианте увидите стандарную виндовсовскую всплывающую подсказку.

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

0

690

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

Если вам нужна непременно регулируемая подсказка (внешний вид окна/текста, размеры окна/текста, жесткое место появления), то тогда можете применить вот такое решение

Нужно что-то вроде этого. Попытаюсь разобраться.

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

(зачем в нижней части такое огромное пустое пространство?)

Где?

Remus John Lupin
Честно говоря, мало что поняла из ваших объяснений. Просто у меня всё распрекрасно выглядит.

0

691

Remus John Lupin
с прозрачностью разобралась, спасибо)
Вот скрин http://s019.radikal.ru/i612/1310/fa/aa13e3f74fa9t.jpg

0

692

Фетрум написал(а):

Нужно что-то вроде этого. Попытаюсь разобраться.

Там не с чем разбираться. Смотрите " Пример 2. Стиль подсказки". Часть, которая в <style>...</style>, как всегда помещается в html-верх (вместе с этими тегами). Часть, которая в <body>...</body> ставится туда, где вам нужна подсказка (без этих тегов). В части, помещаемой в "верх", каждый параметр подписан в комментариях (они начертаны серым шрифтом и ограничены вначале и в конце такими знаками /*комментарий к свойству*/). Вам останется только внести свои значения к существующим параметрам по образцу и подобию примера.

Фетрум написал(а):

Где?

Прошу прощения, я сбил вас с толку. Инет тормозит, картинку не догрузил, а кеш постарался сохранить ее в таком виде и при следующих обращениях (при открывании других вкладок с вашим форумом и самой картинки отдельно). Но сам фон большой, и необоснованно создан в .png формате. Он будет легче грузится, если вы пересохраните его в .jpg, а что до размера, то я говорил вот о чем:
http://savepic.net/3870358.jpg
Достаточно узкой полоски, размножаемой по вертикали. Нужно лишь отредактировать вырезанный кусочек в графическом редакторе так, чтобы не было резких переходов, и низ полоски хорошо и плавно стыковался с верхом следующей.
Ваш фон весит 830 килобайт. Мной вырезанный кусочек - в 118 раз меньше. Всего 7 килобайт. Это значительно ускорит загрузку дизайна.

Ангора написал(а):

Я поставила  таблицу на пробник и появились какие-то проблемы с прокруткой правого столбца.

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

0

693

Remus John Lupin
ну так ведь прокрутка должна относиться к правому столбцу и там находиться, как в столбце ниже (с ссылками на конкурсы), а она почему-то с бегущей строкой стоит и ее перемещает.
Вот скрин больше http://s020.radikal.ru/i720/1310/9f/74afe1b31bfft.jpg

0

694

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

Но сам фон большой, и необоснованно создан в .png формате.

Да, грешу этим, нужно исправляться.

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

Достаточно узкой полоски, размножаемой по вертикали. Нужно лишь отредактировать вырезанный кусочек в графическом редакторе так, чтобы не было резких переходов, и низ полоски хорошо и плавно стыковался с верхом следующей.
Ваш фон весит 830 килобайт. Мной вырезанный кусочек - в 118 раз меньше. Всего 7 килобайт. Это значительно ускорит загрузку дизайна.

Да, в ближайшее время исправлю это.

А то вы меня уже испугали х)

Спасибо, буду ждать таблицу.

0

695

Ангора написал(а):

ну так ведь прокрутка должна относиться к правому столбцу и там находиться, как в столбце ниже (с ссылками на конкурсы), а она почему-то с бегущей строкой стоит и ее перемещает.

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

.text {
    height: 18px;
    padding: 5px 50px;
    overflow: hidden !important;
}

выделенное красным
А прокрутка в блоке над ссылками на конкурсы (там, где активисты) появится, если контент переполнит заготовленную под него область. Пока там слишком мало текста, чтобы в прокрутке была необходимость.

+1

696

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

А прокрутка в блоке над ссылками на конкурсы (там, где активисты) появится, если контент переполнит заготовленную под него область. Пока там слишком мало текста, чтобы в прокрутке была необходимость.

да, я понимаю)
Лишняя прокрутка исчезла, теперь все хорошо, большое спасибо за помощь  http://mybb.ru/f/collection/0211.gif

0

697

Ангора, я посмотрел, что в Хроме контуры кнопочек-ссылок не видны. Слишком тонкий бордюр, всего 0.5px. Если хотите, чтобы он был виден, как на скрине из "Результата", пройдитесь поиском по странице в html-верхе и замените всюду, где найдете "0.5px" на "1px". Тогда граница должна отображаться во всех браузерах. :-)
Пожалуйста, рад помочь :-)

0

698

Фетрум,

Таблица

Html-верх:

Код:
<style>
#menu {margin: 0 0 10px 0;}

#menu span {
  display: block;
  padding: 3px 0 5px 0;
  margin: 0px auto;
  width: 130px;
  font: bold normal 15px 'Century Gothic', sans-serif;
  color: #2D2A27;
  background: #C1B29D;
  border: 2px solid #2D2A27;
  border-radius: 15px;
  }

#menu .tabactive {background: #AA9A81;}

#submenu {
  padding: 0px;
  width: 700px;
  height: auto;
  }

.submenutext {
  display: none;
  font: normal 14px 'palatino linotype', serif;
  text-align: center;
  background: transparent;
  height: 280px;
  }

.submenutext h3 {
  margin: 2px 0 8px 0;
  font: bold normal 15px 'Century Gothic', sans-serif; 
  }

.submenutext table td {
  text-align: center;
  vertical-align: top;
  }

.format_st {
  background: #B6AB9B;
  border: 1px solid #2D2A27;
  border-radius: 5px;
  width: 90%;
  margin: auto;
  height: auto;
  padding: 5px;
  }
</style>

Объявление:

Код:
<center><table style="width: 700px; border: none;" cellpadding="0" cellspacing="0">
 <tbody>
  <tr>
   <td>
    <div id="menu">
<table style="width: 100%; border: none;" cellpadding="0" cellspacing="0"><tr>
<td style="width: 33%;"><span alt="#sm1" style="cursor: pointer;">Основное</span></td>
<td style="width: 34%;"><span alt="#sm2" style="cursor: pointer;">Навигация</span></td>
<td style="width: 33%;"><span alt="#sm3" style="cursor: pointer;">Игра</span></td>
</tr></table>
    </div>
   </td>
  </tr>
  <tr>
   <td id="MenuTxT" align="center" valign="top">
    <div id="submenu">
     <div id="sm1" class="submenutext" style="display:block;">

<table style="width: 100%; height: 280px; border: none;" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 45%;">

<h3>Администрация</h3>
<div style="width: 92%; margin: auto; height: 122px;">


Место под аватары и т.д.


</div>

<h3>Текст заголовка</h3>
<div class="format_st"><div style="width: 100%; height: 90px; overflow-y: auto;">


текст 1


</div></div>
</td>
<td style="width: 55%;">

<h3>Новости</h3>
<div class="format_st"><div style="width: 100%; height: 240px; overflow-y: auto;">


текст 2


</div></div>
</td>
</tr></table>

     </div>
     <div id="sm2" class="submenutext">

<table style="width: 100%; height: 280px; border: none;" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 33%;">

<h3>Гостям</h3>


текст 1


</td>
<td style="width: 34%;">

<h3>Мир Фетрума</h3>


текст 2


</td>
<td style="width: 33%;">

<h3>Тех. темы</h3>


текст 3


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

     </div>
     <div id="sm3" class="submenutext">

<table style="width: 100%; height: 280px; border: none;" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 50%;">

<h3>Погода и время</h3>
<div class="format_st">
<div style="width: 100%; height: 240px; overflow-y: auto;">


текст 1


</div>
</div>
</td>
<td style="width: 50%;">

<h3>Происходящее</h3>
<div class="format_st">
<div style="width: 100%; height: 240px; overflow-y: auto;">


текст 2


</div>
</div>

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

     </div>
    </div>
   </td>
  </tr>
 </tbody>
</table></center>

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 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>

0

699

1. http://s5.uploads.ru/t/3uz9Q.png
2. http://catwars.rolevaya.ru/
3. По краям таблиц прокрутка. Граница таблиц пунктиром.
Заранее спасибо ^^

0

700

Севери, здравствуйте.

Показать код

В html-верх:

Код:
<style>
/* Настройки таблицы в объявлении */
#menu {margin: 0px; margin-bottom: 15px;}

#menu span {
  display: block;
  padding: 5px 0 7px 0;
  margin: auto;
  width: 130px;
  font: bold italic 15px 'palatino linotype', serif;
  color: #8F8C50;
  background: #F4F4B0;
  border: 1px dashed #DACA8C;
  border-radius: 10px;
  }

#menu .tabactive {color: #1E0E00;}

#submenu {
  padding: 0px;
  width: 620px;
  }

.submenutext {
  display: none;
  text-align: center;
  width: 100%;
  height: 200px;
  }

.submenutext table td {
  padding: 5px;
  background: #F4F4B0;
  border: 1px dashed #DACA8C;
  text-align: center;
  vertical-align: top;
  }

.scroll-option {
  width: 100%;
  height: 180px;
  overflow-y: auto;
  }
</style>

В объявление:

Код:
<!-- Основная таблица -->
<center><table style="width: 100%; border: none;" cellpadding="0" cellspacing="0">
 <tbody>
  <tr>
   <td>
<!-- Кнопки -->
    <div id="menu">
<center><table style="width: 87%; border: none;" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 29%;"><span alt="#sm1" style="cursor: pointer;">Главная</span></td>
<td style="width: 29%;"><span alt="#sm2" style="cursor: pointer;">Ролевая</span></td>
<td style="width: 29%;"><span alt="#sm3" style="cursor: pointer;">Новости</span></td>
</tr>
</table></center>
    </div>
<!-- Конец кнопок -->
   </td>
  </tr>
  <tr>
   <td id="MenuTxT" align="center" valign="top">
    <div id="submenu">
     <div id="sm1" class="submenutext" style="display:block;">
<!-- Контент первой вкладки -->
<table style="width: 100%; height: 200px; border: none;" cellpadding="0" cellspacing="5">
<tr>
<td style="width: 50%; border-radius: 10px 0 0 10px;">
<div class="scroll-option">

Текст 1 (слева)

</div>
</td>
<td style="width: 50%; border-radius: 0 10px 10px 0;">
<div class="scroll-option">

Текст 2 (справа)

</div>
</td>
</tr>
</table>
<!-- Конец вкладки -->
</div>
     <div id="sm2" class="submenutext">
<!-- Контент второй вкладки -->
<table style="width: 100%; height: 200px; border: none;" cellpadding="0" cellspacing="5">
<tr>
<td style="width: 50%; border-radius: 10px 0 0 10px;">
<div class="scroll-option">

Текст 3 (слева)

</div>
</td>
<td style="width: 50%; border-radius: 0 10px 10px 0;">
<div class="scroll-option">

Текст 4 (справа)

</div>
</td>
</tr>
</table>
<!-- Конец вкладки -->
</div>
     <div id="sm3" class="submenutext">
<!-- Контент третьей вкладки -->
<table style="width: 100%; height: 200px; border: none;" cellpadding="0" cellspacing="5">
<tr>
<td style="width: 50%; border-radius: 10px 0 0 10px;">
<div class="scroll-option">

Текст 5 (слева)

</div>
</td>
<td style="width: 50%; border-radius: 0 10px 10px 0;">
<div class="scroll-option">

Текст 6 (справа)

</div>
</td>
</tr>
</table>
<!-- Конец вкладки -->
</div>
</div>
   </td>
</tr>
 </tbody>
</table></center>
<!-- Конец основной таблицы -->

В 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 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>

+1


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