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

Объявление

Идет поиск Хранителя форума

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

О форуме

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

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

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


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


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

Сообщений 761 страница 780 из 1000

761

kozhilya
Спасибо что берётесь.
Да без проблем, вот по шаблону. Правда, мало что изменилось:
1. ссылка на форум
http://testriel.rusff.ru/
2. ширина форума (ссылка на форум ничего может не показать, если дизайн в разработке).
900px
3. добротный рисунок с границами хотя бы в Paint'е, по которому можно определить чёткое количество столбцов и количество строк (решётку):
http://s1.ipicture.ru/uploads/20121106/JoQh6bbs.png

кнопки

http://s1.ipicture.ru/uploads/20121106/epIXfQmV.png
http://s1.ipicture.ru/uploads/20121106/c6UIRRTq.png
http://s1.ipicture.ru/uploads/20121106/7pJrxZcc.png
http://s1.ipicture.ru/uploads/20121106/ZuNofXK4.png

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

+1

762

kozhilya
Спасибо.

0

763

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

Селектор таблицы { border: none 0px; }

Спасибо :)

Возник еще один вопрос - а если табличку надо вставить в сообщение на форуме, то в ней как края убрать?
Просто возникает ощущение, что никак, потому что у вас границ нет, а у меня на тестовом они есть... а хотелось бы чтобы в той таблице их везде не было, на всех форумах :)

0

764

1. ссылка на форум
в разработке

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

3. добротный рисунок с границами хотя бы в Paint'е, по которому можно определить чёткое количество столбцов и количество строк (решётку):
общий вид
http://s3.uploads.ru/V24Sv.png
По игре : http://s1.uploads.ru/sIaOv.png
Актив недели: http://s1.uploads.ru/U9T2Y.png
Реклама и Партнеры : http://s1.uploads.ru/u98yO.png

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

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

0

765

1.  Волки - Долина Судьбы -
2. --------
3.

Таблица

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

4.  Границы у таблицы: есть/нет (нужное подчеркнуть)
5. Прокрутка в Новостях. Слова "Ссылка" спрятать.
В графе администраторы| модераторы картинки 180х180, увеличивающиеся при наведении.
Шрифт Century Gothic.
В администраторы картинки - http://s3.uploads.ru/t/S6Xif.jpghttp://s2.uploads.ru/t/KQuke.jpghttp://s3.uploads.ru/t/jHqr5.png
В модераторы - http://s3.uploads.ru/t/WaJYI.png во всех трех окнах.

0

766

kozhilya, не тороплю, но как скоро выполните?

+1

767

riel
У меня были свистопляски с компьютером из-за переустановки системы. Но всё позади, и прямо сейчас я займусь заказами.

0

768

Здравствуйте, нужна помощь с таблицей:
1. Ссылка на форум - http://newhoggame.rusff.ru/

2. Ширина форума - ширину самого форума не знаю (даже не в курсе, где посмотреть). Но общая ширина таблица должна быть 919 px... вроде

3. Рисунок таблицы

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

http://s019.radikal.ru/i630/1211/35/d7253e022be1t.jpg

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

5. доп.элементы (прокрутка, картинки и т.д.) - дополнения не нужны. Никаких картинок, прокруток, фонов и т.д.

0

769

Rizzyna
Пока сделал статичную картинку. И ещё я не очень понял, что требуется в блоке "Лучший пост". Напишите, что надо сделать - доделаю.

<style>
#pun-announcement table.main {
    width: 800px;
    margin: 0 auto;
    border-spacing: 0;
}
#pun-announcement table.main th {
    width: 25%;
    cursor: pointer;
    font-weight: normal;
    border: 1px solid black;
}
#pun-announcement table.main th:hover, #pun-announcement table.main th.active {
    font-weight: bold;
}
#pun-announcement table.main > tbody > tr > td {
    padding: 0;
    border: 1px solid black;
}
#pun-announcement table.main th div {
    display: none;
}
#pun-announcement table.main tbody div.content {
    height: 315px;
    text-align: center;
}
#pun-announcement table.main tbody div.content ul li {
    border: 1px solid black;
    margin-bottom: 2px;
}

#pun-announcement table.main tbody div.content > table { width: 100%; height: 100%; }
.scroll { overflow-y: auto; height: 100%; border: 1px solid black }
img.ava.ad { width: 75px; height: 75px; }
img.ava.mod { width: 50px; height: 50px; }
</style>
<table class="main"><thead><tr>
<th class="active"><span>Основное</span>
<div><table>
<tr><td><div><h6>Админстрация</h6>
<img src="Ссылка на изображение" class="ava ad" />
<img src="Ссылка на изображение" class="ava ad" />
<img src="Ссылка на изображение" class="ava ad" />
</div>
<div><h6>Модераторы</h6>
<img src="Ссылка на изображение" class="ava mod" />
<img src="Ссылка на изображение" class="ava mod" />
<img src="Ссылка на изображение" class="ava mod" />
<img src="Ссылка на изображение" class="ava mod" />
</div>
<div><h6>Полезные ссылки</h6><ul>
<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>
</td>
<td><h6>Новости форума</h6><div class="scroll">Контент новостей</div></td></tr>
</table></div></th>
<th><span>По игре</span>
<div><table><tr><td><h6>Погода и время в игре</h6>
<div class="scroll">Контент погоды</div></td>
<td><h6>События в игре</h6>
<div class="scroll">Контент событий</div>
</td></tr></table></div></th>
<th><span>Актив недели</span>
<div><table><tr><td><h6>Лучший пост</h6>
<div class="scroll">Контент лучшего поста</div></td></tr></table></div></th>
<th><span>Реклама и партнёрство</span>
<div><table><tr><td><h6>Реклама</h6>
<div class="scroll">Контент рекламы</div></td>
<td><h6>Партнёры</h6>
<div class="scroll">Контент партнёров</div>
</td></tr></table></div></th></tr></thead>

<tbody><tr><td colspan=3><div class="content"></div></td>
<td><img src="Ссылка на картинку" style="height: 100%; width: 100%" /></td></tr></table>

<script>
$('#pun-announcement table.main th').click(function() {
    $('#pun-announcement table.main th').removeClass('active');
    $("#pun-announcement table.main tbody div.content")
        .fadeOut('slow', function() { $(this).html($('#pun-announcement table.main th.active > div').html()); })
        .fadeIn('slow');
    $(this).addClass('active');
}).filter('.active').trigger('click');
</script>

0

770

Доброго времени суток. Рассчитываю на Вашу помощь, заранее спасибо :)
1. ссылка на форум
http://silvar.rolka.su/
Он в разработке, но ширина таблиц уже окончательная

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

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

изображения

http://s3.uploads.ru/t/mW3XE.jpg
http://s2.uploads.ru/t/LUtdu.jpg
http://s2.uploads.ru/t/42sIO.jpg

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

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

Отредактировано Shivers (12.11.2012 21:16:04)

0

771

riel
Весёлый у вас заказик :)

Код

<table class="main"><thead><tr>
<th class="active"><img src="http://s1.ipicture.ru/uploads/20121106/epIXfQmV.png" />
<div>Контент 1</div>
</th>
<th class="active"><img src="http://s1.ipicture.ru/uploads/20121106/c6UIRRTq.png" />
<div>Контент 1</div>
</th>
<th class="active"><img src="http://s1.ipicture.ru/uploads/20121106/7pJrxZcc.png" />
<div>Контент 1</div>
</th>
<th class="active"><img src="http://s1.ipicture.ru/uploads/20121106/ZuNofXK4.png" />
<div>Контент 1</div>
</th>
</tr></thead>
<tbody><tr><td colspan=4><div class="content"></div></td></tr></table>

<script>
$('#pun-announcement table.main th').click(function() {
    $('#pun-announcement table.main th').removeClass('active');
    $("#pun-announcement table.main tbody div.content")
        .fadeOut('slow', function() { $(this).html($('#pun-announcement table.main th.active > div').html()); })
        .fadeIn('slow');
    $(this).addClass('active');
}).filter('.active').trigger('click');
</script>

0

772

kozhilya
Очень. Особенно то, как он отображается.
http://testriel.rusff.ru/
Информация при нажатии мигает, "Контент 1" и т. д. что выделенные жирным откуда там взялись? Оо Возможно ведь их всех по центру выровнять? Спасибо с:

0

773

riel
А вот с миганием... У меня его нет.

Код

<style>#pun-announcement { margin: auto; }
#pun-announcement th div { display: none; }
</style>
<table class="main"><thead><tr>
<th class="active"><img src="http://s1.ipicture.ru/uploads/20121106/epIXfQmV.png" />
<div>Контент 1</div>
</th>
<th class="active"><img src="http://s1.ipicture.ru/uploads/20121106/c6UIRRTq.png" />
<div>Контент 1</div>
</th>
<th class="active"><img src="http://s1.ipicture.ru/uploads/20121106/7pJrxZcc.png" />
<div>Контент 1</div>
</th>
<th class="active"><img src="http://s1.ipicture.ru/uploads/20121106/ZuNofXK4.png" />
<div>Контент 1</div>
</th>
</tr></thead>
<tbody><tr><td colspan=4><div class="content"></div></td></tr></table>
<script>
$('#pun-announcement table.main th').click(function() {
    $('#pun-announcement table.main th').removeClass('active');
    $("#pun-announcement table.main tbody div.content")
        .fadeOut('slow', function() { $(this).html($('#pun-announcement table.main th.active > div').html()); })
        .fadeIn('slow');
    $(this).addClass('active');
}).filter('.active').trigger('click');
</script>

0

774

Wendy Owen

<style>
#pun-announcement {
    text-align: center;
}
#pun-announcement table {
    width: 100%;
}
#pun-announcement h5 {
    margin-top: 5px;
    font-size: 15px;
}
#pun-announcement img.ava {
    width: 100px;
    height: 100px;
}
.border-box {
    border: 1px solid black !important;
}
</style>
<table>
<tr><td class="border-box">
<ul>
<li><h5>Важное</h5></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><h5>Активные квесты</h5></li>
<li><a href="Ссылка">Текст Ссылки</a></li>
<li><a href="Ссылка">Текст Ссылки</a></li>
<li><a href="Ссылка">Текст Ссылки</a></li>
<li><h5>Развлечения</h5></li>
<li><a href="Ссылка">Текст Ссылки</a></li>
<li><a href="Ссылка">Текст Ссылки</a></li>
<li><a href="Ссылка">Текст Ссылки</a></li>
</ul></td>
<td><div style="overflow-y: auto; height: 100px;" class="border-box"><h5>Новости</h5>

Текст</div><br />
<div class="border-box"><h5>Администраторы</h5>
<img src="http://s3.uploads.ru/t/S6Xif.jpg" class="ava" />
<img src="http://s2.uploads.ru/t/KQuke.jpg" class="ava" />
<img src="http://s3.uploads.ru/t/jHqr5.png" class="ava" />
<h5>Модераторы</h5>
<img src="http://s3.uploads.ru/t/jHqr5.png" class="ava" />
<img src="http://s3.uploads.ru/t/jHqr5.png" class="ava" />
<img src="http://s3.uploads.ru/t/jHqr5.png" class="ava" />
</div></td>
<td><div class="border-box" style="height: 55px;"><h5>PR</h5>
<strong>Ник</strong> - PR<br />
<strong>Пароль</strong> - 1111</div><br />
<div class="border-box" style="height: 213px;padding-top: 82px;"><ul>
<li><h5>Реклама</h5></li>
<li><a href="Ссылка">Текст Ссылки</a></li>
<li><a href="Ссылка">Текст Ссылки</a></li>
<li><a href="Ссылка">Текст Ссылки</a></li>
<li><h5>Гости</h5></li>
<li><a href="Ссылка">Текст Ссылки</a></li>
<li><a href="Ссылка">Текст Ссылки</a></li>
<li><a href="Ссылка">Текст Ссылки</a></li>
</ul></div></td>
</tr>
</table>

+1

775

kozhilya
Мигает же Оо Проверяла в Мозилле и Хроме, а как ни странно и тут и там та же песня. Что же это может быть?
Кстати, почему при загрузке страницы показывает сразу инфу из 4 контента, а не из 1? http://testriel.rusff.ru/
А так всё чудесно, за исключением мигания, за что я благодарна с:

Отредактировано riel (12.11.2012 12:08:22)

0

776

1. ссылка на форум
Клик
    2. ширина форума (ссылка на форум ничего может не показать, если дизайн в разработке).
890
    3. добротный рисунок с границами хотя бы в Paint'е, по которому можно определить чёткое количество столбцов и количество строк (решётку):
http://s2.uploads.ru/t/I0ugF.jpg
Там где пустое окно пиксельная картинка, вставлю сама
    4. границы у таблицы: есть/нет (нужное подчеркнуть)
Есть только красное окно и четыре столбца новостей внизу.
    5. доп.элементы (прокрутка, картинки и т.д.) указывать текстовыми пометками непосредственно в ячейках таблицы рисунка, разборчивым шрифтом.
Всё указанно

Заранее спасибо.

Отредактировано Gerra (12.11.2012 15:51:16)

0

777

riel
Множественное копирование - зло.

Код

<table class="main"><thead><tr>
<th class="active"><img src="http://s1.ipicture.ru/uploads/20121106/epIXfQmV.png" />
<div>Контент 1</div>
</th>
<th><img src="http://s1.ipicture.ru/uploads/20121106/c6UIRRTq.png" />
<div>Контент 2</div>
</th>
<th><img src="http://s1.ipicture.ru/uploads/20121106/7pJrxZcc.png" />
<div>Контент 3</div>
</th>
<th><img src="http://s1.ipicture.ru/uploads/20121106/ZuNofXK4.png" />
<div>Контент 4</div>
</th>
</tr></thead>
<tbody><tr><td colspan=4><div class="content"></div></td></tr></table>
<script>
$('#pun-announcement table.main th').click(function() {
    $('#pun-announcement table.main th').removeClass('active');
    $("#pun-announcement table.main tbody div.content")
        .fadeOut('slow', function() { $(this).html($('#pun-announcement table.main th.active > div').html()); })
        .fadeIn('slow');
    $(this).addClass('active');
}).filter('.active').trigger('click');
</script>

0

778

The Sorting Hat

<style>
#pun-announcement table.main {
    width: 919px;
    border-spacing: 0px;
    height: 300px;
    margin: auto;
}
#pun-announcement table.main td {
    border: none;
    padding: 0;
}
#pun-announcement table.main td.buttons {
    width: 150px;
}
#pun-announcement table.main td.buttons ul {
    margin: auto;
}
#pun-announcement table.main td.buttons li span {
    display: block;
    text-align: center;
    margin: 12px 0;
    cursor: pointer;
}
#pun-announcement table.main td.buttons li div {
    display: none;
}
#pun-announcement table.main div.content {
    height: 100%;
    overflow-y: auto;
    text-align: center
}
</style>

<table class="main"><tr><td class="buttons"><ul>
<li class="active"><span>События в игре</span>
<div>Контент событий</div></li>
<li><span>Информация</span>
<div>Контент информации</div></li>
<li><span>Навигация</span>
<div>Контент навигации</div></li>
<li><span>Акции</span>
<div>Контент акций</div></li>
<li><span>Администрация</span>
<div>Контент администрации</div></li>
<li><span>Баннеры</span>
<div>Контент баннеров</div></li>
</ul></td>
<td><div class="content"></div></td></tr></table>

<script>
$('#pun-announcement table.main td.buttons li').click(function() {
    $('#pun-announcement table.main td.buttons li').removeClass('active');
    $(this).addClass('active');
    $('#pun-announcement table.main div.content')
        .hide('slow', function() { $(this).html($('#pun-announcement table.main td.buttons li.active > div').html()); })
        .show('slow');
}).filter('.active').trigger('click')
</script>

0

779

Shivers

<style>
#pun-announcement table.main {
    margin: auto;
    width: 800px;
    height: 300px;
    text-align: center;
}
#pun-announcement table.main * {
    margin: auto;
}
#pun-announcement .main th {
    width: auto;
}
#pun-announcement .main th div {
    display: none;
}
#pun-announcement .main .content > img {
    display: block;
}
#pun-announcement .main .content .ava img {
    width: 50px; height: 50px;
}
#pun-announcement .main .content .banners img {
    height: 31px; width: 88px;
}
</style>
<table class="main"><thead><tr>

<th class="active"><span>Основное</span>
<div><img src="Ссылка на картинку с приветствием" />
<div style="width: 600px; height: 150px; border: 1px dashed black">Текст приветствия</div>
<img src="Ссылка администрации" />
<div class="ava"><img src="Ссылка на аватар" />
<img src="Ссылка на аватар" />
<img src="Ссылка на аватар" />
<img src="Ссылка на аватар" /></div>
</div></th>

<th><span>Информация</span>
<div>
<table><tr><td><ul>
<li><a href="Ссылка">Текст ссылки 1</a></li>
<li><a href="Ссылка">Текст ссылки 2</a></li>
<li><a href="Ссылка">Текст ссылки 3</a></li>
<li><a href="Ссылка">Текст ссылки 4</a></li>
<li><a href="Ссылка">Текст ссылки 5</a></li>
</ul></td>
<td><img src="Ссылка на картинку с надписью События" />
<div style="scroll: auto; height: 200px">Контент событий</div></td></tr></table>
</div></th>

<th><span>Патнёры</span>
<div><img src="Ссылка на картинку с надписью Баннеры" />
<div class="banners"><img src="Баннер" /><img src="Баннер" /><img src="Баннер" /></div></div></th>

</tr></thead><tbody><tr><td colspan=3><div class="content"></div></td></tr></table>

<script>
$('#pun-announcement table.main th').click(function() {
    $('#pun-announcement table.main th').removeClass('active');
    $("#pun-announcement table.main tbody div.content")
        .fadeOut('slow', function() { $(this).html($('#pun-announcement table.main th.active > div').html()); })
        .fadeIn('slow');
    $(this).addClass('active');
}).filter('.active').trigger('click');
</script>

0

780

kozhilya
Не отрицаю.
Возможно убрать жирные подписи под картинками и не нарушить целостность таблицы? Заранее спасибо, и мигать перестало.

0


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


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