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

Объявление

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

О форуме

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

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

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


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


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

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

681

хочу заказать такую вот таблицу

ссылка на форум
http://streetsofmoscow.rusff.ru/

ширина: 800

границы: нет

рисунок
http://s.qip.ru/200a9LI.jpg

Отредактировано Флейм (05.03.2012 20:03:18)

0

682

хм, в какие сроки таблицы изготавливаются? хотелось бы поскорее..

0

683

Доброго времени суток. Огромная просьба помочь сделать HTML-код для следующей таблицы:

1. ссылка на форум
http://bleach.hutt.ru/

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

3. добротный рисунок с границами хотя бы в Paint'е, по которому можно определить чёткое количество столбцов и количество строк (решётку):

Спойлер

http://uploads.ru/i/8/c/O/8cOJi.jpg

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

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

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

Отредактировано Azaro (07.03.2012 20:34:12)

+1

684

Просьба

1. Форум

2. Дизайн пока готов.

3. http://s2.ipicture.ru/uploads/20120310/W51VV55q.jpg

4. Границы есть у нижней таблицы-контейнера под словами.

5. Верхние слова ("Новости", "Администрация" и т.д.) являются картинками, при нажатии которых в нижней таблице меняется содержимое.
В контейнере "Администрация" маленькие картинки. При наводе курсором на них отображается имя админа или модера.

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

Не надо. Сам разобрался.

Отредактировано Кэру (13.03.2012 19:36:41)

0

685

Кхе-кхе?

0

686

1. Ссылка на форум.

http://tesdesigntest.rolka.su/

2. Ширина форума.

900рх

3. Эскиз таблицы.

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

Ширина форума: 900рх

A1, B1, C1 - здесь должны размещаться картинки-заголовки.

A2, B2, C2, E1 - поля с текстом.

D1 - кнопки. При нажатии на них в блоке E1 должна появляться текстовая информация, уникальная для каждой кнопки. Желательно, чтобы тексты сменяли друг друга и проявлялись плавно (a'la эффект затухания).
Каждая кнопка должна иметь три вариации: статичная, при наведении, при нажатии.

F - контейнер для баннеров и рекламы.

4. Границы.

Нет.

5. Дополнительные элементы.

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

- Эскиз выполнен в масштабе 1:1.

P.S. Ширина таблицы обязательно должна быть фиксирована в размере 900px.

0

687

BlackSparrow

Много букафф. По делу.

<style>
div#pun-announcement div.html-box {
padding: 37px;
width: 846px;
margin: auto;
}
#pun-announcement div { border: 1px black solid; }
#pun-announcement div#ab {
float: left;
border: none;
}
#pun-announcement div#cdef {
margin-left: 410px;
border: none;
}
#pun-announcement div#de {
border: none;
}
#pun-announcement div#A, #pun-announcement div#B, #pun-announcement div#C, #pun-announcement div#D, #pun-announcement div#E, #pun-announcement div#F {
padding: 7px 15px;
margin-bottom: 7px;
text-align: center;
}
#pun-announcement div#C {
margin: 0 20px 7px;
}
#pun-announcement img#A1, #pun-announcement img#B1, #pun-announcement img#C1 {
width: 340px;
height: 40px;
margin: 0 auto 7px;
}
#pun-announcement div#A2 {
height: 200px;
}
#pun-announcement div#B2 {
height: 100px;
}
#pun-announcement div#C2 {
border: none;
height: 100px;
}
#pun-announcement div#E {
float: left;
width: 240px;
padding: 13px;
height: 156px;
}
#pun-announcement div#E1 {
height: 100%;
}
#pun-announcement div#D {
margin-left: 280px;
width: 118px;
}
#pun-announcement div#D div#Dvar {
border: none;
margin-bottom: 2px;
}
#pun-announcement div#D div#Dvar div {
display: none;
}
#pun-announcement div#D div#Dvar > span.anbut {
border: 1px solid black;
display: block;
padding: 2px 0;
width: 120px;
}
#pun-announcement div#D div#Dvar > span.anbut:hover {
background: silver;
}
#pun-announcement div#D div#Dvar > span.anbut.sel {
border-color: silver;
}
#pun-announcement div#F {
height: 60px;
}
</style>
<!------------------------->
<div id="ab">
<div id="A">
    <img id="A1" />
    <div id="A2">Content A2</div>
</div>
<div id="B">
    <img id="B1" />
    <div id="B2">Content B2</div>
</div>
</div>
<div id="cdef">
<div id="C">
    <img id="C1" />
    <div id="C2">Content C2</div>
</div>
<div id="de">
    <div id="E">
    <div id="E1">Content E</div>
    </div>
    <div id="D">
    <div id="Dvar">
        <span class="anBut">Кнопка 1</span>
        <div>Контент 1</div>
    </div>
    <div id="Dvar">
        <span class="anBut">Кнопка 2</span>
        <div>22</div>
    </div>
    <div id="Dvar">
        <span class="anBut">Кнопка 3</span>
        <div>333333333</div>
    </div>
    <div id="Dvar">
        <span class="anBut">Кнопка 4</span>
        <div>444444444444444444444<br />444444444444444</div>
    </div>
    <div id="Dvar">
        <span class="anBut">Кнопка 5</span>
        <div>55555555555555</div>
    </div>
    <div id="Dvar">
        <span class="anBut">Кнопка 6</span>
        <div>66666</div>
    </div>
    </div>
</div>
<div id="F">
    Content F
</div>
</div>

<script>
var annIndex = 0;

$('#E1').html($('#D #Dvar > div').eq(annIndex).html());
$('#D #Dvar span.anBut').eq(annIndex).addClass('sel');

$('#D #Dvar span.anBut').click(function() {
$('#D #Dvar span.anBut').removeClass('sel');
$(this).addClass('sel');
var n = $(this).parent().children('div').html()
$('#E1').fadeOut(1000, function() {
    $(this).html(n).fadeIn(1000);
});
});</script>

Стили для кнопки при наведении и при выборе.
Название кнопки и соответствующий ей html-контент.
Номер изначально выбранной кнопки D

0

688

kozhilya
Там таблица за пределы установленной ширины выезжает: http://tesdesigntest.rolka.su/

Хм, а можно объявление сместить ниже? А то оно разрывает мне красивый элемент оформления(

0

689

BlackSparrow
А так?

Код

<style>
div#pun-announcement div.html-box {
padding: 37px;
margin: auto;
}
#pun-announcement > .container div { border: 1px black solid; }
#pun-announcement div#ab {
float: left;
border: none;
}
#pun-announcement div#cdef {
margin-left: 410px;
border: none;
}
#pun-announcement div#de {
border: none;
height: 156px;
}
#pun-announcement div#A, #pun-announcement div#B, #pun-announcement div#C, #pun-announcement div#D, #pun-announcement div#E, #pun-announcement div#F {
padding: 7px 15px;
margin-bottom: 7px;
text-align: center;
}
#pun-announcement div#C {
margin: 0 20px 7px;
}
#pun-announcement img#A1, #pun-announcement img#B1, #pun-announcement img#C1 {
width: 340px;
height: 40px;
margin: 0 auto 7px;
}
#pun-announcement div#A2 {
height: 200px;
}
#pun-announcement div#B2 {
height: 100px;
}
#pun-announcement div#C2 {
border: none;
height: 100px;
}
#pun-announcement div#E {
float: left;
width: 240px;
padding: 13px;
height: -webkit-calc(100% - 13px);
}
#pun-announcement div#E1 {
height: 100%;
}
#pun-announcement div#D {
margin-left: 280px;
height: 100%;
}
#pun-announcement div#D div#Dvar {
border: none;
margin-bottom: 2px;
}
#pun-announcement div#D div#Dvar div {
display: none;
}
#pun-announcement div#D div#Dvar > span.anbut {
border: 1px solid black;
display: block;
padding: 2px 0;
width: 120px;
}
#pun-announcement div#D div#Dvar > span.anbut:hover {
background: silver;
}
#pun-announcement div#D div#Dvar > span.anbut.sel {
border-color: silver;
}
#pun-announcement div#F {
height: 74px;
margin-top: 23px;
}
</style>
<!------------------------->
<div id="ab">
<div id="A">
    <img id="A1" />
    <div id="A2">Content A2</div>
</div>
<div id="B">
    <img id="B1" />
    <div id="B2">Content B2</div>
</div>
</div>
<div id="cdef">
<div id="C">
    <img id="C1" />
    <div id="C2">Content C2</div>
</div>
<div id="de">
    <div id="E">
    <div id="E1">Content E</div>
    </div>
    <div id="D">
    <div id="Dvar">
        <span class="anBut">Кнопка 1</span>
        <div>Контент 1</div>
    </div>
    <div id="Dvar">
        <span class="anBut">Кнопка 2</span>
        <div>22</div>
    </div>
    <div id="Dvar">
        <span class="anBut">Кнопка 3</span>
        <div>333333333</div>
    </div>
    <div id="Dvar">
        <span class="anBut">Кнопка 4</span>
        <div>444444444444444444444<br />444444444444444</div>
    </div>
    <div id="Dvar">
        <span class="anBut">Кнопка 5</span>
        <div>55555555555555</div>
    </div>
    <div id="Dvar">
        <span class="anBut">Кнопка 6</span>
        <div>66666</div>
    </div>
    </div>
</div>
<div id="F">
    Content F
</div>
</div>
<script>
var annIndex = 0;
$('#E1').html($('#D #Dvar > div').eq(annIndex).html());
$('#D #Dvar span.anBut').eq(annIndex).addClass('sel');
$('#D #Dvar span.anBut').click(function() {
$('#D #Dvar span.anBut').removeClass('sel');
$(this).addClass('sel');
var n = $(this).parent().children('div').html()
$('#E1').fadeOut(1000, function() {
    $(this).html(n).fadeIn(1000);
});
});</script>

+1

690

kozhilya
Замечательно, спасибо)

0

691

kozhilya
Прошу прощения, что дергаю, но в этом коде не работают стили кнопок, они отображаются, как обычный текст. Хотя они и кликабельны, это совсем не айс.

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

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

0

692

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

Прошу прощения, что дергаю, но в этом коде не работают стили кнопок, они отображаются, как обычный текст. Хотя они и кликабельны, это совсем не айс.

Каюс, моя опечатка.

#pun-announcement div#D div#Dvar > span.anbut {
border: 2px solid black;
display: block;
padding: 2px 0;
width: 120px;
}
#pun-announcement div#D div#Dvar > span.anbut:hover {
background: silver;
}
#pun-announcement div#D div#Dvar > span.anbut.sel {
border-color: silver;
}

надозаменить на

#pun-announcement div#D div#Dvar > span.anBut {
border: 2px solid black;
display: block;
padding: 2px 0;
width: 120px;
}
#pun-announcement div#D div#Dvar > span.anBut:hover {
background: silver;
}
#pun-announcement div#D div#Dvar > span.anBut.sel {
border-color: silver;
}

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

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

Вставите ссылку на картинку при помощи аттрибута src:

<img id="A1" src="Ссылка на картинку" />

Граница исчезнет сама.

+1

693

1.  http://wolvesdarkvalley.rolka.su/
2. А как узнать ширину?  %-)
3.

Картинка

http://s013.radikal.ru/i324/1209/4c/3e9156abd96d.jpg

4. Есть.
5. Если можно, закруглённые края у Администрации,Главного и т.д.

0

694

3ebra
Я так понял, что "ТЕКСТ" должен меняться при нажатии на кнопку?

0

695

kozhilya
Да, Вы правильно поняли. Я просто по неведомой причине забыла это написать.

0

696

3ebra
Простите, что задержался. Были неотложные дела.
В общем вот:

<style>
table { width: 100%; border: 1px solid black; border-collapse: collapse; }
table thead td { display: none; border: 1px solid black; }
table thead th { width: 25%; cursor: pointer; border: 1px solid black; }
table thead th.sel { border-color: red; }
table tbody td { height: 300px; border: 1px solid black; }
</style>
<table><thead><tr>
  <th>Кнопка 1</th>
  <td>Контент 1<br />С полным html-наполением.</td>

  <th>Кнопка 2</th>
  <td>Контент 2</td>

  <th>Кнопка 3</th>
  <td>Контент 3</td>

         
  <th>Кнопка 4</th>
  <td>Контент 4</td>

</tr></thead><tbody><tr><td colspan="4" class="content"></td></tr></tbody></table>
<script>
selButton = 0
$('table thead th').click(function() { $('table thead th').removeClass('sel'); $(this).addClass('sel'); $('table tbody td.content').html($('table thead th.sel + td').html())}).eq(selButton).trigger('click');
</script>

Жёлтый и его оттенки — Разные кнопки и контенты.
Жирный жёлтый — кнопка. Можно вставить картинку при помощи <img />.
Курсивный жёлтый — контент.
Зелёный — число, обозначающее, какой элемент выбран при загрузки страницы. Считать с 0. На вашей картинке будут таке коды: Главное - 0; Администрация - 1; Ссылки - 2; Объявления - 3.

Вроде все :|

+1

697

kozhilya
Ничего страшного, я всё прекрасно понимаю.  :cool:

0

698

kozhilya
А можно текст сделать зелёным?

А точнее заголовки зелёным, а сам текст белым.

Отредактировано 3ebra (22.09.2012 16:12:34)

0

699

Простите, но мне нужна ещё одна табличка.  :blush:

1. Ссылка на форум
http://wolvesdarkvalley.rolka.su/
2. -------
3. Добротный рисунок с границами хотя бы в Paint'е, по которому можно определить чёткое количество столбцов и количество строк (решётку):
http://s019.radikal.ru/i600/1209/20/65b07dffebe3.jpg
Важно: Серым отмечены невидимые границы.
Шрифт в Заголовках и в Названии форума зелёный Harrington.
Остальной шрифт Century Gothic белый.
4. Границы у таблицы: есть/нет (нужное подчеркнуть) - Только крайние. (Серые я сделала для удобства)
5. Доп.элементы (прокрутка, картинки и т.д.) указывать текстовыми пометками непосредственно в ячейках таблицы рисунка, разборчивым шрифтом..

Вот Картинка:
http://s1.uploads.ru/t/NvTV1.png

0

700

3ebra написал(а):

kozhilya
А можно текст сделать зелёным?
А точнее заголовки зелёным, а сам текст белым.

Эм... Немного поподробнее можно?

Я звлыб в том коде одну деталь. Хаените содержимое тега <style>...</style> на следующее: #pun-announcement

#pun-announcement table { width: 100%; border: 1px solid black; border-collapse: collapse; }
#pun-announcement table thead td { display: none; border: 1px solid black; }
#pun-announcement table thead th { width: 25%; cursor: pointer; border: 1px solid black; }
#pun-announcement table thead th.sel { border-color: red; }
#pun-announcement table tbody td { height: 300px; border: 1px solid black; }

Вторая таблица.

<style>#pun-announcement table { border: 1px solid black; width: 100%; font-family: Century Gothic; color: white; }
#pun-announcement table td { width: 50%; text-align: center; outline: 1px solid gray; }
#pun-announcement table td[rowspan="2"] { width: 25%; }
h5 { font-family: Harrington, Verdana; color: green; margin: 10px; font-size: 20px; }
</style>
<table><tr>
<td rowspan=2><h5>News</h5>
  Your Content
</td><td><h5>Wolves Dark Valley</h5></td>
<td rowspan=2><h5>!!!</h5>
  Your Content</td></tr><tr><td><img src="http://s1.uploads.ru/t/NvTV1.png" style="width: 100%"/></td></tr></table>

Жирный жёлтый - контент блоков.

+1


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


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