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

Флейм · Поделиться**681**05.03.2012 19:42:49

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

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

ширина: 800

границы: нет

рисунок

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

0

Флейм · Поделиться**682**07.03.2012 13:52:14

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

0

Azaro · Поделиться**683**07.03.2012 18:17:52

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

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

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

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

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

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

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

+1

Кэру · Поделиться**684**10.03.2012 15:46:45

Просьба

1. Форум

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

3.

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

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

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

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

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

0

Azaro · Поделиться**685**18.03.2012 10:26:36

Кхе-кхе?

0

BlackSparrow · [1994-01-10]

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

http://tesdesigntest.rolka.su/

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

900рх

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

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

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

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

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

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

4. Границы.

Нет.

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

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

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

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

0

kozhilya · Поделиться**687**18.09.2012 01:07:54

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

BlackSparrow · [1994-01-10]

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

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

0

kozhilya · Поделиться**689**18.09.2012 21:12:47

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

BlackSparrow · [1994-01-10]

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

0

BlackSparrow · [1994-01-10]

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

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

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

0

kozhilya · Поделиться**692**19.09.2012 07:40:43

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

3ebra · Поделиться**693**20.09.2012 18:11:54

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

Картинка

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

0

kozhilya · Поделиться**694**20.09.2012 21:59:18

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

0

3ebra · Поделиться**695**21.09.2012 21:27:24

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

0

kozhilya · Поделиться**696**22.09.2012 13:23:55

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

3ebra · Поделиться**697**22.09.2012 15:38:16

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

0

3ebra · Поделиться**698**22.09.2012 15:57:02

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

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

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

0

3ebra · Поделиться**699**22.09.2012 16:37:10

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

1. Ссылка на форум
http://wolvesdarkvalley.rolka.su/
2. -------
3. Добротный рисунок с границами хотя бы в Paint'е, по которому можно определить чёткое количество столбцов и количество строк (решётку):

Важно: Серым отмечены невидимые границы.
Шрифт в Заголовках и в Названии форума зелёный Harrington.
Остальной шрифт Century Gothic белый.
4. Границы у таблицы: есть/нет (нужное подчеркнуть) - Только крайние. (Серые я сделала для удобства)
5. Доп.элементы (прокрутка, картинки и т.д.) указывать текстовыми пометками непосредственно в ячейках таблицы рисунка, разборчивым шрифтом..

Вот Картинка:

0

kozhilya · Поделиться**700**23.09.2012 01:47:02

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-таблицы и Заказ Таблиц

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

Поделиться68105.03.2012 19:42:49

Поделиться68207.03.2012 13:52:14

Поделиться68307.03.2012 18:17:52

Поделиться68410.03.2012 15:46:45

Поделиться68518.03.2012 10:26:36

Поделиться68617.09.2012 22:58:24

Поделиться68718.09.2012 01:07:54

Поделиться68818.09.2012 17:45:11

Поделиться68918.09.2012 21:12:47

Поделиться69018.09.2012 23:32:32

Поделиться69119.09.2012 03:36:30

Поделиться69219.09.2012 07:40:43

Поделиться69320.09.2012 18:11:54

Поделиться69420.09.2012 21:59:18

Поделиться69521.09.2012 21:27:24

Поделиться69622.09.2012 13:23:55

Поделиться69722.09.2012 15:38:16

Поделиться69822.09.2012 15:57:02

Поделиться69922.09.2012 16:37:10

Поделиться70023.09.2012 01:47:02