Техническая поддержка сервиса Quadro.Boards

Объявление

Новости сервиса

О форуме

Quadro.Support – это форум технической поддержки различных проектов и сервисов Quadro.Systems LLC, на котором грамотные технические специалисты всегда смогут помочь вам в решении проблем, или же подсказать ответы на самые сложные вопросы. Так же на форуме собрана обширная база знаний по различным аспектам наших сервисов. Не забывайте пользоваться поиском ;)

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

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


Вы здесь » Техническая поддержка сервиса Quadro.Boards » Оформление форумов » FAQ по самостоятельному составлению HTML-таблицы и Заказ Таблиц


FAQ по самостоятельному составлению HTML-таблицы и Заказ Таблиц

Сообщений 721 страница 740 из 1000

721

kozhilya
Благодарю, таблица отличная!

0

722

e.t

<style>#pun-announcement table { width: 100%; height: 150px;}
#pun-announcement td { text-align: center;}
#pun-announcement .but { cursor: pointer; }
#pun-announcement .float { display: none; position: absolute; width: 200px; height: 150px; overflow-y: auto; border: 1px solid black!important; background: white}
</style>

<table>
<cols><col width="30%" /><col width="40%" /><col width="30%" /></cols>
<tr><td rowspan=4>Elastic Thumpnail Menu<br />
<img src="Картинки"><img src="Картинки"><img src="Картинки">
</td><td rowspan=3>Text</td><td><img src="Адрес картинки" /></td></tr>
<tr><td>Elastic Thumpnail Menu<br />
<img src="Картинки"><img src="Картинки"><img src="Картинки"></td></tr>
<tr><td><span class="but">Button</span>
<div class='float'></div><style id="bannerContent">Баннеры. Да, в style, что бы картинки не прогружались когда не надо.</style></td></td>
<tr><td colspan=2>Text</td></tr></table>

<script>openedBanner = false;
$('#pun-announcement span.but').click(function() { el = $(this).parent(); if (!openedBanner) { $('.float', el).html($('#bannerContent', el).html()); } $('.float', el).toggle('slow'); });</script>

Кажется, тут всё описал и так.
Демо: http://kozhilya.kodingen.com/test/badasses/index.php

+1

723

kozhilya
спасибо большое)

0

724

1. ссылка на форум
http://firstbornsecrets.spybb.ru
2. Эскиз

Свернутый текст

http://s2.uploads.ru/t/WwxEg.png

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

Контейнер 1

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

Контейнер 2

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

Контейнер 3

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

Контейнер 4

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

4. границы у таблицы: есть
5. доп.элементы (прокрутка, картинки и т.д.) указывать текстовыми пометками непосредственно в ячейках таблицы рисунка, разборчивым шрифтом.
Шрифт :
The King & Queen font или Vtks Revolt
Полупрозрачный фон:  красный цвет

Отредактировано Lady Sansa Stark (27.10.2012 17:49:23)

0

725

1. ссылка на форум- http://catswarriors1newversion.rolka.su/
2. ширина форума -Под картинку.
3. добротный рисунок с границами хотя бы в Paint'е, по которому можно определить чёткое количество столбцов и количество строк (решётку):-[table]
http://217.20.154.109/download.do?id=47 … rageId=508
4. границы у таблицы: ЕСТЬ[table]

Отредактировано alina200074 (30.10.2012 22:17:22)

0

726

1. ссылка на форум http://shadesmacabre.rolka.su/
2. ширина форума 870
3.  эскиз: http://s1.uploads.ru/pa6HR.png

4. границы у таблицы: нет
5.
самое главное: 2 слайда переход на которые осуществляется стрелками http://s1.uploads.ru/O4txS.pnghttp://s1.uploads.ru/AvGzx.png
прокрутка в указанном месте
рамочки, которыми я чисто символически указал местонахождение каждой нужной вещички- не делать.
при наведении на аватар администратора должно вылазить небольшое окошко с текстом
+ я дилетант. можно в скрипте написать словами "ссылка на аватар" и т.д.? если не сложно конечно

Отредактировано faust11 (24.10.2012 23:52:37)

0

727

1)

Пример

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

2) Ссылка на тестовик http://bounty.mybb.ru/ на тестовике дизайн изменен, но таблица актуальна именно в тойцветовой гамме, которая указана ниже

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>

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

Картинка 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/5jhoC.jpg

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

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

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

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

- Размер каждого контейнера 640х300
- Рамку в контейнерах оставить прозрачной
- Контуры внутренних рамок: толщина 1px цвет # 8f7468 или # 1c1c1d (какой лучше подойдет)
- Фон внутренних окон везде прозрачный
- Закругленные края-границы внутренних рамок обязательны.

1) в контейнерах 1,2,3,5 «Надпись 1», «Надпись 2», «Надпись 3», «Надпись 4» - выровнять по правому краю, как и на эскизе.

2) в контейнере 4 «Надпись 3» выровнять по центру.

Отредактировано Kisasian (25.10.2012 08:47:45)

0

728

Спасибо, таблица не нужна.

Отредактировано Wendy Owen (27.10.2012 19:28:18)

0

729

1. http://paranormalphenomenon.rolka.su/
2. http://s3.uploads.ru/t/Q9sDq.jpg
http://s3.uploads.ru/t/B9PYb.jpg - Контейнер "Админы"
http://s3.uploads.ru/t/hb4wm.jpg - Контейнер "Главное"
http://s2.uploads.ru/t/DET6i.jpg - Контейнер "Ссылки"
http://s3.uploads.ru/t/2h9HM.jpg - Контейнер "Новости"
http://s2.uploads.ru/t/uYQbd.jpg - Контейнер "Лица" [Ссылка "прячется" за словом|именем админа]
3. Календарь -

Код:
<iframe name="fantasy2" src="http://fantasyflash.ru/vr3/up.php?n=25&fontable=ffffff" height="170" width="119" scrolling="no" frameborder="0"></iframe>

Часы -

Код:
<script src="http://www.clocklink.com/embed.js"></script><script type="text/javascript" language="JavaScript">obj=new Object;obj.clockfile="5005-red.swf";obj.TimeZone="R2T";obj.width=180;obj.height=60;obj.wmode="transparent";showClock(obj);</script>

Шрифт Century Gothic.
4. Картинки вставлю сама, только если можно ,обозначьте какая из какого контейнера xD
В контейнере "Лица"  ссылка прячется так..
В контейнере "ссылки", в поле с текстом заголовок и текст. Типа:
Заголовок 1
текст текст текст.

0

730

Сделайте, пожалуйста табличку в 3 слайда.
С таким фоном таблицы - http://funkyimg.com/u2/2452/207/421665navi.jpg
И такой структурой - http://funkyimg.com/u2/2452/203/655061_ … ______.png
И чтоб весь текст помещался в самом маленьком прямоугольнике фона
Вот пробник - http://fiesta443.rusff.ru/
Заранее благодарна

Отредактировано Десерт (28.10.2012 13:17:28)

0

731

Lady Sansa Stark

<style>
#pun-announcement {
    font-family: 'The King & Queen font', 'Vtks Revolt';
    text-align: center;
}
#pun-announcement table {
    width: 80%;
    margin: auto;
}
#annMain #buttons li span {
    padding: 5px 10px;
    border: 1px solid black;
    border-radius: 5px;
    display: inline-block;
    margin: 5px;
    cursor: pointer;
}
#content {
    background: rgba(255,0,0,0.5);
    height: 200px;
    width: 600px;
}
#content table, #content > div, #content .scroll {
    width: 100%;
    height: 100%;
}
#content td {
    padding: 15px;
}
.scroll {
    overflow-y: auto;
    border: 1px solid black;
    border-radius: 10px;
}
</style>
<table>
<tr id="annMain">
<td id="buttons"><ul>
<li><span>Контейнер 1</span>
<div style="display: none;">
<table><tr>
<td rowspan="2"><h6>Надпись 1.1</h6><div class="scroll">Контент 1.1</div></td>
<td><h6>Надпись 1.2</h6><div class="scroll">Контент 1.2</div></td></tr>
<tr><td><h6>Надпись 1.3</h6><div class="scroll">Контент 1.3</div></td>
</tr></table>
</div></li>
<li><span>Контейнер 2</span>
<div style="display: none;">
<table><tr><td><h6>Надпись 2.1</h6><div class="scroll">Контент 2.1</div></td>
<td><h6>Надпись 2.1</h6><div class="scroll">Контент 2.2</div></td>
</tr></table>
</div></li>
<li><span>Контейнер 3</span>
<div style="display: none;">
<table><tr><td><h6>Надпись 3.1</h6><div class="scroll">Контент 3.1</div></td>
<td><h6>Надпись 3.2</h6><div class="scroll">Контент 3.2</div></td></tr>
<tr><td colspan="2"><h6>Надпись 3.3</h6><div class="scroll">Контент 3.3</div></td>
</tr></table>
</div></li>
<li><span>Контейнер 4</span>
<div style="display: none;">
<table><tr>
<td><img src="Картинка 4.1" /></td>
<td><img src="Картинка 4.2" /></td>
<td><img src="Картинка 4.3" /></td>
<td><img src="Картинка 4.4" /></td>
</tr>
<tr>
<td><div class="scroll">Контент 4.1</div></td>
<td><div class="scroll">Контент 4.2</div></td>
<td><div class="scroll">Контент 4.3</div></td>
<td><div class="scroll">Контент 4.4</div></td>
</tr></table>
</div></li>
</ul></td>
<td id="content"><div></div></td></tr>
<tr id="run"><td colspan="2"><marquee>111111</marquee></td></tr>
</table>

<script>
$('#pun-announcement #buttons li span').click(function() {
    el = $(this).parent().children().eq(1);
    $('#pun-announcement tr#annMain > td#content > div').fadeOut('slow', function() {
        $(this).html(el.html())
    }).fadeIn('slow');
}).eq(0).trigger('click');
</script>

Будут вопросы - пишите.

0

732

alina200074
Ссылка не работает. Перезалейте.

Десерт
Оформите заявку по шаблону.

0

733

Ой, сорри..

1. ссылка на форум - fiesta443.rusff.ru

2. ширина форума (ссылка на форум ничего может не показать, если дизайн в разработке). - 1000px

3. добротный рисунок с границами хотя бы в Paint'е, по которому можно определить чёткое количество столбцов и количество строк (решётку): - http://funkyimg.com/u2/2452/203/655061_ … ______.png

4. границы у таблицы: есть/нет (нужное подчеркнуть) - нет

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

0

734

faust11

<style>
#pun-announcement > .container { width: 820px; overflow: hidden; }
.content { white-space: nowrap; position: relative; left: 0; }
.content > div {
    display: inline-block;
    height: 150px;
    vertical-align: middle;
}
.content > div.text { width: 750px; }
.content > div.move { width: 70px; }
.content > div.move img { margin-top: 49px }
.content > div.text img.ava {
    height: 150px; width: 150px;
}
.content table { width: 100% }
.content table td { width: auto }

</style>

<div class="content">
<div class="text">
<div style="float: left"><img class="ava" src="Ссылка на Аватар 1" />
<img class="ava" src="Ссылка на Аватар 2" /></div>
<div style="margin: auto 100px auto 400px; overflow-y: auto; max-height: 150px;">
Текст текст<br />текст<br />текст<br />текст<br />текст<br />текст<br />текст<br />текст<br />текст<br />текст<br />текст<br />текст<br />текст<br />текст<br />текст<br />
</div>
</div>

<div class="move"><img src="http://s1.uploads.ru/AvGzx.png" alt="1" /></div>
<div class="move"><img src="http://s1.uploads.ru/O4txS.png" alt="0" /></div>

<div class="text">
<ul style="float: left"><li><a href="Ссылка">Тескт Ссылки</a></li>
<li><a href="Ссылка">Тескт Ссылки</a></li>
<li><a href="Ссылка">Тескт Ссылки</a></li>
<li><a href="Ссылка">Тескт Ссылки</a></li>
<li><a href="Ссылка">Тескт Ссылки</a></li>
<li><a href="Ссылка">Тескт Ссылки</a></li>
<li><a href="Ссылка">Тескт Ссылки</a></li>
</ul>
<div style="margin: 0 200px 0 100px;"><marquee>Бегущая строка</marquee></div>
<div style="float: right">Текст текст текст текст текст</div>
</div>
</div>
<script>
$('#pun-announcement .content .move img').click(function() {
    $('#pun-announcement .content').animate({'left': (-parseInt(this.alt)*840).toString()+'px'}, 'slow') 
})
</script>

Пишите в ЛС. Ибо я сам не понял, что накарябал...

+1

735

kozhilya
Не битая,исправила.

0

736

alina200074
Не, всё-таки она битая.

0

737

kozhilya
alina200074
Работает, жэ о.о

0

738

Kisasian
Если честно, я не очень понимаю, что вы хотите.
Вам в блоки нужны картинки или те блоки содержимого, что под спойлером??!

0

739

Wendy Owen
Блоки с Часами и Календарём вставьте в выделенные цветом места (они сильно тормозили демку)

<style>
#pun-announcement {
    font-family: 'Century Gothic';
    text-align: center;
}
#pun-announcement table.annContents {
    width: 100%;
    margin: auto;
}
#annMain #buttons li span {
    padding: 5px 10px;
    border: 1px solid black;
    border-radius: 5px;
    display: inline-block;
    margin: 5px;
    cursor: pointer;
    width: 100px;
}
#content {
    background: rgba(255,0,0,0.5);
    height: 300px;
    width: 750px;
}
#content table, #content > div, #content .scroll {
    width: 100%;
    height: 100%;
}
#content td {
    padding: 5px;
}
.scroll {
    overflow-y: auto;
    border: 1px solid black;
    height: 100%
}
.pic100 {
    width: 100px;
    height: 100px;
}
.resize { display: table-cell; vertical-align: middle; height: 170px; }
.resize img {
    transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
}
a.resize img:hover {
    width: 150px;
    height: 150px;
}
</style>
<table class="annContents">
<tr id="annMain">
<td id="buttons"><ul>
<li><span>Главное</span>
<div style="display: none;">
<table><tr>
<td rowspan="2"><div class="scroll">
Контент блока объявлений
</div></td>
<td>Часы</td></tr><tr><td>Календарь</td></tr></table>
</div></li>

<li><span>Новости</span>
<div style="display: none;">
<table><tr><td><h6>Заголовок новостей 1</h6><div class="scroll">Контент 1</div></td>
<td><h6>Заголовок новостей 2</h6><div class="scroll">Контент 2</div></td>
<td><h6>Заголовок новостей 3</h6><div class="scroll">Контент 3</div></td>
<td><h6>Заголовок новостей 4</h6><div class="scroll">Контент 4</div></td>
<td><h6>Заголовок новостей 5</h6><div class="scroll">Контент 5</div></td>
</tr></table>
</div></li>

<li><span>Лица</span>
<div style="display: none;">
<table><tr>
<td><a href="Ссылка"><img src="Ссылка на картинку" class="pic100" /></a></td>
<td><a href="Ссылка"><img src="Ссылка на картинку" class="pic100" /></a></td>
<td><a href="Ссылка"><img src="Ссылка на картинку" class="pic100" /></a></td>
<td><a href="Ссылка"><img src="Ссылка на картинку" class="pic100" /></a></td>
<td><a href="Ссылка"><img src="Ссылка на картинку" class="pic100" /></a></td>
</tr><tr>
<td><a href="Ссылка"><img src="Ссылка на картинку" class="pic100" /></a></td>
<td><a href="Ссылка"><img src="Ссылка на картинку" class="pic100" /></a></td>
<td><a href="Ссылка"><img src="Ссылка на картинку" class="pic100" /></a></td>
<td><a href="Ссылка"><img src="Ссылка на картинку" class="pic100" /></a></td>
<td><a href="Ссылка"><img src="Ссылка на картинку" class="pic100" /></a></td>
</tr></table>
</div></li>

<li><span>Ссылки</span>
<div style="display: none;">
<table><tr>
<td><a href="Ссылка"><img src="Ссылка на картинку" class="pic100" /></a></td>
<td><a href="Ссылка"><img src="Ссылка на картинку" class="pic100" /></a></td>
<td><a href="Ссылка"><img src="Ссылка на картинку" class="pic100" /></a></td>
<td><a href="Ссылка"><img src="Ссылка на картинку" class="pic100" /></a></td>
<td><a href="Ссылка"><img src="Ссылка на картинку" class="pic100" /></a></td>
<td><a href="Ссылка"><img src="Ссылка на картинку" class="pic100" /></a></td>
</tr><tr>
<td colspan="6" style="height: 170px;"><div class="scroll">
Текст.
</div></td>
</tr></table>
</div></li>

<li><span>Админы</span>
<div style="display: none;">
<table><tr><td style="vertical-align: middle; text-align: center;"><div style="display: inline-block">
<a href="Ссылка" class="resize"><img src="Ссылка на картинку" class="pic100" /></a>
<a href="Ссылка" class="resize"><img src="Ссылка на картинку" class="pic100" /></a>
<a href="Ссылка" class="resize"><img src="Ссылка на картинку" class="pic100" /></a>
<a href="Ссылка" class="resize"><img src="Ссылка на картинку" class="pic100" /></a>
<a href="Ссылка" class="resize"><img src="Ссылка на картинку" class="pic100" /></a>
<a href="Ссылка" class="resize"><img src="Ссылка на картинку" class="pic100" /></a>
</div></td></tr></table>
</div></li>
</ul></td>
<td id="content"><div></div></td></tr>
</table>

<script>
$('#pun-announcement #buttons li span').click(function() {
    annElem = $(this).parent().children().eq(1);
    $('#pun-announcement tr#annMain > td#content > div').fadeOut('slow', function() {
        $(this).html(annElem.html())
    }).fadeIn('slow').show();
}).eq(0).trigger('click');
</script>

+1

740

по хорошему, мне нужен полностью скрипт таблицы, с блоками под кнопками )) Больше, конечно, интересуют сами блоки

Отредактировано Kisasian (30.10.2012 08:50:57)

0


Вы здесь » Техническая поддержка сервиса Quadro.Boards » Оформление форумов » FAQ по самостоятельному составлению HTML-таблицы и Заказ Таблиц


Рейтинг форумов | Создать форум бесплатно © 2007–2016 «QuadroSystems» LLC