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

Объявление

GEMcross

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

Посетить

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

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

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

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

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

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

Посмотреть

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

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

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

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

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

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

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

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

Подробнее

SPECIAL OFFER: We distribute designs for free

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

Details

Support the project

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

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

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

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

[Выполнено]Таблица. HTML

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

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

1

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

1) Ссылка на тестовик http://bounty.mybb.ru/

2) Эскиз таблицы

Пример

http://s1.uploads.ru/t/1ahsg.jpg

Эскизы каждого контейнера:

Картинка 1 / Контейнер 1

http://s1.uploads.ru/t/YMknm.jpg

Картинка 2 / Контейнер 2

http://s1.uploads.ru/t/5jhoC.jpg

Картинка 3/ Контейнер 3

http://s1.uploads.ru/t/oAJW5.jpg

Картинка 4 / Контейнер 4

http://s1.uploads.ru/t/4oRFP.jpg

Картинка 5 / Контейнер 5

http://s1.uploads.ru/t/SOlex.jpg

3) Описание

Нам нужно сделать отдельно под каждую картинку свой div, и вставить его в шаблон таблицы. В коде указаны размеры самой таблицы и уже вставлено фоновое изображение.

Код таблицы:

Код таблицы
Код:
<style>    
#menu {
margin-top: -2px;
width: 150px;
height: 20px;
background-repeat : no-repeat;}
#menu span {
border:1px solid # 8f7468
text-align:left;
font: normal 100% Trebuchet Mst;
display:block;
color:# 1c1c1d;
margin: 9px 0;
padding: 10px;
}
#submenu,#menu span {
    border-radius:5px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
background: url(http://s1.uploads.ru/6us5v.png);
}
#menu .tabactive {
color: #8f7468;
    background:0;
}
#submenu {
padding: 0px;
height: 300px;
border:1px solid #8f7468;
text-align: center;
font: normal 100% Trebuchet Ms;
font-size: 14px;
width: 640px;
}
.submenutext {
display: none; 
height: 40px;
}
</style>
<center><table style="width: 640px">
<tbody>
  <tr>
   <td valign=top>
 <div id="menu"> <b>
<span alt="#sm1" style="cursor: pointer;"><font color=#660000><b>Контейнер 1</b></font></font></span>
<span alt="#sm2" style="cursor: pointer;"><font color=#660000><b>Контейнер 2</b></font></span>
<span alt="#sm3" style="cursor: pointer;"><font color=#660000><b>Контейнер 3</b></font></font></span>
<span alt="#sm4" style="cursor: pointer;"><font color=#660000><b>Контейнер 4</b></font></font></span>
<span alt="#sm5" style="cursor: pointer;"><font color=#660000><b>Контейнер 5</b></font></font></span>

    </div>
   </td>
   <td id="MenuTxT"  align="center" valign="top">
    <div id="submenu" align="center"> 
     <div id="sm1" class="submenutext" 
style="display:block;padding:10px;height:280px;overflow-y: auto;">  
<p>
<br><font color=#660000><b>Контейнер 1</b></font>
<br><font color=#660000><b>Картинка 1</b></font>
</div>
     <div id="sm2" class="submenutext"
<br><font color=#660000><b>Контейнер 2</b></font>
<br><font color=#660000><b>Картинка 2</b></font>
</div>
<div id="sm3" class="submenutext">
<br><font color=#660000><b>Контейнер 3</b></font>
<br><font color=#660000><b>Картинка 3</b></font>
</div>
<div id="sm4" class="submenutext"><br/><br/>
<br><font color=#660000><b>Контейнер 4</b></font>
<br><font color=#660000><b>Картинка 4</b></font>
</p></div>
     <div id="sm5" class="submenutext"><br/>
<br><font color=#660000><b>Контейнер 5</b></font>
<br><font color=#660000><b>Картинка 5</b></font>
</div></div> </td></tr></tbody></table> 
<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>

- Размер каждого контейнера 640х300
- Рамку в контейнерах оставить прозрачной
- Контуры внутренних рамок пусть будут не слишком жирные и тоненькие, цвет #660000 или на пару тонов светлее
- Фон внутренних окон везде прозрачный
- Закругленные края-границы внутренних рамок обязательны.

«Надпись 1», «Надпись 2», «Надпись 3», «Надпись 4» - выровнять по правому краю, как и на эскизе, кроме: «Надпись 3» на «Картинка 4 /Контейнер 4», её выровнять по центру.

0

2

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

ПОПРАВКА

вместо:

Max написал(а):

- Контуры внутренних рамок пусть будут не слишком жирные и тоненькие, цвет #660000 или на пару тонов светлее
- Фон внутренних окон везде прозрачный

сделать:

Контуры внутренних рамок: толщина 1px цвет # 8f7468 или # 1c1c1d (какой больше подойдет)

0

3

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

Востребовано?

0

4

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

Рунный, да, все ждем и надеемся

0

5

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

Немного видоизменяю заказ. Что бы уже не запутывать никого окончательно, составил его заново.

1)

Пример

http://s1.uploads.ru/t/1ahsg.jpg

2) Ссылка на тестовик http://bounty.mybb.ru/
3) Описание

что бы границы внутренних контентов каждого блока уже были видны, вне зависимости от того, заполнены они или нет, как на примере № 2

пример 2

http://s2.uploads.ru/t/WDiMS.jpg

Эскизы каждого контейнера:

Картинка 1 / Контейнер 1

http://s3.uploads.ru/t/DX84j.jpg

Картинка 2 / Контейнер 2

http://s3.uploads.ru/t/9kgQv.jpg

Картинка 3 / Контейнер 3

http://s2.uploads.ru/t/ndhb4.jpg

Картинка 4 / Контейнер 4

http://s2.uploads.ru/t/Z8ewi.jpg

Картинка 5 / Контейнер 5

http://s3.uploads.ru/t/2P5yG.jpg

фон таблицы

http://s2.uploads.ru/t/RBLrq.jpg

- Размер каждого контейнера 640х300
- Границы внутренних рамок: толщина 1px цвет # 8f7468 или # 1c1c1d (какой лучше подойдет)
- Углы границ овальные
- Желательно придерживаться размеров границ внутренних блоков так, как они обозначены на эскизах (не делать их все одинаковые, а сделать какие-то больше, какие-то меньше, исходя их того, как они отображены на рисунках), если это возможно
- Фон внутренних окон везде прозрачный
- Если это возможно, сделать закругленные края-границы внутренних рамок.
- В контейнерах 1,2,3 «Надписи» выровнять по возможности по правому краю.
- В контейнере 4 «Надписи» выровнять по возможности по центру.

0

6

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

тема актуальна

0

7

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

Взяла.

0

8

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

Max

Код:
<style>    
#menu {
margin-top: -2px;
width: 150px;
height: 20px;
background-repeat : no-repeat;}
#menu span {
border:1px solid # 8f7468
text-align:left;
font: normal 100% Trebuchet Mst;
display:block;
color:# 1c1c1d;
margin: 9px 0;
padding: 10px;
}
#submenu,#menu span {
    border-radius:5px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
background: url(http://s1.uploads.ru/6us5v.png);
}
#menu .tabactive {
color: #8f7468;
    background:0;
}
#submenu {
padding: 0px;
height: 300px;
border:1px solid #8f7468;
text-align: center;
font: normal 100% Trebuchet Ms;
font-size: 14px;
width: 640px;
}
.submenutext {
display: none; 
height: 40px;
}
</style>
<center><table style="width: 640px">
<tbody>
  <tr>
   <td valign=top>
 <div id="menu"> <b>
<span alt="#sm1" style="cursor: pointer;"><font color=#660000><b>Контейнер 1</b></font></font></span>
<span alt="#sm2" style="cursor: pointer;"><font color=#660000><b>Контейнер 2</b></font></span>
<span alt="#sm3" style="cursor: pointer;"><font color=#660000><b>Контейнер 3</b></font></font></span>
<span alt="#sm4" style="cursor: pointer;"><font color=#660000><b>Контейнер 4</b></font></font></span>
<span alt="#sm5" style="cursor: pointer;"><font color=#660000><b>Контейнер 5</b></font></font></span>

    </div>
   </td>
   <td id="MenuTxT"  align="center" valign="top">
    <div id="submenu" align="center"> 
     
<div id="sm1" class="submenutext" 
style="display:block;padding:10px;height:280px;overflow-y: non;">  
<p>
<table>
<tr>
<td rowspan="2"><div style="text-align:right;"><font color=#660000><b>надпись</b></font></div><br/><div style="text-align: center; width: 370px ; height: 220px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 215px; overflow-y: scroll; ">текст</div></div>
</td>
<td><div style="text-align:right;"><font color=#660000><b>надпись</b></font></div><br/><div style="text-align: center; width: 200px ; height: 90px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 88px; overflow-y: scroll; ">текст</div></div></td>
</tr>
<tr>
<td><div style="text-align:right;"><font color=#660000><b>надпись</b></font></div><br/><div style="text-align: center; width: 200px ; height: 90px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 88px; overflow-y: scroll; ">текст</div></div>
</td>
</tr>
</table>

</div>
     

<div id="sm2" class="submenutext">
<table>
<tr>
<td>
<div style="text-align:right;"><font color=#660000><b>надпись</b></font></div><br/><div style="text-align: center; width: 300px ; height: 220px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 215px; overflow-y: scroll; ">текст</div></div>
</td>
<td>
<div style="text-align:right;"><font color=#660000><b>надпись</b></font></div><br/><div style="text-align: center; width: 300px ; height: 220px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 215px; overflow-y: scroll; ">текст</div></div>
</td>
</tr>
</table>

</div>

<div id="sm3" class="submenutext"><center>
<div style="text-align:right; padding-right: 15px;"><font color=#660000><b>надпись  
</b></font></div><br/><div style="text-align: center; width: 600px ; height: 220px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 215px; overflow-y: scroll; ">текст</div></div>

</center></div>

<div id="sm4" class="submenutext"><center>
<table>
<tr>
<td><center>
<font color=#660000><b>надпись</b></font></center><br/><div style="text-align: center; width: 290px ; height: 70px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 68px; overflow-y: scroll; ">текст</div></div>
</td>
<td><center>
<font color=#660000><b>надпись</b></font></center><br/><div style="text-align: center; width: 290px ; height: 70px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 67px; overflow-y: scroll; ">текст</div></div>
</td>
</tr>
<tr>
<td colspan="2"><center>
<font color=#660000><b>надпись</b></font></center><br/><div style="text-align: center; width: 590px ; height: 120px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 115px; overflow-y: scroll; ">текст</div></div>
</td>
</tr>
</table>

</p></center></div>
    
 <div id="sm5" class="submenutext"><center>
<table>
<tr>
<td><div style="text-align: center; width: 120px ; height: 185px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><img src="картинка" /></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 185px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><img src="картинка" /></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 185px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><img src="картинка" /></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 185px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><img src="картинка" /></div>
</td>
</tr>
<tr>
<td><div style="text-align: center; width: 120px ; height: 80px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 77px; overflow-y: scroll; ">текст</div></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 80px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 77px; overflow-y: scroll; ">текст</div></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 80px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 100%; height: 78px; overflow-y: scroll; ">текст</div></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 80px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 77px; overflow-y: scroll; ">текст</div></div>
</td>
</tr>
</table>

</center></div>




</div> </td></tr></tbody></table> 
<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

9

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

Бу, Все отлично!! Смотрится прекрасно!! Благодарю.

0

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