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

Поделиться41Вт, 8 Ноя 2011 10:42:25

Автор: Шана
Стремящийся
Зарегистрирован: Пн, 7 Ноя 2011
Сообщений: 2
Уважение: 0
Позитив: 0
Последний визит:
Чт, 10 Ноя 2011 12:11:59

Кофеман, спасибо, очень помогли)

0

Поделиться42Вт, 8 Ноя 2011 11:44:45

Автор: Вэли
Стремящийся
Зарегистрирован: Вс, 6 Ноя 2011
Сообщений: 3
Уважение: 0
Позитив: 0
Последний визит:
Ср, 14 Дек 2011 20:11:15

получилось коряво но хотябы как то

0

Поделиться43Вт, 8 Ноя 2011 22:20:29

Автор: Кофеман
Заслуженный
Зарегистрирован: Ср, 2 Фев 2011
Сообщений: 1575
Уважение: +257
Позитив: +167
Пол: Мужской
Последний визит:
Пт, 1 Мар 2013 14:56:10

Вэли, Ваша таблица

В окно ХТМЛ-верх

<style>
#menu span {
padding: 7px 20px 7px;
margin-right: 5px;
margin: 10px 10px;
width: 160px;
text-decoration: none;
}

#submenu {
padding: 5px;
height: 388px;
text-align: left;
font-size: 12px;
width: 865px;
}

.submenutext {
text-align: center;
position:absolute;
width:100%;
max-width: 865px;
display: none;
height: 388px!important;
}
</style>

В окно Объявления

<center><table width="867" height="510" cellspacing="0" cellpadding="0" border="1">
<tbody><tr>
<td align="center" style="height: 110px;">

<div id="menu">
<span alt=#sm1 "style="cursor: pointer;"><img src="адрес картинки" border="0" alt="кнопа 1" height="35" width="160" /></span>
<span alt=#sm2 "style="cursor: pointer;"><img src="адрес картинки" border="0" alt="кнопа 2" height="35" width="160" /></span>
<span alt=#sm3 "style="cursor: pointer;"><img src="адрес картинки" border="0" alt="кнопа 3" height="35" width="160" /></span>
<span alt=#sm4 "style="cursor: pointer;"><img src="адрес картинки" border="0" alt="кнопа 4" height="35" width="160" /></span>
<span alt=#sm5 "style="cursor: pointer;"><img src="адрес картинки" border="0" alt="кнопа 5" height="35" width="160" /></span>
</div>

</td>
</tr>
<tr>
<td align="center" style="height: 400px;" id="MenuTxT">

<div id="submenu" width="100%">
<div id="sm1" class="submenutext" style="display:block;">

Контент 1-й кнопки

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

Контент 2-й кнопки

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

Контент 3-й кнопки

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

Контент 4-й кнопки

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

Контент 5-й кнопки

</div>

</div>

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


<script type="text/javascript">
$(document).ready(function() {
$("td.#MenuTxT div.submenutext").hide();

$("td.#MenuTxT div.submenutext:first").show();
$("div.#menu span").click(function() {
$("div.#menu span").removeClass("tabactive");
$(this).addClass("tabactive");
$("td.#MenuTxT div.submenutext").css({"z-index":"-1;"})
var activeDiv = $(this).attr("alt");
$("div."+activeDiv).css({"z-index":"1"})
$("td.#MenuTxT div.submenutext").hide(1200);
$("div."+activeDiv).show(2200);
return false; });
});
</script>

Кнопки лучше сделать картинками. Размеры картинок 160 на 35. Далее находите в коде объявления строки

<img src="адрес картинки" border="0" alt="кнопа 1" height="35" width="160" />

и где выделено вставляете адреса картинок.

+1

Поделиться44Ср, 9 Ноя 2011 07:09:15

Автор: Вэли
Стремящийся
Зарегистрирован: Вс, 6 Ноя 2011
Сообщений: 3
Уважение: 0
Позитив: 0
Последний визит:
Ср, 14 Дек 2011 20:11:15

Кофеман
большое спасибо!

0

Поделиться45Ср, 9 Ноя 2011 18:00:00

Автор: Mystical
Заслуженный
Зарегистрирован: Чт, 20 Янв 2011
Сообщений: 25
Уважение: 0
Позитив: +2
Последний визит:
Ср, 16 Ноя 2011 16:35:47

Собственно заказ
Кофеман, я подумал что если примерно нанести свою задумку в фотошопе схематично на сайт, то вам будет легче иметь более полное представление обо всём..

Вот "готовый" вариант:

Т.е. между приветственным сообщением и категорией "Важная информация и объявления" появляется вот эта менюшка, которую я набросал выше. Все размеры рамок, полей и т.п. можно оставить как на картинке-примере (разве что выровнить лучше). На заднем плане картинка (с тонкой чёрной обводкой). Вверху таблицы рамка для бегущей строки, выровненная по центру (цвет белый, прозрачность 70-75%, размеры примерно 764х42). Окошечко "Новости" состоит из 2х рамок: Маленького с собственно словом "Новости" (серенькая, не прозрачная, но с обводкой, примерно 248х20), и рамкой под текст с прокруткой (прозрачность 70-75%, обводка, примерно 248х120). Шесть кнопок, по нажатию на которые перекидывает по ссылке. Картинки нарисую сам, нужно лишь разместить их как на рисунке, размеры такие же как на примере (110х40 примерно). Ну и место для картинки (так же со ссылкой желательно).

Собственно сама картинка:

Возможно?
http://endless.topbb.ru/

Отредактировано Mystical (Ср, 9 Ноя 2011 18:01:31)

0

Поделиться46Ср, 9 Ноя 2011 20:42:23

Автор: Кофеман
Заслуженный
Зарегистрирован: Ср, 2 Фев 2011
Сообщений: 1575
Уважение: +257
Позитив: +167
Пол: Мужской
Последний визит:
Пт, 1 Мар 2013 14:56:10

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

0

Поделиться47Чт, 10 Ноя 2011 15:59:42

Автор: *Gold*Member*
Заслуженный
Зарегистрирован: Чт, 3 Ноя 2011
Сообщений: 20
Уважение: 0
Позитив: +1
Последний визит:
Сб, 24 Дек 2011 19:54:22

Форум: http://victoria.rolevaya.net

0

Поделиться48Чт, 10 Ноя 2011 21:26:48

Автор: Кофеман
Заслуженный
Зарегистрирован: Ср, 2 Фев 2011
Сообщений: 1575
Уважение: +257
Позитив: +167
Пол: Мужской
Последний визит:
Пт, 1 Мар 2013 14:56:10

Mystical, в Объявление

<style>
.prozr {
filter: alpha(opacity=70) !important;
opacity: 0.7 !important;
-moz-opacity: 0.7 !important;
-khtml-opacity: 0.7 !important;
}
</style>

<table cellspacing="0" cellpadding="0" align="center" frame="box" style="background: url(http://s017.radikal.ru/i412/1111/e9/0d7c1834e5d6.jpg) no-repeat top; width: 800px; height: 210px; border-bottom: 1px solid Black; border-left: 1px solid Black; border-right: 1px solid Black; border-top: 1px solid Black;">
<tbody><tr>
<td colspan="3" align="center" height="56">
<marquee behavior="scroll" direction="left" width="764px" height="34" loop="0" scrollamount="2" scrolldelay="2" class="prozr" style="background-color: White; border: 1px solid Black; font-size: 24px; padding-top: 6px;" onMouseOver="this.stop()" onMouseOut="this.start()">
*БЕГУЩАЯ СТРОКА*
</marquee>
</td>
</tr>
<tr>
<td align="center" height="154">
<a href="адрес ссылки"><img src="адрес картинки" alt="картинка" width="260" height="144" border="0"></a>
</td>
<td align="center" height="154" width="260">

<table width="248" height="144" border="0" cellspacing="0" cellpadding="0" align="center" rules="rows" style="border: 1px solid Black;">
<tr>
<td align="center" height="22" bgcolor="#808080">
<strong>НОВОСТИ</strong>
</td>
</tr>
<tr>
<td align="center" height="122">
<div align="center" class="prozr" style="background-color: White; height: 99%; width: 99%; padding: 1px; overflow: auto; overflow-x: hidden;">
текст новостей с прокруткой
прокрутка автоматическая
</div>
</td>
</tr>
</table>

</td>
<td align="center" height="154" width="250">

<table align="center" cellspacing="0" cellpadding="0" border="0" width="100%" height="152">
<tr>
<td width="50%" align="center"><a href="адрес ссылки"><img src="адрес картинки" alt="кнопка картинка 1" width="110" height="40" border="0"></a></td>
<td width="50%" align="center"><a href="адрес ссылки"><img src="адрес картинки" alt="кнопка картинка 2" width="110" height="40" border="0"></a></td>
</tr>
<tr>
<td width="50%" align="center"><a href="адрес ссылки"><img src="адрес картинки" alt="кнопка картинка 3" width="110" height="40" border="0"></a></td>
<td width="50%" align="center"><a href="адрес ссылки"><img src="адрес картинки" alt="кнопка картинка 4" width="110" height="40" border="0"></a></td>
</tr>
<tr>
<td width="50%" align="center"><a href="адрес ссылки"><img src="адрес картинки" alt="кнопка картинка 5" width="110" height="40" border="0"></a></td>
<td width="50%" align="center"><a href="адрес ссылки"><img src="адрес картинки" alt="кнопка картинка 6" width="110" height="40" border="0"></a></td>
</tr>
</table>

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

0

Поделиться49Чт, 10 Ноя 2011 22:50:16

Автор: rybych
Стремящийся
Зарегистрирован: Чт, 10 Ноя 2011
Сообщений: 3
Уважение: 0
Позитив: 0
Последний визит:
Вт, 15 Ноя 2011 18:47:37

1)
2) Ссылка на ваш форум
http://tvd.iforum.name/
3) Указать необходимые прокрутки, всплывающие окна, границы таблиц и т.п.
мое пожелание лишь закругленные края и как можно скорее, а то мне уже на трех поддержках отказали потому что не умеют такую таблицу делать О.о а мне очень срочно нужно.

0

Поделиться50Пт, 11 Ноя 2011 22:09:32

Автор: Кофеман
Заслуженный
Зарегистрирован: Ср, 2 Фев 2011
Сообщений: 1575
Уважение: +257
Позитив: +167
Пол: Мужской
Последний визит:
Пт, 1 Мар 2013 14:56:10

*Gold*Member*, Ваша таблица

В окно ХТМЛ-верх

<style>
#menu {
width: 238px;
height: 462px;
}

#menu img {
padding: 0;
margin: 5px 5px 0 5px;
width: 220px;
text-decoration: none;
}
#menu .tabactive {
background:#F9F1DD;
}

#submenu {
padding: 5px;
height: 440px;
text-align: left;
width: 634px;

}

.submenutext {
text-align: center;
position:absolute;
width:100%;
max-width: 630px;
display: none;
height: 441px!important;
}
</style>

В Объявление

<center><table align="center" width="910" cellspacing="0" cellpadding="0" border="0" height="466">
<tbody><tr>
<td width="240" align="center">

<div id="menu">
<img src="адрес картинки кнопки" width="220" height="70" border="0" alt=#sm1 style="cursor: pointer;"><br>
<img src="адрес картинки кнопки" width="220" height="70" border="0" alt=#sm2 style="cursor: pointer;"><br>
<img src="адрес картинки кнопки" width="220" height="70" border="0" alt=#sm3 style="cursor: pointer;"><br>
<img src="адрес картинки кнопки" width="220" height="70" border="0" alt=#sm4 style="cursor: pointer;"><br>
<img src="адрес картинки кнопки" width="220" height="70" border="0" alt=#sm5 style="cursor: pointer;"><br>
<img src="адрес картинки кнопки" width="220" height="70" border="0" alt=#sm6 style="cursor: pointer;">
</div>

</td>
<td align="center" id="MenuTxT" style="width: 670px!important;">

<div id="submenu" align="center">
<div id="sm1" class="submenutext" style="display:block;">

Контент 1-й кнопки

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

Контент 2-й кнопки

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

Контент 3-й кнопки

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

Контент 4-й кнопки

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

Контент 5-й кнопки

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

Контент 6-й кнопки

</div>

</div>

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


<script type="text/javascript">
$(document).ready(function() {
$("td.#MenuTxT div.submenutext").hide();

$("td.#MenuTxT div.submenutext:first").show();
$("div.#menu img").click(function() {
$("div.#menu img").removeClass("tabactive");
$(this).addClass("tabactive");
$("td.#MenuTxT div.submenutext").css({"z-index":"-1;"})
var activeDiv = $(this).attr("alt");
$("div."+activeDiv).css({"z-index":"1"})
$("td.#MenuTxT div.submenutext").hide(1200);
$("div."+activeDiv).show(2200);
return false; });
});
</script>

0

Поделиться51Пт, 11 Ноя 2011 22:59:05

Автор: Кофеман
Заслуженный
Зарегистрирован: Ср, 2 Фев 2011
Сообщений: 1575
Уважение: +257
Позитив: +167
Пол: Мужской
Последний визит:
Пт, 1 Мар 2013 14:56:10

rybych

В ХТМЛ-верх

<style>
#menu span {
display: block;
padding: 7px 5px 7px;
margin-right: 5px;
margin: 7px 0;
width: 205px;
height: 55px;
text-align: left;
text-decoration: none;
font-size: 22px;
}
#menu .tabactive {
color: #8a370a;

}

#submenu {
padding: 5px;
height: 380px;
text-align: center;
font-size: 12px;
width: 500px;
}

.submenutext {
display: none;
height: 378px;
}

#menu span, #submenu {
border-radius:15px;
-webkit-border-radius:15px;
-khtml-border-radius:15px;
-moz-border-radius:15px;
-o-border-radius:15px;
border: 2px solid #8a370a !important;
}
</style>

В Объявление

<center><table align="center" width="770" cellspacing="0" cellpadding="0" border="0" height="410">
<tbody><tr>
<td width="250" align="center">

<div id="menu">
<span alt=#sm1 style="cursor: pointer;">News</span>
<span alt=#sm2 style="cursor: pointer;">Administration</span>
<span alt=#sm3 style="cursor: pointer;">For game</span>
<span alt=#sm4 style="cursor: pointer;">Our mini-top</span>
<span alt=#sm5 style="cursor: pointer;">PR</span>
</div>

</td>
<td align="center" id="MenuTxT" style="width: 520px!important;">

<div id="submenu" align="center">
<div id="sm1" class="submenutext" style="display:block;">

Контент 1-й кнопки News

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

Контент 2-й кнопки Administration

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

Контент 3-й кнопки For game

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

Контент 4-й кнопки Our mini-top

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

Контент 5-й кнопки PR

</div>
</div>

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


<script type="text/javascript">
$(document).ready(function() {
$("td.#MenuTxT div.submenutext").hide();

$("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

Поделиться52Сб, 12 Ноя 2011 12:48:27

Автор: *Gold*Member*
Заслуженный
Зарегистрирован: Чт, 3 Ноя 2011
Сообщений: 20
Уважение: 0
Позитив: +1
Последний визит:
Сб, 24 Дек 2011 19:54:22

Кофеман, спасибо за таблицу! Я забыл написать чтобы контур тоже сделал, как я набросал, т.е. с округленными углами. Можно исправить!?

0

Поделиться53Сб, 12 Ноя 2011 13:18:25

Автор: Кофеман
Заслуженный
Зарегистрирован: Ср, 2 Фев 2011
Сообщений: 1575
Уважение: +257
Позитив: +167
Пол: Мужской
Последний визит:
Пт, 1 Мар 2013 14:56:10

*Gold*Member*, можно

Стиль в ХТМЛ верх замените полностью

<style>
#menu {
width: 238px;
height: 482px;
margin-top: -5px!important;
}

#menu img {
padding: 0;
margin: 5px 5px 0 5px;
width: 220px;
text-decoration: none;
}
#menu .tabactive {
background:#F9F1DD;
}

#submenu {
padding: 5px;
height: 470px;
text-align: left;
width: 634px;

}

.submenutext {
text-align: center;
position:absolute;
width:100%;
max-width: 630px;
display: none;
height: 441px!important;
}

#submenu, #menu img {
border-radius:15px;
-webkit-border-radius:15px;
-khtml-border-radius:15px;
-moz-border-radius:15px;
-o-border-radius:15px;
border: 2px solid #8a370a !important;

}
</style>

Для пояснения: красным - радиус закругления, синим - толщина, ти и цвет границы с закруглением.

В объявлении найдите и исправьте как выделено

<center><table align="center" width="910" cellspacing="0" cellpadding="0" border="0" height="494">
<tbody><tr>
.....................

У картинок Ваших в этом случае должен быть прозрачный фон.

0

Поделиться54Сб, 12 Ноя 2011 16:42:34

Автор: Mystical
Заслуженный
Зарегистрирован: Чт, 20 Янв 2011
Сообщений: 25
Уважение: 0
Позитив: +2
Последний визит:
Ср, 16 Ноя 2011 16:35:47

Кофеман Всё правильно?

0

Поделиться55Сб, 12 Ноя 2011 17:00:55

Автор: Кофеман
Заслуженный
Зарегистрирован: Ср, 2 Фев 2011
Сообщений: 1575
Уважение: +257
Позитив: +167
Пол: Мужской
Последний визит:
Пт, 1 Мар 2013 14:56:10

Mystical
Ставьте как я Вам дал код выше. Проблема может быть только в браузере ИЕ. Посмотрите сами, если не устроит, тогда будем переделывать.
Способ реализации с картинкой такой:
1. Делаете каринку 10 на 10 пикселей
2. Заливаетет ее белым цветом.
3. В палитре слоев ставите прозрачность 70-75 процентов.
4. Сохраняете в png с прозрачностью.

Все, а дальше дело техники вставить ее фоном в нужно место и размножить. Ну это так, на будущее.

0

Поделиться56Сб, 12 Ноя 2011 18:19:21

Автор: *Gold*Member*
Заслуженный
Зарегистрирован: Чт, 3 Ноя 2011
Сообщений: 20
Уважение: 0
Позитив: +1
Последний визит:
Сб, 24 Дек 2011 19:54:22

Кофеман, после исправки кода(добавления округления углов) появилось много пустого места в объявлении
http://victoria.rolevaya.net/

0

Поделиться57Сб, 12 Ноя 2011 18:27:07

Автор: Кофеман
Заслуженный
Зарегистрирован: Ср, 2 Фев 2011
Сообщений: 1575
Уважение: +257
Позитив: +167
Пол: Мужской
Последний визит:
Пт, 1 Мар 2013 14:56:10

*Gold*Member*, в таблице косяков нет, ищите у себя в кодах и окнах.
Например, у Вас два раза повторяется код "Стиль всплывающего меню" - один в Объявлении, второй в ХТМЛ-верх. Это навскидку.
Создавайте отдельную тему, там и будем разбираться, чтоб здесь не засорять заказы.

0

Поделиться58Сб, 12 Ноя 2011 19:02:50

Автор: *Gold*Member*
Заслуженный
Зарегистрирован: Чт, 3 Ноя 2011
Сообщений: 20
Уважение: 0
Позитив: +1
Последний визит:
Сб, 24 Дек 2011 19:54:22

Кофеман, спасибо и извините)

0

Поделиться59Сб, 12 Ноя 2011 19:08:55

Автор: Кофеман
Заслуженный
Зарегистрирован: Ср, 2 Фев 2011
Сообщений: 1575
Уважение: +257
Позитив: +167
Пол: Мужской
Последний визит:
Пт, 1 Мар 2013 14:56:10

*Gold*Member*, в Объвлении

<center><table align="center" width="910" cellspacing="0" cellpadding="0" border="0" height="494">
<tbody><tr>
<td width="25%" align="center">

И сравните с тем, что я Вам давал в Посте №36 этой темы.
У Вас две таблицы - в первой с выпадающими менюшками высота 494, а высота кнопок 50. Полтергейст? :glasses:

0

Поделиться60Сб, 12 Ноя 2011 22:08:10

Автор: Хулиган на каблуках
Стремящийся
Зарегистрирован: Сб, 12 Ноя 2011
Сообщений: 1
Уважение: 0
Позитив: 0
Последний визит:
Вс, 13 Ноя 2011 17:12:52

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

0

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

Меню навигации

Пользовательские ссылки

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