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

Объявление

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

О форуме

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

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

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


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


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

Сообщений 781 страница 800 из 1000

781

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

Shivers
Демонстрация
Код:

Спасибо Вам большое, все отлично, за исключением одной мелочи: серая рамка по краям таблицы есть только слева и снизу. Можно ее убрать вообще?
И еще можно сделать кнопочки "информация", "партнеры" и "основное" так же картинками, как и все остальное?
А аватары и баннеры - кликабельными.

Отредактировано Shivers (13.11.2012 15:03:02)

0

782

riel
Вставьте в начало окна "Объявление":

<style>#pun-announcement .main th div { display: none; }</style>

Shivers

#pun-announcement table.main * {
    margin: auto;
}

замените на

#pun-announcement table.main * {
    border: none !important;
    margin: auto;
}

0

783

kozhilya
А подскажите пожалуйста, как сделать картинки кликабельными? :С

0

784

kozhilya
Большое спасибо (:

Отредактировано riel (13.11.2012 20:23:07)

0

785

Shivers
Сделать код таким:

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

0

786

Gerra
Давненько я так не мучился с таблицами... Тут однозначно недоделка - пишите письма!

<style>
#pun-announcement td {
    width: auto;
    padding: 0;
}
.scroll {
    overflow-y: auto;
    margin: 8px;
}
.border {
    border: 1px solid black;
    border-radius: 10px;
    padding: 8px;
}
.popupCall {
    cursor: pointer;
}
.popupCall #popupContent { display: none; }
#pun-announcement div#popup {
    position: absolute;
    background: darkgreen;
    color: white;
    padding: 5px;
    height: auto;
    max-height: 150px;
}</style>

<table class="main">
<colgroup><col width="300" /><col width="300" /><col width="300" /></colgroup>
<td rowspan=2><div class="scroll border">
<h5>Заголовок</h5>
Текст, бла-бла-бла
</div></td>
<td><table><tr><td><div class="border popupCall">Администрация
<div id="popupContent">АДМИНЫ!</div></div></td>
<td><div class="border popupCall">Модераторы
<div id="popupContent">Модеры!</div></div>
</td></tr></table>
<div>Ваш пустой блок</div>
<div class="border popupCall">Наш баннер
<div id="popupContent">Баннер</div></div>
</td>
<td><div class="border popupCall">Ссылки
<div id="popupContent"><ul>
<li><a href="Ссылка">Текст Ссылки</a></li>
<li><a href="Ссылка">Текст Ссылки</a></li>
<li><a href="Ссылка">Текст Ссылки</a></li>
<li><a href="Ссылка">Текст Ссылки</a></li>
</ul></div></div>
<div class="scroll border"><h5>Сюжет</h5>
Бла-бла</div>
</td></tr>
<tr><td colspan=2><marquee scrollamount="5" onmouseover="this.stop()" onmouseout="this.start()">Бегущая строка</marquee></td></tr>
<tr>
<td colspan=3>
<table><tr>
<td><div class="border scroll"><h5>Заголовок</h5>
Новость</div></td>
<td><div class="border scroll"><h5>Заголовок</h5>
Новость</div></td>
<td><div class="border scroll"><h5>Заголовок</h5>
Новость</div></td>
<td><div class="border scroll"><h5>Заголовок</h5>
Новость</div></td>
<td>
<div class="border scroll"><h5>Погода</h5>
<img src="Картинка" /><br />
Текст....</div></td></tr></table>
</td>
</tr>
</table>
<div id="popup" class="border scroll" style="display: none"></div>
<script>
$('.popupCall').click(function(event) {
    if ($(this).is('.active'))
        hidePopup(this);
    else {
        $('.popupCall').removeClass('active');
        showPopup(event, this);
    }
    $(this).toggleClass('active');
});
var popupWidth = 200;
function showPopup(e, obj) {
    function getCoords(elem) {
        var box = elem.getBoundingClientRect(),
            body = document.body,
            docEl = document.documentElement,
       
            scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop,
            scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft,
            clientTop = docEl.clientTop || body.clientTop || 0,
            clientLeft = docEl.clientLeft || body.clientLeft || 0,
       
            top  = box.top +  scrollTop - clientTop,
            left = box.left + scrollLeft - clientLeft;
        return { top: Math.round(top)+ elem.clientHeight + 5,
            left: Math.round(left) - (popupWidth - elem.clientWidth)/2
        };
    }
   
    $('#pun-announcement #popup').slideUp('slow', function() {
        c = getCoords(obj);
        $(this).css({ 'left': c.left+'px', 'top': c.top+'px', 'width': popupWidth+'px' }).html($('#popupContent', obj).html());
        $(this).slideDown('slow');
    });
}
function hidePopup(obj) {
    $('#pun-announcement #popup').slideUp('slow');
}
</script>

0

787

1. ссылка на форум http://kotak.0pk.ru/
2. ширина форума -
3. добротный рисунок с границами хотя бы в Paint'е, по которому можно определить чёткое количество столбцов и количество строк (решётку):
1 - http://s017.radikal.ru/i430/1211/34/940ff7d63244.jpg
2 - http://s005.radikal.ru/i211/1211/a7/018ea4cb8019.jpg
3 - http://s017.radikal.ru/i401/1211/19/142da707cb7c.jpg
4. границы у таблицы: есть/нет
5. доп.элементы (прокрутка, картинки и т.д.) указывать текстовыми пометками непосредственно в ячейках таблицы рисунка, разборчивым шрифтом.
Часы -

Код:
<td rowspan="2" width="276"><embed src="http://chasikov.net.ru/flash/animals/cat/cat_3.swf" width="170" height="152" wmode="transparent" type="application/x-shockwave-flash"></embed></tr>

Календарь -

Код:
<td rowspan="2" width="237"><iframe name="Calendar" src="http://avatarochka.ru/Calendar2/Calend.html" height="120" width="120" scrolling="no" frameborder="0"></iframe></td>

Полезные ссылки - <a href="http://kotak.0pk.ru/viewforum.php?id=70">Магазин</a>
<br><a href="http://kotak.0pk.ru/viewtopic.php?id=65#p87">Как стать членом клуба</a>
<br><a href="http://kotak.0pk.ru/viewforum.php?id=96">Игры</a>
<br><a href="http://kotak.0pk.ru/viewforum.php?id=75">Способности и привычки кошек</a>
<br><a href="http://kotak.0pk.ru/viewforum.php?id=28">Котята</a>
<br><a href="http://kotak.0pk.ru/viewforum.php?id=72">Здоровье кошек</a>
<br><a href="http://kotak.0pk.ru/viewforum.php?id=24">Породы</a>
<br><a href="http://kotak.0pk.ru/viewforum.php?id=30">Статьи о кошках</a></center>
<br></td>]

Картинка или видео - Напишите просто где вставлять!

Администрация - http://s52.radikal.ru/i136/1211/4a/a92db757ebad.gif
,
http://s019.radikal.ru/i615/1211/8a/50eeee48172c.jpg[/img]
,
http://s017.radikal.ru/i403/1211/71/44924cfbff0d.gif

Модерация -
http://s08.radikal.ru/i181/1211/65/9f6764cdc3c3.jpg
Где нужно ставить остальное, просто напишите!

0

788

ссылка на форум http://good73.7il.ru/
Мне бы вот такою таблицу:
http://s3.uploads.ru/t/O3KBJ.jpg
1 блок)   чат 

Код:
<iframe frameborder=no src='http://heat-online-chat.chatium.com/inc' width="63%" height="557"></iframe>

и
радио

Код:
<object width="1313" height="350" type="application/x-shockwave-flash" data="http://swfradio.com/social.swf"><param value="http://swfradio.com/social.swf" name="data"><param value="http://swfradio.com/social.swf" name="src"><param value="transparent" name="wmode"></object>

2 блок) rss скрипт

Код:
<SCRIPT TYPE='TEXT/JAVASCRIPT' SRC='http://ru-element.ru/script/_rss2.php?VAR1=http://heatonline.wordpress.com/feed&VAR2=5&VAR3=HTML'></SCRIPT><BR/>
<NOSCRIPT><A HREF='http://ru-element.ru/script/'>rss скрипт</A></NOSCRIPT>

2 блок надо бы с прокруткой

0

789

http://i064.radikal.ru/1211/00/8169e40f8905.png
Можно такую таблицу. Самому что-то не получается.. Лучше доверюсь профессионалам)

0

790

ваще круто будет)

можно таблицу как тут это анихуб, там таблица красивая с прокруткой, ну в прочем как и везде)))
а точнее таблица где НОВОСТИ СЕРВИСА и ОСОБЕННОСТИ СЕРВИСА
если ее можно то плиз)

если нельзя!

1. ссылка на форум
http://epochofdragons.anihub.ru
2. ширина форума (ссылка на форум ничего может не показать, если дизайн в разработке).
800px
3. добротный рисунок с границами хотя бы в Paint'е, по которому можно определить чёткое количество столбцов и количество строк (решётку):
сам вид таблички
все по отдельности
1 кнопка
2 кнопка
3 кнопка
4 кнопка
5 кнопка
картинка
рамка
4. границы у таблицы: есть/нет (нужное подчеркнуть)
5. доп.элементы (прокрутка, картинки и т.д.) указывать текстовыми пометками непосредственно в ячейках таблицы рисунка, разборчивым шрифтом.
при нажатие на кнопку пересчитывалась страничка, если можно с эффектом что бы переливалась, не просто менялась а что бы было красиво и эффектно)
везде напишите просто вкладка 1-5.

Отредактировано Nikita380 (24.11.2012 21:58:37)

0

791

1. ссылка на форум:
http://testclosed.rolka.su/

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

3. добротный рисунок с границами хотя бы в Paint'е, по которому можно определить чёткое количество столбцов и количество строк (решётку):
http://s1.ipicture.ru/uploads/20121125/XTUSUg2x.png
http://s1.ipicture.ru/uploads/20121125/2j9UVoGI.png
http://s1.ipicture.ru/uploads/20121125/FyPYCJp0.png

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

5. доп.элементы (прокрутка, картинки и т.д.) указывать текстовыми пометками непосредственно в ячейках таблицы рисунка, разборчивым шрифтом:
Все границы должно быть четко видно, все квадратики (если это возможно). Так же нужно, чтобы при заполнении всё оставалось на своем месте, а не расползалось, как это обычно бывает 
Прокрутка, показанная на эскизах и переход на новую "страницу" по клику на "Основное", "Новости" и "Партнеры". А так, всё

0

792

Ау?

0

793

bibivo
Сегодня займусь.

0

794

kozhilya
надеюсь нашими тоже? ))) кстати ответьте мне на вопрос , что бы я знал заранее....

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

ваще круто будет)

сможете мне эту сделать или 2 вариант ждать? Оо

0

795

Джула

<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.clicable:hover, #pun-announcement table.main th.clicable.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 { width: 75px; height: 75px; margin: 0 10px; }
</style>

<table class="main"><thead><tr>
<th>Объявления</th>
<th class="clicable active"><span>Начало</span>
<div>
Картинка или видео.
</div></th>
<th class="clicable"><span>Форум</span>
<div><table><tr><td>
<embed src="http://chasikov.net.ru/flash/animals/cat/cat_3.swf" width="170" height="152" wmode="transparent" type="application/x-shockwave-flash"></embed>
</td>
<td><h6>Полезные ссылки</h6>
<ul>
<li><a href="http://kotak.0pk.ru/viewforum.php?id=70">Магазин</a></li>
<li><a href="http://kotak.0pk.ru/viewtopic.php?id=65#p87">Как стать членом клуба</a></li>
<li><a href="http://kotak.0pk.ru/viewforum.php?id=96">Игры</a></li>
<li><a href="http://kotak.0pk.ru/viewforum.php?id=75">Способности и привычки кошек</a></li>
<li><a href="http://kotak.0pk.ru/viewforum.php?id=28">Котята</a></li>
<li><a href="http://kotak.0pk.ru/viewforum.php?id=72">Здоровье кошек</a></li>
<li><a href="http://kotak.0pk.ru/viewforum.php?id=24">Породы</a></li>
<li><a href="http://kotak.0pk.ru/viewforum.php?id=30">Статьи о кошках</a></li>
</ul>
</td><td>
    <iframe name="Calendar" src="http://avatarochka.ru/Calendar2/Calend.html" height="120" width="120" scrolling="no" frameborder="0"></iframe>
</td>
</tr></table></div></th>
<th class="clicable"><span>Актив недели</span>
<div>
<h6>Администраторы</h6>
<img src="http://s52.radikal.ru/i136/1211/4a/a92db757ebad.gif" class="ava" />
<img src="http://s019.radikal.ru/i615/1211/8a/50eeee48172c.jpg" class="ava" />
<img src="http://s017.radikal.ru/i403/1211/71/44924cfbff0d.gif" class="ava" />

<h6>Модераторы</h6>
<img src="http://s08.radikal.ru/i181/1211/65/9f6764cdc3c3.jpg" class="ava" />
<img src="" class="ava" />
<img src="" class="ava" />

<h6>Дизайнер</h6>
<img src="" class="ava" />
</div></th></tr></thead>

<tbody><tr>
<td><div class="scroll">Контент объявлений</div></td>
<td colspan=3><div class="content"></div></td></tr></table>

<script>
function announcementMoveTo(index) {
    $('#pun-announcement table.main th.clicable').eq(index).trigger('click');
}
$('#pun-announcement table.main th.clicable').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

796

Nikita380
Всеми, конечно.

Если только что-нибудь похожее :)


lik777
Заказ по форме оформите, пожалуйста.

Ульяновский форум???


bibivo

Без демонстрации...

<table><tr><td colspan="2">Большая ячейка</td><td>Верхняя малая ячейка</td></tr><tr><td>Нижняя малая ячейка</td></tr></table>

Отредактировано kozhilya (26.11.2012 10:22:46)

0

797

Nikita380
Макет.

<style>
.rootAnn {
    width: 50%;
}
#pun-announcement table/*, #slider #main*/ {
    width: 100%;
}
#slider {
    margin: 0 auto;
}
#slider #main {
    height: 200px;
}
#slider .bx-window {
    border: 1px solid black;
}
a.pager-link, a.bx-prev, a.bx-next, a.bx-start {
    display: inline-block;
    pointer: cursor;
    margin: 0 5px;
    width: 30px;
    height: 25px;
    padding-top: 5px;
    border-radius: 15px;
    background: #374C64;
    font: normal 13px Verdana;
    color: whitesmoke;
    text-decoration: none;
}
a.pager-link.pager-active {
    background: #44678E; cursor: auto;
}
a.pager-link:hover, a.bx-prev:hover, a.bx-next:hover, a.bx-start:hover {
    background: #6289B4;
}
</style>

<table><tr><td class="rootAnn">
<h3>Объявления</h3>
<p>Объявление 1</p>
<p>Объявление 2</p>
<p>Объявление 3</p>
<p>Объявление 4</p>
</td><td class="rootAnn">
<table id="slider"><tr><td id="prev"></td>
<td><div id="main">
  <div>Slide one content</div>
  <div>Slide two content</div>
  <div>Slide three content</div>
  <div>And so on...</div>
</div></td>
<td id="next"></td>
</tr><tr></table>
</td></tr></table>

<script src="https://raw.github.com/wandoledzep/bxslider/master/jquery.bxSlider.min.js"></script>
<script>
$('#slider #main').bxSlider({
    prevSelector: '#slider #prev',
    prevText: '<',
    nextSelector: '#slider #next',
    nextText: '>',
    pager: false,
    auto: false
});
</script>

0

798

kozhilya
спасибо, а где слайд как убрать полоски? и как сделать цвет фона как там же?
и как сделать как у вас акции розовым выделяет, инфа голубым и т.д?)

0

799

Очень срочно нужна таблица! ):
    1. http://magixworld.win-x.su/

    2. 740 пикселей

    3.

Картинка тут

http://s3.uploads.ru/DbLqC.png

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

    5. Таблица-слайдер. Хотелось бы, что бы стрелочки выходили за рамку форума. Если такое не возможно, тогда пусть будут в таблице. Картинки стрелочек: http://s3.uploads.ru/jUwX5.png http://s3.uploads.ru/8rQWz.png
Заранее огромное спасибо!))

Отредактировано msmille (01.12.2012 01:33:14)

0

800

мне помогут, тут та вопрос на 5 секунд =="

0


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


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