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

Объявление

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

О форуме

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

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

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


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


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

Сообщений 801 страница 820 из 1000

801

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

0

802

Nikita380
Про фон не очень понял. Вам нужен отдельный цвет для блока объявлений?

http://6url.ru/wup - Демо (что-то какие-то баги...). Код без этого уточнения.

<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;
}
.rootAnn.ann p {
    type:
}
.rootAnn.ann p .type {
    display: inline-block;
    border: 1px solid black;
    width: 100px;
    padding: auto 6px;
    vertical-align: middle;
    text-align: center;
}
.rootAnn.ann p .date { width: 75px; }
.rootAnn.ann p.ann .type { background: yellow; }
.rootAnn.ann p.news .type { background: aqua; }
.rootAnn.ann p.cont .type { background: pink; }
.rootAnn.ann p.info .type { background: blue; color: white; }
</style>

<table><tr><td class="rootAnn ann">
<h3>Объявления</h3>
<p class="ann">
    <span class="date">01.01.2001</span>
    <span class="type">Объявление</span>
    <span class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</p>
<p class="news">
    <span class="date">02.01.2003</span>
    <span class="type">Новость</span>
    <span class="content">Pellentesque rhoncus, odio ut dignissim fermentum, sem lectus interdum odio, et aliquet ipsum mauris id ante.</span>
</p>
<p class="cont">
    <span class="date">04.08.2007</span>
    <span class="type">Конкурс</span>
    <span class="content">Curabitur rhoncus iaculis vulputate. Duis at diam vehicula metus sodales pharetra.</span>
</p>
<p class="info">
    <span class="date">21.12.2012</span>
    <span class="type">Информация</span>
    <span class="content">Pellentesque eros augue, bibendum id viverra ac, luctus ut augue. Etiam bibendum venenatis tortor.</span>
</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>

Отредактировано kozhilya (30.11.2012 16:04:55)

0

803

kozhilya
я хочу что бы табла выглядила как на anihub.ru =)

0

804

1. Ничего не даст, так как дизайн в разработке.

2. 790рх

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

Таблица 1

http://imgs.su/tmp/2012-11-30/1354277026-420.jpg

таблица 2

http://imgs.su/tmp/2012-11-30/1354277315-420.jpg

Таблица 3

http://imgs.su/tmp/2012-11-30/1354277369-420.jpg

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

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

Добавлено спустя 8 часов 26 минут 54 секунды:
Спасибо, уже не надо, сделал сам, даже лучше чем хотел)))

Отредактировано Okatori (01.12.2012 00:39:26)

0

805

Когда мне сделают табличку?... :disappointed:

0

806

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

0

807

vergessene
Ваш заказ

Код:
<style>
#pun-announcement table.main {

    height: 300px;
    margin: auto;
    width: 800px;
}
#pun-announcement table {
    border-spacing: 0px;
}
#pun-announcement table.main td {
    border: none;
    padding: 0 20px;
}
#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;
    border: 1px solid black;
    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%;
    text-align: center;
    border: 1px solid black;
}
#pun-announcement table.main div.content h3 {
    height: 15%;
    font-size: 1.5em;
    font-weight: bold;
}
#pun-announcement table.main div.content td  {
    height: 150px;
    border: 1px solid black;
}
#pun-announcement table.main div.content td * {
    vertical-align: top;
}
#pun-announcement table.main div.content > * {
    margin: auto;
}
.scroll {
    overflow-y: auto;
    height: 85%;
    border: 1px solid black;
}
</style>

<table class="main"><tr><td class="buttons"><ul>
<li class="active"><span>Основное</span>
<div>
<table>
<tr><td>
    <h3>Администрация</h3>
    <img src="1st Admin" width="70" height="70" />
    <img src="2nd Admin" width="80" height="80" />
    <img src="3rd Admin" width="70" height="70" />
</td><td>
    <h3>О форуме</h3>
    <div class="scroll">
        Описание форума
    </div>
</td></tr>
<tr><td>
    <h3>Модераторы</h3>
    <img src="Moderator" width="100" height="100" />
    <!-- Тут я что-то не особо понял, уточните -->
</td><td>
    <h3>Навигация</h3>
    <div class="scroll">
        Контент навигации
    </div>
</td></tr>
</table>
</div></li>
<li><span>Новости</span>
<div><h3>Новости</h3>
<div class="scroll">
    Контент новостей
</div></div></li>
<li><span>Партнёры</span>
<div>
<h3>Наши друзья</h3>
<marquee scrollamount="5" onmouseover="this.stop()" onmouseout="this.start()">
    Баннеры
</marquee>
<h3>О рекламе</h3>
<div>
    Контент "О рекламе"
</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')
        .fadeOut('slow', function() { $(this).html($('#pun-announcement table.main td.buttons li.active > div').html()); })
        .fadeIn('slow');
}).filter('.active').trigger('click')
</script>

0

808

msmille
Демонстрация

Код:
<style>
#slider {
    margin: 0 auto;
    margin-left: -51px;
}
#slider #main {
    height: 200px;
    width: 740px;
}
#slider #main div {
    height: 100%;
}
#slider .bx-window table {
    height: 100%;
    width: 100%;
    border-spacing: 0;
}
#slider .bx-window table td {
    width: auto;
    height: auto;
    text-align: center;
}
</style>


<table id="slider"><tr><td id="prev"></td>
<td><div id="main">
    <div>
        <table><tr>
            <td rowspan=2> 1 </td>
            <td rowspan=2> 2 </td>
            <td> 3 </td>
        </tr><tr>
            <td> 4 </td>
        </tr></table>
    </div>
    <div>
        <table><tr>
            <td> 5 </td>
            <td> 6 </td>
        </tr></table>
    </div>
    <div>
        <table><tr>
            <td> 7 </td>
            <td> 8 </td>
        </tr></table>
    </div>
    <div>
        <table><tr>
            <td> 9 </td>
            <td> 10 </td>
        </tr></table>
    </div>
</div></td>
<td id="next"></td>
</tr><tr>
</table>

<script src="https://raw.github.com/wandoledzep/bxslider/master/jquery.bxSlider.min.js"></script>
<script>
$('#slider #main').bxSlider({
    prevSelector: '#slider #prev',
    prevImage: 'http://s3.uploads.ru/jUwX5.png',
    nextSelector: '#slider #next',
    nextImage: 'http://s3.uploads.ru/8rQWz.png',
    pager: false,
    auto: false,
}); 
</script>

Отредактировано kozhilya (01.12.2012 20:55:03)

+1

809

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

kozhilya
я хочу что бы табла выглядила как на anihub.ru =)

А что именно требуется?

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

скажите как сделать картинку в таблице?

Где именно?

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

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

В коде, который я дал, есть такое место:

.rootAnn.ann p.ann .type { background: yellow; }
.rootAnn.ann p.news .type { background: aqua; }
.rootAnn.ann p.cont .type { background: pink; }
.rootAnn.ann p.info .type { background: blue; color: white; }

В нём красным - цвета. Если надо изменить цвет текста, то можно добавлять жёлтое.

0

810

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

Где именно?

позади) то есть таблица вся на картинке)

0

811

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

А что именно требуется?

к примеру что где цвето-выделение надписей, что бы там была таке закругленно)))
задний фон был и он был закругленный)

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

В нём красным - цвета. Если надо изменить цвет текста, то можно добавлять жёлтое.

а как сделать что бы было два цвета как тут или на анихубе)
к примеру где важно там
http://s3.uploads.ru/t/A2lUE.png

0

812

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

а как сделать что бы было два цвета как тут или на анихубе)

Два варианта: картинка, либо css3 градиент. Если использовать градиенты — то код получится гигантским, а эффект - слабым. Я в примере ниже поставил его на места.
Так что рекомендую сделать картинки с градиентом.

Nikita380
Так что ли???

Код:
<style>
.rootAnn {
    border-radius: 5px;
    background: rgba(127,127,127,0.5);
}
#pun-announcement table/*, #slider #main*/ {
    width: 100%;
}
#slider {
    margin: 0 auto;
}
#slider #main {
    height: 200px;
    width: 300px;
}
a.bx-prev, a.bx-next {
    display: inline-block;
    pointer: cursor;
    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;
}
.rootAnn.ann p * { 
    vertical-align: middle;
}
.rootAnn.ann p .type {
    display: inline-block;
    width: 100px;
    padding: auto 8px;
    vertical-align: middle;
    text-align: center;
    border-radius: 3px;
}
.rootAnn.ann p .date { width: 75px; }
.rootAnn.ann p.ann .type { 
    background-image: linear-gradient(left top, #FF0000 0%, #FF5A5A 100%);
    background-image: -o-linear-gradient(left top, #FF0000 0%, #FF5A5A 100%);
    background-image: -moz-linear-gradient(left top, #FF0000 0%, #FF5A5A 100%);
    background-image: -webkit-linear-gradient(left top, #FF0000 0%, #FF5A5A 100%);
    background-image: -ms-linear-gradient(left top, #FF0000 0%, #FF5A5A 100%);
    
    background-image: -webkit-gradient(
        linear,
    	left top,
    	right bottom,
    	color-stop(0, #FF0000),
    	color-stop(1, #FF5A5A)
    );
}
.rootAnn.ann p.news .type { 
    background-image: linear-gradient(left top, #FFFF00 0%, #FFC800 100%);
    background-image: -o-linear-gradient(left top, #FFFF00 0%, #FFC800 100%);
    background-image: -moz-linear-gradient(left top, #FFFF00 0%, #FFC800 100%);
    background-image: -webkit-linear-gradient(left top, #FFFF00 0%, #FFC800 100%);
    background-image: -ms-linear-gradient(left top, #FFFF00 0%, #FFC800 100%);
    
    background-image: -webkit-gradient(
        linear,
    	left top,
    	right bottom,
    	color-stop(0, #FFFF00),
    	color-stop(1, #FFC800)
    );
}
.rootAnn.ann p.cont .type { background: pink; }
.rootAnn.ann p.info .type { background: blue; color: white; }
</style>

<table><tr><td class="rootAnn ann">
<h3>Объявления</h3>
<p class="ann">
    <span class="date">01.01.2001</span>
    <span class="type">Объявление</span>
    <span class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</p>
<p class="news">
    <span class="date">02.01.2003</span>
    <span class="type">Новость</span>
    <span class="content">Pellentesque rhoncus, odio ut dignissim fermentum, sem lectus interdum odio, et aliquet ipsum mauris id ante.</span>
</p>
<p class="cont">
    <span class="date">04.08.2007</span>
    <span class="type">Конкурс</span>
    <span class="content">Curabitur rhoncus iaculis vulputate. Duis at diam vehicula metus sodales pharetra.</span>
</p>
<p class="info">
    <span class="date">21.12.2012</span>
    <span class="type">Информация</span>
    <span class="content">Pellentesque eros augue, bibendum id viverra ac, luctus ut augue. Etiam bibendum venenatis tortor.</span>
</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>

+1

813

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

0

814

kozhilya
Т_Т еще одна сверх проблема, а где менять цвет таблицы? где серый цвет Т_Т

0

815

Nikita380
В самом начале:

.rootAnn {
    border-radius: 5px;
    background: rgba(127,127,127,0.5);
}

0

816

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

rgba(127,127,127,0.5)

а что это? Оо
где мне такие взять цвета то? Оо

0

817

kozhilya
уже понял спасибо)

0

818

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

0

819

После

.rootAnn.ann p.info .type { background: blue; color: white; }

вставьте

.rootAnn.ann p.act .type { background: Ваш цвет; }

Тогда в объяву вставлять

<p class="act">
    <span class="date">01.01.2001</span>
    <span class="type">Акция</span>
    <span class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</p>

0

820

1. ссылка на форум
http://fairywinx.spybb.ru/
2. ширина форума (ссылка на форум ничего может не показать, если дизайн в разработке).
920 пикселей
3. добротный рисунок с границами хотя бы в Paint'е, по которому можно определить чёткое количество столбцов и количество строк (решётку):

тык

http://s3.uploads.ru/YztNw.jpg

4. границы у таблицы: нет
5. доп.элементы: указано в таблице. Размер таблицы - 800*390. Можно заключить эту таблицу в другую, из одной ячейки (812*402), чтобы граница внутренней таблицы была на расстоянии 12 пикселей от внешней? Мне вот так хитро с помошью внешней таблицы фон нужно воткнуть)

0


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


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