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

Объявление

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

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

О форуме

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

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

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


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


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

Сообщений 241 страница 260 из 285

1

Здесь Вы можете попросить сделать Вам таблицу.

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

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

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

http://s014.radikal.ru/i328/1101/9e/0007383ee897t.jpg

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

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

6. желаемая высота таблицы (фиксированная или растягивается по содержимому)

7. шаблоны картинок к кнопкам (если нужны) нужного размера.

Или обучиться самому:

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

РАЗДЕЛ I. Создание таблицы.

Шаг 1. Обозначение таблицы.

Первым делом пишем теги, обозначающие начало и конец таблицы:

<table>

</table>

Шаг 2. Строки.

Любую таблицу начинают писать со строк, поэтому подумайте и решите, сколько строк вам необходимо.

Тег начала и конца строчек таблицы выглядит вот так:

<tr></tr>

Теги строк нужно располагать внутри тегов, обозначающих начало и конец таблицы.

Например, необходимо 4 строки - код будет выглядеть вот так:

<table>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>

Шаг 3. Ячейки.

Тег, обозначающий ячейку таблицы выглядит вот так:

<td></td>

Код ячейки вписывается внутри кода строки.

Для примера напишем таблицу, в которой находятся по 3 ячейки в каждой строке:

http://s53.radikal.ru/i141/0909/a6/82fdd84aa1bd.gif

код будет выглядеть вот так:

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Шаг 4. Заполнение таблиц текстом.

Все содержимое ячеек таблицы вписывается между тегов ячейки, например вот так:

<td>ТЕКСТ</td>

Внутрь тегов ячеек можно вставлять любые html-элементы: текст в html-форматировании, картинки, ссылки, видео, бегущие строки и т.п.

Для примера заполню нашу таблицу:

<table>
<tr>
<td>ячейка 1</td>
<td>ячейка 2</td>
<td>ячейка 3</td>
</tr>
<tr>
<td>ячейка 4</td>
<td>ячейка 5</td>
<td>ячейка 6</td>
</tr>
<tr>
<td>ячейка 7</td>
<td>ячейка 8</td>
<td>ячейка 9</td>
</tr>
<tr>
<td>ячейка 10</td>
<td>ячейка 11</td>
<td>ячейка 12</td>
</tr>
</table>

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

Код:
<table border=3>
    <tr>
    <td>ячейка 1</td>
    <td>ячейка 2</td>
    <td>ячейка 3</td>
    </tr>
    <tr>
    <td>ячейка 4</td>
    <td>ячейка 5</td>
    <td>ячейка 6</td>
    </tr>
    <tr>
    <td>ячейка 7</td>
    <td>ячейка 8</td>
    <td>ячейка 9</td>
    </tr>
    <tr>
    <td>ячейка 10</td>
    <td>ячейка 11</td>
    <td>ячейка 12</td>
    </tr>
    </table>

Шаг 5. Объединение ячеек.

Для объединения ячеек существуют теги форматирования таблиц colspan и rowspan

colspan используется для объединения ячеек по горизонтали.
rowspan используется для объединения ячеек по вертикали.

Вписываются они в тег ячейки следующим образом:

<td colspan="2"> ТЕКСТ</td>

красное - это, как вы видите - тег, обозначающий ячейку.
синее - это атрибут colspan, который позволит растянуть ячейку.

зеленое - это количество объединяемых ячеек.
оно может принимать значение только целых чисел, начиная с 2. НЕЛЬЗЯ ОБЪЯДИНИТЬ 1,5 или 2,5 ячеек.

ВАЖНО! На самом деле мы не объединяем ячейки, а растягиваем одну, например, на две позиции, поэтому после приминения тегов colspan или rowspan НЕОБХОДИМО УДАЛИТЬ ЛИШНИЕ ТЕГИ ЯЧЕЕК!

Примеры

Пример 1: colspan.

Все примеры приводятся на вышеупомянутой таблице.

Допустим необходимо объединить ячейки 1, 2 и 3 в одну строчку.

http://s48.radikal.ru/i119/0909/b2/3d8973f58c39.gif

Делается это следующим образом:

<table>
    <tr>
    <td colspan="3">ячейка 1</td>
    <td>ячейка 2</td>
    <td>ячейка 3</td>

    </tr>
    <tr>
    <td>ячейка 4</td>
    <td>ячейка 5</td>
    <td>ячейка 6</td>
    </tr>
    <tr>
    <td>ячейка 7</td>
    <td>ячейка 8</td>
    <td>ячейка 9</td>
    </tr>
    <tr>
    <td>ячейка 10</td>
    <td>ячейка 11</td>
    <td>ячейка 12</td>
    </tr>
    </table>

синее - тег, позволяющий нам объединить ячейки.
Мы вписали число 3, потому что объединяем 3 ячейки в одну.

красное необходимо удалить.

Финальный код будет выглядеть вот так:

<table>
    <tr>
    <td colspan="3">ячейка 1-3</td>
    </tr>
    <tr>
    <td>ячейка 4</td>
    <td>ячейка 5</td>
    <td>ячейка 6</td>
    </tr>
    <tr>
    <td>ячейка 7</td>
    <td>ячейка 8</td>
    <td>ячейка 9</td>
    </tr>
    <tr>
    <td>ячейка 10</td>
    <td>ячейка 11</td>
    <td>ячейка 12</td>
    </tr>
    </table>

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

Код:
<table border=3>
    <tr>
    <td colspan="3">ячейка 1-3</td>
    </tr>
    <tr>
    <td>ячейка 4</td>
    <td>ячейка 5</td>
    <td>ячейка 6</td>
    </tr>
    <tr>
    <td>ячейка 7</td>
    <td>ячейка 8</td>
    <td>ячейка 9</td>
    </tr>
    <tr>
    <td>ячейка 10</td>
    <td>ячейка 11</td>
    <td>ячейка 12</td>
    </tr>
    </table>

Пример 2: rowspan.

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

<table>
    <tr> <td colspan="3">ячейка 1-3</td> </tr>
    <tr> <td>ячейка 4</td> <td>ячейка 5</td> <td>ячейка 6</td> </tr>
    <tr> <td>ячейка 7</td> <td>ячейка 8</td> <td>ячейка 9</td> </tr>
    <tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
    </table>

Объединим ячейку 4 с ячейкой 7, а ячейку 5 с ячейкой 8.

http://i036.radikal.ru/0909/af/e73b2d9ce072.gif

Для этого вписываем тег rowspan в тег <td> (обозначающий начало ячейки) у ячейки 4 и ячейки 5.
Мы в обоих случаях объединяем 2 ячейки (4-ую с 7-ой, а 5-ую с 8-ой), поэтому вписывать надо: rowspan="2"
(Если бы мы объединяли, например, 4-ую, 7-ую и 10-ую ячейки, то вписывать нужно было бы rowspan="3", т.к. в таком случае, получалось бы объединение 3-х ячеек)

Получаем вот такой результат:

<table>
    <tr> <td colspan="3">ячейка 1-3</td> </tr>
    <tr> <td rowspan="2">ячейка 4</td> <td rowspan="2">ячейка 5</td> <td>ячейка 6</td> </tr>
    <tr>             <td>ячейка 7</td>            <td>ячейка 8</td>                <td>ячейка 9</td> </tr>
    <tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
    </table>

Теперь нужно удалить ячейки 7 и 8, отмеченные темно-синим цветом, т.к. мы уже обозначили тегом rowspan то, что ячейки 5 и 4 состоят из 2-х ячеек, нужно освободить им для этого место.

Итоговый код:

<table>
    <tr> <td colspan="3">ячейка 1-3</td> </tr>
    <tr> <td rowspan="2">ячейка 4+7</td> <td rowspan="2">ячейка 5+8</td> <td>ячейка 6</td> </tr>
    <tr> <td>ячейка 9</td> </tr>
    <tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
    </table>

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

Код:
<table border=3>
        <tr> <td colspan="3">ячейка 1-3</td> </tr>
        <tr> <td rowspan="2">ячейка 4+7</td> <td rowspan="2">ячейка 5+8</td> <td>ячейка 6</td> </tr>
        <tr> <td>ячейка 9</td> </tr>
        <tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
        </table>

Выводы из примеров: ПРАВИЛА ОБЪЕДИНЕНИЯ ЯЧЕЕК ТАБЛИЦ В HTML.

1. Объединение ячейки - это растягивание оной на определенное количество позиций, поэтому ячейки, которые раньше занимали это место НЕОБХОДИМО УДАЛЯТЬ.

2. colspan - для горизонтального объединения, rowspan - для вертикального объединения.
Иными словами можно сказать: сolspan - определяет количество столбцов, на которые простирается данная ячейка, а rowspan - количество рядов. (с)

3. Для того, чтобы легче ориентироваться, вписывайте тег colspan в самую левую ячейку из тех, которые объядиняете, а тег rowspan - в самую верхнюю из тех, которые объединяете. Потом будет проще вычислить лишние ячейки первоначального кода, которые необходимо удалить.

РАЗДЕЛ II. Форматирование таблицы в HTML.

Шаг 1. Фон таблицы, строк, ячеек.

Фон таблицы задается при помощи тегов bgcolor и background

bgcolor используется для цветовых значений (когда вы назначаете таблице или элементу таблицы цвет) и принимает вид:

bgcolor="#цвет"

background используется для фоновых изображений (установка картинки в качестве фона) и принимает вид:

background="ссылка_на_картинку"

Для того, чтобы задать фон всей таблицы, необходимо вписать подходящий элемент в тег начала таблицы: <table>

Для того, чтобы задать фон строки, необходимо вписать подходящий элемент в тег начала строки: <tr>

Для того, чтобы задать фон ячейки, необходимо вписать подходящий элемент в тег начала ячейки: <td>

Важно отметить, что в html-"раскрашивании" имеется иерархия расставления цветов.
В первую очередь отображаются цвета ячеек, во вторую очередь - строк, а фон, вписанный в код всей таблицы - в самую последнюю очередь.

Например, если в тег <table> вписать красный цвет, что задаст фоновый цвет для ВСЕЙ таблицы, а в одну из ее строк (<tr>) вписать синий цвет, то весть фон таблицы будет красным, но фон отмеченной строки будет синим.

Примеры

Пример 1: Фоновое изображение в таблице.

Осуществим следующую задачу:

http://s45.radikal.ru/i108/0909/7c/93dd098ffdd1.jpg

Для этого необходимо дописать в уже существующий код таблицы ссылку на изображение:

<table background="http://s51.radikal.ru/i131/0909/30/0effa6f32dc9.gif">
        <tr> <td colspan="3">ячейка 1-3</td> </tr>
        <tr> <td rowspan="2">ячейка 4+7</td> <td rowspan="2">ячейка 5+8</td> <td>ячейка 6</td> </tr>
        <tr> <td>ячейка 9</td> </tr>
        <tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
        </table>

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

Код:
<table border=1 background="http://s51.radikal.ru/i131/0909/30/0effa6f32dc9.gif">
        <tr> <td colspan="3">ячейка 1-3</td> </tr>
        <tr> <td rowspan="2">ячейка 4+7</td> <td rowspan="2">ячейка 5+8</td> <td>ячейка 6</td> </tr>
        <tr> <td>ячейка 9</td> </tr>
        <tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
        </table>

Такой же принцип можно использовать, встраивая картинки в строки и ячейки.
Для наглядности.

Строка:

<tr background="http://s51.radikal.ru/i131/0909/30/0effa6f32dc9.gif"> <td>ячейка</td> <td>ячейка</td> <td>ячейка</td> </tr>

Ячейка:

<tr> <td background="http://s51.radikal.ru/i131/0909/30/0effa6f32dc9.gif">ячейка</td> <td>ячейка</td> <td>ячейка</td> </tr>

Пример 1: Фоновый цвет в таблице.

Для наглядности зададим фон сразу нескольким элементам таблицы и добьемся следующего:

http://i016.radikal.ru/0909/a6/ebb2f041c835.gif

Сначала определим цвета.
Желтый цвет у нас имеет код f3f167 и оранжевый - f3ca67
(определить цвет можно в помощью photoshop или воспользоваться таблицей html-цветов)

Сначала окрашиваем ячейку 1-3. для этого, находим ее в коде:

<table background="http://s51.radikal.ru/i131/0909/30/0effa6f32dc9.gif">
        <tr> <td colspan="3">ячейка 1-3</td> </tr>
        <tr> <td rowspan="2">ячейка 4+7</td> <td rowspan="2">ячейка 5+8</td> <td>ячейка 6</td> </tr>
        <tr> <td>ячейка 9</td> </tr>
        <tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
        </table>

Как мы видим, благодаря тегу colspan, у нас только 1 ячейка в строке, поэтому нам все равно, куда ставить тег bgcolor: можно в строчку (tr), можно в ячейку(td) - без разницы. Я решила вписать код в строку:

<table background="http://s51.radikal.ru/i131/0909/30/0effa6f32dc9.gif">
        <tr  bgcolor="#f3f167"> <td colspan="3">ячейка 1-3</td> </tr>
        <tr> <td rowspan="2">ячейка 4+7</td> <td rowspan="2">ячейка 5+8</td> <td>ячейка 6</td> </tr>
        <tr> <td>ячейка 9</td> </tr>
        <tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
        </table>

теперь расставим тег bgcolor="#f3ca67" по ячейкам 4+7, 6 и 9.
Находим их в коде:

<table background="http://s51.radikal.ru/i131/0909/30/0effa6f32dc9.gif">
        <tr  bgcolor="#f3f167"> <td colspan="3">ячейка 1-3</td> </tr>
        <tr> <td rowspan="2">ячейка 4+7</td> <td rowspan="2">ячейка 5+8</td> <td>ячейка 6</td> </tr>
        <tr> <td>ячейка 9</td> </tr>
        <tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
        </table>

а теперь приписываем в тег начала ячейки <td> наш цвет:

<table background="http://s51.radikal.ru/i131/0909/30/0effa6f32dc9.gif">
        <tr  bgcolor="#f3f167"> <td colspan="3">ячейка 1-3</td> </tr>
        <tr> <td rowspan="2" bgcolor="#f3ca67">ячейка 4+7</td> <td rowspan="2">ячейка 5+8</td> <td bgcolor="#f3ca67">ячейка 6</td> </tr>
        <tr> <td bgcolor="#f3ca67">ячейка 9</td> </tr>
        <tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
        </table>

готово. =)

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

Код:
<table border=1 background="http://s51.radikal.ru/i131/0909/30/0effa6f32dc9.gif">
        <tr  bgcolor="#f3f167"> <td colspan="3">ячейка 1-3</td> </tr>
        <tr> <td rowspan="2" bgcolor="#f3ca67">ячейка 4+7</td> <td rowspan="2">ячейка 5+8</td> <td bgcolor="#f3ca67">ячейка 6</td> </tr>
        <tr> <td bgcolor="#f3ca67">ячейка 9</td> </tr>
        <tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
        </table>

Шаг 2. Границы таблицы. Ширина и цвет.

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

Вписывается он таким образом:

<table border=1> ... </table>

Цифра - это ширина границ.

Внимание!
border можно вставлять только в тег <table>! Невозможно задать одной ячейки одну ширину, а другой - другую!

Цвет границ определяется тегом bordercolor следующем образом:

<table border="1" bordercolor="#000000"> ... </table>

Синим отмечен цвет границ.

Внимание!
И опять же нельзя задать разный цвет границ для разных ячеек.
А так же невозможно встроить фоновое изображение (рисунок) в границы таблиц.

Примеры

Сделаем для уже существующей нашей таблицы жирную рамку пурпурного (для наглядности) цвета

http://i067.radikal.ru/0911/05/58c2e1d1d8d2.jpg

<table background="http://s51.radikal.ru/i131/0909/30/0effa6f32dc9.gif" border="5" bordercolor="#bd1da5">
        <tr  bgcolor="#f3f167"> <td colspan="3">ячейка 1-3</td> </tr>
        <tr> <td rowspan="2" bgcolor="#f3ca67">ячейка 4+7</td> <td rowspan="2">ячейка 5+8</td> <td bgcolor="#f3ca67">ячейка 6</td> </tr>
        <tr> <td bgcolor="#f3ca67">ячейка 9</td> </tr>
        <tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
        </table>

красным отмечены необходимые теги
синим отмечена ширина границ
розовым отмечен цвет, который был выбран для границ.

можете вставить этот код, чтобы посмотреть, что получилось.

Шаг 3. Ширина и высота таблицы. Ширина и высота ячеек таблицы.

если вы вставляли код таблицы, чтобы посмотреть, что же получается вы видели следующее:

http://i059.radikal.ru/0911/e0/ba70559148f7t.jpg

Резонный вопрос: как увеличить размеры таблицы?
делается это тегами width (для ширины) и height (для высоты)

Форматируется таблица по ширине и высоте в пикселях или в процентах.

В пикселях это прописывается следующим образом:

height="35" width="50"

красным - обозначение тега
синим - значение ширины в пикселях

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

Делается это так:

width="100%"

красным - обозначение тега
синим - значение ширины в процентах

Примеры

Пример 1: Растягиваем таблицу по ширине в процентах.

Добьемся следующего: растянем таблицу по ширине на всю допустимую область, а первой и последней колонке уделим минимум места, оставив большее пространство для колонке по центру.

http://i071.radikal.ru/0911/11/e5fd3f1bf8b3.jpg

В код этой таблицы (из кода убраны теги задающие цвет и фон таблицы для наглядности в рассмотрении тегов) вписываем width="100%", чтобы растянуть ее на всю доступную ширину:

<table border=3 width="100%">
        <tr> <td colspan="3">ячейка 1-3</td> </tr>
        <tr> <td rowspan="2">ячейка 4+7</td> <td rowspan="2">ячейка 5+8</td> <td>ячейка 6</td> </tr>
        <tr> <td>ячейка 9</td> </tr>
        <tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>

теперь таблица выглядит вот так:

http://i055.radikal.ru/0911/11/a066f4b8fa47t.jpg

Следующая задача - задать ширину колонкам.
Для этого ищем самые верхние ячейки, с которых начинаются колонки. Как видно, ячейка 1-3 нам не поможет, потому что она идет одной строкой. Нам нужны ячейки 4+7, 5+8 и 6.
Для начала, определимся, насколько широкой должна быть самая большая колонка (а самая большая колонка начинается с ячейки 5+8). Мною было принято решение растянуть ее до 60%. Ищем ее в коде и присваиваем значение:

<table border=3 width="100%">
        <tr> <td colspan="3">ячейка 1-3</td> </tr>
        <tr> <td rowspan="2">ячейка 4+7</td> <td rowspan="2" width="60%">ячейка 5+8</td> <td>ячейка 6</td> </tr>
        <tr> <td>ячейка 9</td> </tr>
        <tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>

Теперь вспоминаем математику: у нас есть таблица в 100% места, 60% мы уже выделили центральной колонке: 100 - 60 = 40.
у нас осталось 2 колонки, следовательно: 40 / 2 = 20.
Итого: на каждую ячейку нам нужно выделить по 20% места.

<table border=3 width="100%">
        <tr> <td colspan="3">ячейка 1-3</td> </tr>
        <tr> <td rowspan="2" width="20%">ячейка 4+7</td> <td rowspan="2" width="60%">ячейка 5+8</td> <td>ячейка 6</td> </tr>
        <tr> <td>ячейка 9</td> </tr>
        <tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>

Мы достигли желаемого результата:
http://s54.radikal.ru/i143/0911/fb/47d8a2a01f94t.jpg

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

Например, если мы задали всей таблице (таблица состоит из 2-х колонок) ширину 80%, а одной из ячеек в колонке ширину 20%, то очевидно, что вторая будет занимать 60%. (80 - 20 = 60)

Точно так же очевидно, что ширина нижестоящих ячеек будет равна заданной вышестоящим.
просто геометрически невозможно растянуть две разные ячейку из ОДНОЙ И ТОЙ ЖЕ колонки на разную величину. это уже совсем другая таблица получится и таких эффектов мы достигаем с помощью тега colspan - никогда это не путайте!.

Пример 2: Задаем фиксированную высоту и ширину в пикселях.

Сделаем таблицу высотой 500 пкс и шириной 800 пкс, а так же прочими величинами ширины и высоты, отмеченными на рисунке:

http://s58.radikal.ru/i159/0911/e6/bbdbe9635c2b.jpg

Для начала разберемся со всеми характеристиками ширины.
1. Задаем ширину всей таблицы:

<table border=3 width="800">
        <tr> <td colspan="3">ячейка 1-3</td> </tr>
        <tr> <td rowspan="2">ячейка 4+7</td> <td rowspan="2">ячейка 5+8</td> <td>ячейка 6</td> </tr>
        <tr> <td>ячейка 9</td> </tr>
        <tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>

Результат:
http://s41.radikal.ru/i094/0911/99/e3783293c523t.jpg

2. Задаем ширину первой колонки.
Для этого выбираем самую верхнюю ячейку колонки - ячейка 4+7

<table border=3 width="800">
        <tr> <td colspan="3">ячейка 1-3</td> </tr>
        <tr> <td rowspan="2" width="150">ячейка 4+7</td> <td rowspan="2">ячейка 5+8</td> <td>ячейка 6</td> </tr>
        <tr> <td>ячейка 9</td> </tr>
        <tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>

Результат:
http://i080.radikal.ru/0911/1d/20ce777ce3c5t.jpg

3. Тоже самое делаем со второй колонкой. (ячейка 5+8)

<table border=3 width="800">
        <tr> <td colspan="3">ячейка 1-3</td> </tr>
        <tr> <td rowspan="2" width="150">ячейка 4+7</td> <td rowspan="2" width="500">ячейка 5+8</td> <td>ячейка 6</td> </tr>
        <tr> <td>ячейка 9</td> </tr>
        <tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>

Результат:
http://s42.radikal.ru/i098/0911/70/947004cc911ct.jpg

На этом работа с шириной ячеек таблиц закончена!
Почему не вписана ширина последней ячейки?
Потому что очевидно, что 800 - 500 - 150 = 150. Математику нужно знать. =)
Мы могли задать ширину последней ячейки, но тогда не нужно было бы вписывать в тег <table> ширину всей таблицы. Это было бы излишним, ведь очевидно, что, просуммировав ширину всех ячеек, мы получаем ширину всей таблицы.

Теперь необходимо разобраться с высотой таблицы.
Для этого берем самые крайние ячейки: 1-3, 4+7 и 10.

1. Фиксируем по высоте ячейку 1-3 (ее, кстати, можно зафиксировать и через тег tr и через тег td - без разницы, ведь это единственная ячейка в строке):

<table border=3 width="800">
        <tr> <td colspan="3" height="100">ячейка 1-3</td> </tr>
        <tr> <td rowspan="2" width="150">ячейка 4+7</td> <td rowspan="2" width="500">ячейка 5+8</td> <td>ячейка 6</td> </tr>
        <tr> <td>ячейка 9</td> </tr>
        <tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>

Результат:
http://i028.radikal.ru/0911/6f/2e7df1c9e38et.jpg

2. Фиксируем по высоте ячейку 4+7

тут важно отметить, что терез тег строки (tr) нельзя фиксировать высоту, т.к. эта ячейка является объединением 2-х ячеек из разных строк. Ваша таблица от таких "номеров" примет непредсказуемый вид. А, зафиксировав ячейку, мы можем быть уверены, что все, что находится после нее по горизонтали примет такую же высоту.

<table border=3 width="800">
        <tr> <td colspan="3" height="100">ячейка 1-3</td> </tr>
        <tr> <td rowspan="2" width="150" height="300">ячейка 4+7</td> <td rowspan="2" width="500">ячейка 5+8</td> <td>ячейка 6</td> </tr>
        <tr> <td>ячейка 9</td> </tr>
        <tr> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>

Результат:
http://s40.radikal.ru/i089/0911/ab/3835998d1110t.jpg

3. Фиксируем по высоте последнюю строчку.

Для разнообразия ячейку 10 я зафиксирую через тег строки, это позволительно, т.к. в строке нет никаких объединений тегом rowspan

<table border=3 width="800">
        <tr> <td colspan="3" height="100">ячейка 1-3</td> </tr>
        <tr> <td rowspan="2" width="150" height="300">ячейка 4+7</td> <td rowspan="2" width="500">ячейка 5+8</td> <td>ячейка 6</td> </tr>
        <tr> <td>ячейка 9</td> </tr>
        <tr height="100"> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>

Результат:
http://s40.radikal.ru/i089/0911/ab/3835998d1110t.jpg

Все, таблица готова.
Теперь можно, например, вставить в нее фоновое изображение размером 800*500:

http://i063.radikal.ru/0911/94/91b41c105276t.jpg

Код:
<table border=3 width="800" [b]background="http://i051.radikal.ru/0911/a4/f4c815cfcf1d.jpg"[/b]>
        <tr> <td colspan="3" height="100">ячейка 1-3</td> </tr>
        <tr> <td rowspan="2" width="150" height="300">ячейка 4+7</td> <td rowspan="2" width="500">ячейка 5+8</td> <td>ячейка 6</td> </tr>
        <tr> <td>ячейка 9</td> </tr>
        <tr height="100"> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>

Шаг 4. Выравнивание текста таблицы.

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

Делается это с помощью атрибута valign.

для расположения содержимого ячейки вверху:

valign="top"

для расположения содержимого ячейки внизу:

valign="bottom"

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

valign="middle"

Примеры

Добьемся следующего результата:

http://i032.radikal.ru/0911/c4/d0d3d1f4e916.jpg

1. "Поднимаем" текст в ячейке 1-3

<table border=3 width="800">
        <tr> <td colspan="3" height="100" valign="top">ячейка 1-3</td> </tr>
        <tr> <td rowspan="2" width="150" height="300">ячейка 4+7</td> <td rowspan="2" width="500">ячейка 5+8</td> <td>ячейка 6</td> </tr>
        <tr> <td>ячейка 9</td> </tr>
        <tr height="100"> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>

Результат:
http://s53.radikal.ru/i142/0911/f6/fee8a8142a9bt.jpg

2. "Опускаем" текст в ячейках 10, 11 и 12

Как мы видим, эти ячейки находятся в одной строке, следовательно мы можем не вписывать атрибут в каждую ячейку (<td>), а 1 раз прописать его в строке (<tr>).

(а если вам понадобится сразу все надписи во всех ячейках держать сверху или снизу, просто вписывайте атрибут в тег <table>)

<table border=3 width="800">
        <tr> <td colspan="3" height="100" valign="top">ячейка 1-3</td> </tr>
        <tr> <td rowspan="2" width="150" height="300">ячейка 4+7</td> <td rowspan="2" width="500">ячейка 5+8</td> <td>ячейка 6</td> </tr>
        <tr> <td>ячейка 9</td> </tr>
        <tr height="100" valign="bottom"> <td>ячейка 10</td> <td>ячейка 11</td> <td>ячейка 12</td> </tr>
</table>

Результат:
http://i021.radikal.ru/0911/33/1bd9ffa3aebct.jpg

Шаг 4. Выравнивание ячеек таблицы. Расстояние между ячейками. Отступ текста относительно границ ячеек.

Выравнивание ячеек таблицы и содержимого ячеек осуществляется благодаря атрибутам cellspacing и cellpadding.

cellspacing отвечает за расстояние ячеек относительно друг друга и ширину границ между ними.
Значение этого тега задается в пикселях:

cellspacing="1"

Если вы хотите, чтобы границ между ячейками не было вообще, то необходимо задать для атрибута cellspacing значение "0":

<table cellspacing="0">
....
</table>

С помощью атрибута cellpadding вы можете контролировать отступ содержимого ячеек от границ между ячейками.
Значение этого атрибута тоже задается в пикселях:

cellpadding="5"

Примеры

Для примера берем вот такую таблицу (для наглядности нужно задать цвета ячейкам, чтобы были заметны изменения):
http://i056.radikal.ru/0912/9d/b1f1c0b97179.jpg
Вот ее исходный код, который мы будем менять:

Код:
<table width="500">
        <tr> <td colspan="3" height="50" valign="top" bgcolor="#ffc600">ячейка 1-3</td> </tr>
        <tr> <td rowspan="2" width="50" height="100" bgcolor="#e57700">ячейка 4+7</td> <td rowspan="2" width="250" bgcolor="#548a00">ячейка 5+8</td> <td bgcolor="#e57700">ячейка 6</td> </tr>
        <tr> <td bgcolor="#9d54cc">ячейка 9</td> </tr>
        <tr height="50" valign="bottom"> <td bgcolor="#548a00">ячейка 10</td> <td bgcolor="#ffc600">ячейка 11</td> <td bgcolor="#548a00">ячейка 12</td> </tr>
</table>

Пример 1: Убираем границы между ячейками.
Добьемся такого результата:

http://i010.radikal.ru/0912/cb/6a51764b2ee0.jpg

<table width="500" cellspacing="0">
        <tr> <td colspan="3" height="50" valign="top" bgcolor="#ffc600">ячейка 1-3</td> </tr>
        <tr> <td rowspan="2" width="50" height="100" bgcolor="#e57700">ячейка 4+7</td> <td rowspan="2" width="250" bgcolor="#548a00">ячейка 5+8</td> <td bgcolor="#e57700">ячейка 6</td> </tr>
        <tr> <td bgcolor="#9d54cc">ячейка 9</td> </tr>
        <tr height="50" valign="bottom"> <td bgcolor="#548a00">ячейка 10</td> <td bgcolor="#ffc600">ячейка 11</td> <td bgcolor="#548a00">ячейка 12</td> </tr>
</table>

можно сравнить результат:

было

стало

http://i051.radikal.ru/0912/16/b2f34ab871f5t.jpg

http://s48.radikal.ru/i120/0912/68/7a25f4249525t.jpg

Пример 2: Отодвигаем содержимое ячейки от краев.

Добьемся такого результата:

http://s52.radikal.ru/i138/0912/71/e69181f2dd60.jpg

<table width="500" cellspacing="0" cellpadding="10">
        <tr> <td colspan="3" height="50" valign="top" bgcolor="#ffc600">ячейка 1-3</td> </tr>
        <tr> <td rowspan="2" width="50" height="100" bgcolor="#e57700">ячейка 4+7</td> <td rowspan="2" width="250" bgcolor="#548a00">ячейка 5+8</td> <td bgcolor="#e57700">ячейка 6</td> </tr>
        <tr> <td bgcolor="#9d54cc">ячейка 9</td> </tr>
        <tr height="50" valign="bottom"> <td bgcolor="#548a00">ячейка 10</td> <td bgcolor="#ffc600">ячейка 11</td> <td bgcolor="#548a00">ячейка 12</td> </tr>
</table>

Теперь сравним:

было

стало

http://s48.radikal.ru/i120/0912/68/7a25f4249525t.jpg

http://i059.radikal.ru/0912/78/9765f15e6a9ft.jpg

источник

Теги: таблицы, хтмл-таблица, таблица в объявлении, заказать таблицу, table

+1

241

Здравия, с=
1. Ссылка:
Коты - Воители: Тени Прошлого
2. Ширина форума:
700px.
3. Эскизы:

Эскиз – 6 вкладок.

http://se.uploads.ru/fzXmM.png
http://se.uploads.ru/LiOft.png
http://se.uploads.ru/g1eLv.png
http://se.uploads.ru/lpDKL.png
http://se.uploads.ru/rdaLm.png
http://se.uploads.ru/27nT1.png

4. Границы у таблицы:
Прокрутки указаны жёлтым цветом, границы показаны на эскизе, но в реале не должны быть видны, за исключением основной границы. Картинки где надо вставим сами.
5. Дополнительные элементы:
Ссылки также показаны.
6. Желаемая высота таблицы:
Высота – фиксированная 270.

0

242

Кристиан
ДЕМО

В объявление
Код:
<!--Переключатель вкладок-->
<script type="text/javascript">
$(document).ready(function() {
$("div.#MenuTxT div.submenutext").hide();
<!--$(".tabs span:first").addClass("active").show(); -->
$("div.#MenuTxT div.submenutext:first").show();
$("div.#menu span").click(function() {
    $("div.#menu span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("div.#MenuTxT div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $("div."+activeDiv).fadeIn();
    return false; });
});
</script>

<style>

/*Все заголовки*/
.submenutext h2 {
  display: block !important;
  font-family: verdana !important;
  font-size: 11px !important;
  font-weight: bold !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: none !important;
}


/*Стиль переключателя*/

/*настройки текста названий вкладок*/
#menu { 
  color: rgba(92, 70, 48, 0.96);
  font-weight: bold;
  padding: 0;
  text-align: center;
  font-family: times new roman;
  font-size: 12px; 
  letter-spacing: 1px;
}

#menu span {
  cursor: pointer;
  height: auto;
  margin: 0 5px;
}

/*делает менюшку выделенной вкладки прозрачнее*/
#menu .tabactive {
  opacity: 0.7; 
}

/*высота вкладок, цвет и толщина общей границы*/
#MenuTxT { 
  border: 2px solid rgba(92, 70, 48, 0.66); 
  border-radius: 10px;
  height: 270px;
  margin-bottom: 0;
  text-align: center;
}

.submenutext {
display: none; /*прячет вкладки, не убирать*/
}

 .prokrytka {
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 10px;
}

/*1 вкладка*/
#sm1 .prokrytka {
  float: left;
  height: 230px;
  width: 60%;
}

#sm1 .ssylki {
  float: right;
  width: 37%;
}

#sm1 .ssylki a {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  display: block;
  margin: 4px;
  padding: 4px;
  width: 80%;
}

/*2 вкладка*/
#sm2 .prokrytka {
  float: left;
  height: 230px;
  width: 45%;
}

#sm2 .prokrytka:nth-child(3) {
  float: right;
  height: 180px;
  margin-right: 5px;
}
#sm2 .ssylki {
  float: right;
  margin-right: 5px;
  padding: 20px;
  vertical-align: middle;
  width: 45%;
}


/*3 вкладка*/
#sm3 .ssylki {
  display: inline-block;
  vertical-align: top;
  width: 32%;
}
#sm3 .ssylki a {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  display: block;
  margin: 4px;
  padding: 4px;
}

/*4 вкладка*/
#sm4 .prokrytka {
  display: inline-block;
  height: 230px;
  width: 45%;
}

#sm4 .prokrytka img {
  float: left;
  margin-bottom: 5px;
}

.opis {
  display: block;
  float: right;
  height: 100px;
  margin-bottom: 5px;
  width: 200px;
}

/*5 вкладка*/
#sm5 div {
  display: inline-block;
  height: 230px;
  vertical-align: top;
  width: 31%;
}
#sm5 .ssylki img {
  margin: 3px;
}

/*6 вкладка*/

#sm6 .prokrytka:nth-child(3) {
    height: 170px;
    width: 468px;
}

#sm6 .prokrytka {
    float: left;
    height: 230px;
    width: 29%;
}

#sm6 .ssylki {
  display: block;
  float: right;
  height: 60px;
  width: 468px;
}

</style>



    <div id="menu">
<span alt="#sm1">ОБЪЯВЛЕНИЕ</span> 
<span alt="#sm2">НОВОСТИ</span> 
<span alt="#sm3">НАВИГАЦИЯ</span> 
<span alt="#sm4">АДМИНИСТРАЦИЯ</span> 
<span alt="#sm5">ДОСКА ПОЧЕТА</span> 
<span alt="#sm6">ПАРТНЕРЫ</span> 
</div>

   <div id="MenuTxT"  align="center" valign="top">
    <div id="submenu" align="center"> 

  <div id="sm1" class="submenutext" style="display:block;"><br/>
<div class="prokrytka">
<h2>Добро пожаловать!</h2>
текст текст текст
</div>
<div class="ssylki">
<br>
<h2>Акции</h2>
<br>
<a href="http://watahw.hutt.ru/viewforum.php?id=1">Тестовый форум</a>
<a href="http://watahw.hutt.ru/viewforum.php?id=1">Тестовый форум</a>
<a href="http://watahw.hutt.ru/viewforum.php?id=1">Тестовый форум</a>
<a href="http://watahw.hutt.ru/viewforum.php?id=1">Тестовый форум</a>
</div>
   </div>

     <div id="sm2" class="submenutext"><br/>
<div class="prokrytka">
<h2>Новости</h2>
</div>
<div class="prokrytka">
<h2>В игре</h2>
</div>
<div class="ssylki">
<a href="http://watahw.hutt.ru/viewforum.php?id=1">Тестовый форум</a>
<a href="http://watahw.hutt.ru/viewforum.php?id=1">Тестовый форум</a>
<a href="http://watahw.hutt.ru/viewforum.php?id=1">Тестовый форум</a>
</div>
    </div>

     <div id="sm3" class="submenutext"><br/>
<div class="ssylki">
<h2>Гостям</h2>
<a href="http://watahw.hutt.ru/viewforum.php?id=1">Тестовый форум</a>
<a href="http://watahw.hutt.ru/viewforum.php?id=1">Тестовый форум</a>
<a href="http://watahw.hutt.ru/viewforum.php?id=1">Тестовый форум</a>
<a href="http://watahw.hutt.ru/viewforum.php?id=1">Тестовый форум</a>
<a href="http://watahw.hutt.ru/viewforum.php?id=1">Тестовый форум</a>
<a href="http://watahw.hutt.ru/viewforum.php?id=1">Тестовый форум</a>
</div>
<div class="ssylki">
<h2>Участникам</h2>
<a href="http://watahw.hutt.ru/viewforum.php?id=1">Тестовый форум</a>
<a href="http://watahw.hutt.ru/viewforum.php?id=1">Тестовый форум</a>
<a href="http://watahw.hutt.ru/viewforum.php?id=1">Тестовый форум</a>
<a href="http://watahw.hutt.ru/viewforum.php?id=1">Тестовый форум</a>
<a href="http://watahw.hutt.ru/viewforum.php?id=1">Тестовый форум</a>
<a href="http://watahw.hutt.ru/viewforum.php?id=1">Тестовый форум</a>
</div>
<div class="ssylki">
<h2>Реклама</h2>
<a href="http://watahw.hutt.ru/viewforum.php?id=1">Тестовый форум</a>
<a href="http://watahw.hutt.ru/viewforum.php?id=1">Тестовый форум</a>
<a href="http://watahw.hutt.ru/viewforum.php?id=1">Тестовый форум</a>
<a href="http://watahw.hutt.ru/viewforum.php?id=1">Тестовый форум</a>
</div>
    </div>

     <div id="sm4" class="submenutext"><br/>
<div class="prokrytka">
<h2>Админы</h2>
<br>
<img src="http://www.photoshop-master.ru/forum/public/style_avatars/new/man0016.jpg">
<div class="opis"><a href="http://watahw.hutt.ru/viewforum.php?id=1">Тестовый форум</a><br>
текст</div>
<img src="http://www.photoshop-master.ru/forum/public/style_avatars/new/man0016.jpg">
<div class="opis"><a href="http://watahw.hutt.ru/viewforum.php?id=1">Тестовый форум</a><br>
текст</div>
<img src="http://www.photoshop-master.ru/forum/public/style_avatars/new/man0016.jpg">
<div class="opis"><a href="http://watahw.hutt.ru/viewforum.php?id=1">Тестовый форум</a><br>
текст</div>

</div>
<div class="prokrytka">
<h2>Модеры</h2>
<br>
<img src="http://www.photoshop-master.ru/forum/public/style_avatars/new/man0016.jpg">
<div class="opis"><a href="http://watahw.hutt.ru/viewforum.php?id=1">Тестовый форум</a><br>
текст</div>
<img src="http://www.photoshop-master.ru/forum/public/style_avatars/new/man0016.jpg">
<div class="opis"><a href="http://watahw.hutt.ru/viewforum.php?id=1">Тестовый форум</a><br>
текст</div>
<img src="http://www.photoshop-master.ru/forum/public/style_avatars/new/man0016.jpg">
<div class="opis"><a href="http://watahw.hutt.ru/viewforum.php?id=1">Тестовый форум</a><br>
текст</div>
<img src="http://www.photoshop-master.ru/forum/public/style_avatars/new/man0016.jpg">
<div class="opis"><a href="http://watahw.hutt.ru/viewforum.php?id=1">Тестовый форум</a><br>
текст</div>
</div>
    </div>

     <div id="sm5" class="submenutext"><br/>
<div class="ssylki">
<br>
<h2>Лучшие игроки</h2>
<br>
<img src="http://cs624422.vk.me/v624422248/15c18/_D9kgspAn_s.jpg">
<img src="http://cs624422.vk.me/v624422248/15c18/_D9kgspAn_s.jpg">
<img src="http://cs624422.vk.me/v624422248/15c18/_D9kgspAn_s.jpg">
<img src="http://cs624422.vk.me/v624422248/15c18/_D9kgspAn_s.jpg">
<img src="http://cs624422.vk.me/v624422248/15c18/_D9kgspAn_s.jpg">
<img src="http://cs624422.vk.me/v624422248/15c18/_D9kgspAn_s.jpg">
</div>
<div class="prokrytka">
<h2>Лучший пост</h2>
текст <a href="http://watahw.hutt.ru/viewforum.php?id=1">Тестовый форум</a>
<br>
</div>
<div class="ssylki">
<br>
<h2>Активисты</h2>
<br>
<img src="http://cs624422.vk.me/v624422248/15c18/_D9kgspAn_s.jpg">
<img src="http://cs624422.vk.me/v624422248/15c18/_D9kgspAn_s.jpg">
<img src="http://cs624422.vk.me/v624422248/15c18/_D9kgspAn_s.jpg">
<img src="http://cs624422.vk.me/v624422248/15c18/_D9kgspAn_s.jpg">
<img src="http://cs624422.vk.me/v624422248/15c18/_D9kgspAn_s.jpg">
<img src="http://cs624422.vk.me/v624422248/15c18/_D9kgspAn_s.jpg">
</div>
    </div>

     <div id="sm6" class="submenutext"><br/>
<div class="prokrytka">
<h2>Баннерообмен</h2>
<br>
</div>
<div class="prokrytka">
<h2>Партнеры</h2>
<br>
</div>
<div class="ssylki">
огромный баннер
</div>

    </div>
</div>
</div>

Можно то, что в тегах <style></style> вынести в стиль (без тегов уже), ничего не изменится, а все-таки правильнее.

0

243

1. Secrets Of Palace Coups/Тайны Дворцовых Переворотов
2. Честно, не знаю о.о но дизайн уже сделан и ни чего меняться не будет. ( Если то конечно поможет)
3. http://i051.radikal.ru/1502/b8/173f57d99e6c.jpg
4. границы у таблицы: есть/нет
5. без фона (прозрачная), без прокрутки
6. растягивается по содержимому)
7.  -

0

244

Васька
временное демо тут: http://watahw.hutt.ru/

В объявление
Код:
<style>
.stolb {
  display: inline-block;
  padding: 5px;
  text-align: center;
  vertical-align: top;
  width: 30%;
}
.stolb h2 {
  color: black;
  display: block !important;
  font-size: 14px;
  margin: 0 0 10px !important;
  padding: 0 !important;
}

.stolb p {
  margin-top: 19px;
}
.best {
  margin-top: 20px;
}
</style>

<div class="stolb">
<h2>ADMINS GROUP</h2>
<p><img src="http://www.photoshop-master.ru/forum/public/style_avatars/new/man0016.jpg"><br>
<img src="http://www.photoshop-master.ru/forum/public/style_avatars/new/man0016.jpg"><br>
<img src="http://www.photoshop-master.ru/forum/public/style_avatars/new/man0016.jpg"><br>
<img src="http://www.photoshop-master.ru/forum/public/style_avatars/new/man0016.jpg"><br>
</p>
</div>
<div class="stolb">
<h2>WELCOME</h2>
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст 
</div>
<div class="stolb">
<h2>НАВИГАЦИЯ</h2>
<a href="http://watahw.hutt.ru/viewforum.php?id=1">Тестовый форум</a><br>
<a href="http://watahw.hutt.ru/viewforum.php?id=1">Тестовый форум</a><br>
<a href="http://watahw.hutt.ru/viewforum.php?id=1">Тестовый форум</a><br>

<div class="best">
<h2>THE BEST</h2>
<p>
<img src="http://www.photoshop-master.ru/forum/public/style_avatars/new/man0016.jpg">
</p>
</div>
</div>

+1

245

спасибо огромное)

0

246

Здравствуйте! Нужна таблица в шапку.

1. ссылка на форум
http://testopuk.rusff.ru/
2. ширина форума
дизайн уже готов, в примерах и картинках использовано настоящее изображение места для таблицы
3. добротный рисунок с границами

---

http://savepic.su/4987397.jpg
http://savepic.su/5037572.jpg
http://savepic.su/5019140.jpg
http://savepic.su/5043719.jpg

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

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

http://savepic.su/5023239.png
http://savepic.su/4981255.png
http://savepic.su/5044742.png
http://savepic.su/5036550.png

0

247

Люди, помогите кто-нибудь! Очень нужно

0

248

1. Ссылка:
Волчьи Истории | Наследие
2. Ширина форума:
700px.
3. Эскизы:

клац

http://se.uploads.ru/KtIqW.png
http://se.uploads.ru/LAjrm.png
http://se.uploads.ru/3rJco.png
http://se.uploads.ru/yDaB7.png
http://se.uploads.ru/oJ9k6.png
http://se.uploads.ru/q6Vlz.png

4. Границы у таблицы:
Только основная, довольно таки схожа с таблицей Кристиана.
5. Дополнительные элементы:
Прокрутка указана синим цветом и подписана, картинки вставим сами.
6. Желаемая высота таблицы:
Высота – фиксированная 270.

0

249

сид
Glen
Прошу прощения за задержку, сегодня будут таблички.

+1

250

сид
ДЕМО

в объявление
Код:
<script type="text/javascript">
$(document).ready(function() {
$("div.#MenuTxT div.submenutext").hide();
<!--$(".tabs span:first").addClass("active").show(); -->
$("div.#MenuTxT div.submenutext:first").show();
$("div.#menu span").click(function() {
    $("div.#menu span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("div.#MenuTxT div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $("div."+activeDiv).fadeIn();
    return false; });
});
</script>

<!-- Таблица -->
<style>
#pun-announcement {
  height: 180px;
  margin-left: -10px;
  position: absolute;
  top: 330px;
  width: 900px;
}

#menu {
  float: left;
  height: 180px;
  vertical-align: middle;
  width: 215px;
}

#menu span {
  cursor: pointer;
  display: block;
  height: 35px;
  margin-bottom: 14px;
  width: 214px;
}

.tabactive {
    opacity: 0.8; /* делает активную кнопку прозрачнее */
}

.submenutext {
  color: #790000;
  display: none;
  float: right;
  font-weight: bold;
  height: 180px;
  margin: 0;
  padding: 0;
  width: 650px;
}

#sm1 .stolb:nth-child(1), #sm2, #sm3, #sm4 {
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3); /* светлый фон везде кроме ссылок */
}

.stolb h2 {
  border: medium none !important;
  margin: 0 !important;
  padding-top: 6px !important;
}

.stolb {
  display: inline-block;
  height: 180px;
  overflow: hidden;
  vertical-align: top;
  width: 49%;
}

.stolb .tekst {
  padding: 6px;
  text-align: justify;
}

.stolb img {
  padding-top: 10px;
}

#sm1 .stolb a {
  background: none repeat scroll 0 0 rgba(192, 148, 34, 0.68);
  border-radius: 4px;
  border-right: 4px solid rgba(0, 0, 0, 0.5);
  color: black;
  display: block;
  font-weight: bold;
  margin: 3px;
  padding: 3px;
  transition: all 0.7s ease-out 0s;
}

#sm1 .stolb a:hover {
    background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.9);
    color: rgba(201, 193, 18, 0.9);
    letter-spacing: 3px;
}

#sm2 .tekst {
  text-align: center;
}

#sm2 .tekst img {
  margin: 0 5px; /* отступ между мелкими картинками во второй вкладке */
}

#sm4 .tekst {
  height: 180px;
  overflow-y: scroll;
}

#sm4 .tekst img {
  margin: 3px;
}
</style>


    <div id="menu">
<span alt="#sm1"><img src="http://savepic.su/5023239.png"></span> <!--1 кнопка-->
<span alt="#sm2"><img src="http://savepic.su/4981255.png"></span> <!--2 кнопка-->
<span alt="#sm3"><img src="http://savepic.su/5044742.png"></span> <!--3 кнопка-->
<span alt="#sm4"><img src="http://savepic.su/5036550.png"></span> <!--4 кнопка-->
</div>

   <div id="MenuTxT"  align="center" valign="top"  style="padding: 0;">
    <div id="submenu" align="center"> 
   
  <div id="sm1" class="submenutext" style="display:block;">
   <div class="stolb">
<div class="tekst">
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст ммтекст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст 
</div>
   </div>
   
   <div class="stolb">
<h2> ПОЛЕЗНЫЕ ССЫЛКИ</h3>
<a href="http://qssupport.ru/viewtopic.php?id=2916&p=10#p63157">Ссылка1</a>
<a href="http://qssupport.ru/viewtopic.php?id=2916&p=10#p63157">Ссылка2</a>
<a href="http://qssupport.ru/viewtopic.php?id=2916&p=10#p63157">Ссылка3</a>
<a href="http://qssupport.ru/viewtopic.php?id=2916&p=10#p63157">Ссылка4</a>
<a href="http://qssupport.ru/viewtopic.php?id=2916&p=10#p63157">Ссылка5</a>
<a href="http://qssupport.ru/viewtopic.php?id=2916&p=10#p63157">Ссылка6</a>
   </div>
  </div>

     <div id="sm2" class="submenutext">
   <div class="stolb">
<img src="http://storage.webonrails.ru/images/ya/ec/5x/yaec5xht8jiia5smns94anp6syuzvlm7.jpg">
<div class="tekst" >
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg">
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg">
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg">

   </div>
  </div>

   <div class="stolb">
<img src="http://storage.webonrails.ru/images/ya/ec/5x/yaec5xht8jiia5smns94anp6syuzvlm7.jpg">
<div class="tekst" >
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg">
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg">
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg">
</div>
   </div>
</div>

     <div id="sm3" class="submenutext">
   <div class="stolb">
<div class="tekst">
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст ммтекст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст 
</div>
   </div>
   <div class="stolb">
<img src="http://storage.webonrails.ru/images/ya/ec/5x/yaec5xht8jiia5smns94anp6syuzvlm7.jpg">
<div class="tekst">
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст ммтекст текст текст текст текст текст текст текст текст 
</div>
   </div>
     </div>

  <div id="sm4" class="submenutext">
     <div class="tekst">
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg">
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg">
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg">
     </div>
  </div>

</div>
</div>

Какой эффект не сказали, так что на мой вкус.
И добавьте в стиль правило:

Код:
.title-logo-tdr {
  left: 0;
  position: absolute;
  top: 0;
}

.title-logo-tdr a {
  color: #fff !important;
}

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

+1

251

Ichimaru Gin
Ох, огромнейшее Вам спасибо! Выручили так выручили)
Один вопрос - в какое окно стиля вставлять? В конец?

0

252

1. Оутион: Город криминала
2. 880. Дизайн меняться не будет
3.

Три слайда

http://se.uploads.ru/t/h6u3d.png
http://se.uploads.ru/t/apc6W.png
http://se.uploads.ru/t/BxlI7.png

4. границы у таблицы: есть/нет
5. В первом слайде при наведении на картинки должно появляться окошко с текстом.
6. Фиксируемая. 340 рх
7. Все картинки вставим самостоятельно

0

253

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

Один вопрос - в какое окно стиля вставлять? В конец?

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

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

7. Все картинки вставим самостоятельно

Дело не в том, что сами. а в том, чтобы наглядно видеть как становятся эти картинки, мне все равно надо вставлять и, если вы не даете шаблон - искать в интернете, это дополнительная работа.

0

254

Ichimaru Gin

Шаблоны картинок

Второй слайд. Во втором столбце под заголовком картинка 100х100
http://se.uploads.ru/t/Dt9lm.jpg
http://se.uploads.ru/t/X9NK7.jpg
http://se.uploads.ru/t/uIYVs.jpg

0

255

Glen
ДЕМО

В объявление
Код:
<script type="text/javascript">
$(document).ready(function() {
$("div.#MenuTxT div.submenutext").hide();
<!--$(".tabs span:first").addClass("active").show(); -->
$("div.#MenuTxT div.submenutext:first").show();
$("div.#menu span").click(function() {
    $("div.#menu span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("div.#MenuTxT div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $("div."+activeDiv).fadeIn();
    return false; });
});
</script>

<!-- Таблица -->
<style>

/* общие настройки объявления */
#pun-announcement {
  height: 300px;
  margin: 0;
  padding: 0;
  text-align: center;
}

#pun-announcement .container {
  margin: 0 !important;
  width: 780px !important;
}
#pun-announcement h2 {
  display: none;
  height: 0;
}


/* переключатели */
#menu {
  display: block;
  height: 20px;
  text-align: center;
  width: 780px;
}

#menu span {
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  margin: 0 15px;
  text-transform: uppercase;
}

/* делает активную кнопку прозрачнее и подчеркнутой */
.tabactive {
  opacity: 0.8;
  text-decoration: underline;
}

/*правый неизменный текст */
#permanent {
  border: 2px solid #000000;
  border-radius: 15px;
  display: block;
  float: right;
  height: 260px;
  overflow: hidden;
  padding: 5px;
  vertical-align: top;
  width: 240px;
}

/* общие настройки вкладок и внутренних элементов */
#MenuTxT {
  border: 2px solid #000000;
  border-radius: 15px;
  display: block;
  float: left;
  height: 270px;
  width: 520px;
}

.submenutext {
  display: none;
  height: 260px;
  margin: 0;
  padding: 5px;
}

.stolb h3 {
  font-weight: bold;
  margin-bottom: 5px;
}

.stolb {
  display: inline-block;
  height: 260px;
  overflow: hidden;
  vertical-align: top;
}

.prokrytka {
  overflow-x: hidden;
  overflow-y: scroll;
  padding-right: 10px;
  text-align: justify;
}

/* 1 вкладка */
#sm1 .prokrytka {
  height: 230px;
}


/* 2 вкладка */
#sm2 .stolb {
  width: 49%;
}

#sm2 .stolb a {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  display: block;
  margin: 4px;
  padding: 6px;
  text-decoration: none;
  transition: all 0.7s ease-out 0s;
}

#sm2 .stolb a:hover {
    background: rgba(255, 255, 255, 0.5);
    font-weight: bold;
}


/* 3 вкладка */
#sm3 .stolb {
  width: 24%;
}

#sm3 .stolb img {
  height: 80px;
  width: 80px;
}

/* 4 вкладка */
#sm4 .stolb:nth-child(1) {
  width: 69%;
}
#sm4 .stolb:nth-child(2) {
  width: 30%;
}
#sm4 .prokrytka {
  height: 240px;
}

#sm4 .stolb a {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  display: block;
  margin: 4px;
  padding: 6px;
  text-decoration: none;
  transition: all 0.7s ease-out 0s;
}
#sm4 .stolb a:hover {
    background: rgba(255, 255, 255, 0.5);
    font-weight: bold;
}

/* 5 вкладка */
#sm5 .stolb:nth-child(1), #sm5 .stolb:nth-child(3)  {
  width: 38%;
}

#sm5 .stolb:nth-child(2)  {
  width: 20%;
}

#sm5 .stolb img {
  height: 70px;
  margin: 5px;
  width: 70px;
}


/* 6 вкладка */
#sm6 .stolb {
  display: block;
  height: 49%;
}
</style>


    <div id="menu">
<span alt="#sm1">Новости</span> <!--1 кнопка-->
<span alt="#sm2">Навигация</span> <!--2 кнопка-->
<span alt="#sm3">Администрация</span> <!--3 кнопка-->
<span alt="#sm4">В игре</span> <!--4 кнопка-->
<span alt="#sm5">Доска почета</span> <!--5 кнопка-->
<span alt="#sm6">Партнеры</span> <!--6 кнопка-->
</div>

<div id="permanent">
Здесь текст и он не меняется
</div>

<div id="MenuTxT"  align="center" valign="top"  style="padding: 0;">
 <div id="submenu" align="center"> 
   
  <div id="sm1" class="submenutext" style="display:block;">
   <div class="stolb">
<h3>Заголовок</h3>
    <div class="prokrytka">
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст ммтекст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст 
    </div>
   </div>
  </div>

     <div id="sm2" class="submenutext">
   <div class="stolb">
<h3>Гостям</h3>
<a href="http://qssupport.ru/viewtopic.php?id=2916&p=10#p63157">Ссылка1</a>
<a href="http://qssupport.ru/viewtopic.php?id=2916&p=10#p63157">Ссылка2</a>
<a href="http://qssupport.ru/viewtopic.php?id=2916&p=10#p63157">Ссылка3</a>
<a href="http://qssupport.ru/viewtopic.php?id=2916&p=10#p63157">Ссылка4</a>
<a href="http://qssupport.ru/viewtopic.php?id=2916&p=10#p63157">Ссылка5</a>
<a href="http://qssupport.ru/viewtopic.php?id=2916&p=10#p63157">Ссылка6</a>
<a href="http://qssupport.ru/viewtopic.php?id=2916&p=10#p63157">Ссылка7</a>
<a href="http://qssupport.ru/viewtopic.php?id=2916&p=10#p63157">Ссылка8</a>   
   </div>

   <div class="stolb">
<h3>Участникам</h3>
<a href="http://qssupport.ru/viewtopic.php?id=2916&p=10#p63157">Ссылка1</a>
<a href="http://qssupport.ru/viewtopic.php?id=2916&p=10#p63157">Ссылка2</a>
<a href="http://qssupport.ru/viewtopic.php?id=2916&p=10#p63157">Ссылка3</a>
<a href="http://qssupport.ru/viewtopic.php?id=2916&p=10#p63157">Ссылка4</a>
<a href="http://qssupport.ru/viewtopic.php?id=2916&p=10#p63157">Ссылка5</a>
<a href="http://qssupport.ru/viewtopic.php?id=2916&p=10#p63157">Ссылка6</a>
<a href="http://qssupport.ru/viewtopic.php?id=2916&p=10#p63157">Ссылка7</a>
<a href="http://qssupport.ru/viewtopic.php?id=2916&p=10#p63157">Ссылка8</a> 
   </div>
    </div>

     <div id="sm3" class="submenutext">
   <div class="stolb">
<h3>Имя-текст</h3>
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg"><br>
статус-текст<br><br>
<h3>Имя-текст</h3>
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg"><br>
статус-текст
   </div>

   <div class="stolb">
<h3>Имя-текст</h3>
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg"><br>
статус-текст<br><br>
<h3>Имя-текст</h3>
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg"><br>
статус-текст
   </div>

   <div class="stolb">
<h3>Имя-текст</h3>
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg"><br>
статус-текст<br><br>
<h3>Имя-текст</h3>
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg"><br>
статус-текст
   </div>

   <div class="stolb">
<h3>Имя-текст</h3>
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg"><br>
статус-текст<br><br>
<h3>Имя-текст</h3>
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg"><br>
статус-текст
   </div>

     </div>

  <div id="sm4" class="submenutext">
   <div class="stolb">
<h3>Сейчас в игре</h3>
    <div class="prokrytka">
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст ммтекст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст 
    </div>
   </div>
   <div class="stolb">
<h3>Квесты</h3>
<a href="http://qssupport.ru/viewtopic.php?id=2916&p=10#p63157">Ссылка1</a>
<a href="http://qssupport.ru/viewtopic.php?id=2916&p=10#p63157">Ссылка2</a>
<a href="http://qssupport.ru/viewtopic.php?id=2916&p=10#p63157">Ссылка3</a>
<a href="http://qssupport.ru/viewtopic.php?id=2916&p=10#p63157">Ссылка4</a>
   </div>
  </div>

  <div id="sm5" class="submenutext">
   <div class="stolb">
<h3>лучшие игроки</h3>
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg">
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg"><br>
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg">
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg"><br>
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg">
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg"><br>
   </div>
   <div class="stolb">
<h3>Лучший пост</h3>
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg"><br>
наверное тут будет начало поста текст текст и ссылка
<a href="http://qssupport.ru/viewtopic.php?id=2916&p=10#p63157">Читать дальше...</a>
   </div>
   <div class="stolb">
<h3>Активисты</h3>
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg">
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg"><br>
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg">
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg"><br>
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg">
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg"><br>
   </div>
  </div>

  <div id="sm6" class="submenutext">
   <div class="stolb">
<h3>Партнеры</h3>
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg">
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg">
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg">
   </div>
   <div class="stolb">
<h3>Банеры</h3>
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg">
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg">
<img src="http://img5.imgbb.ru/e/2/c/e2c7f6f8a23febc9ce1a069d50fccf4a.jpg">
   </div>
  </div>

</div>
</div>

Во втором окне стиля дублируются настройки шапки с ошибкой:

#pun-title table {
  background-image: url("http://co.forum4.ru/files/0011/75/f3/86754.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  height: 263px;
  width: 8350px;
}

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

0

256

Noel
ДЕМО
(в коде фон прозрачный, на демо серый, чтоб видны были границы картинок)

В объявление
Код:
<!-- Слайдер -->
<script src=http://co.forum4.ru/files/0011/e9/e1/27099.js></script>

<!-- Таблица -->
<script type="text/javascript">
$(document).ready(function() {
$("div.#MenuTxT div.submenutext").hide();
<!--$(".tabs span:first").addClass("active").show(); -->
$("div.#MenuTxT div.submenutext:first").show();
$("div.#menu span").click(function() {
    $("div.#menu span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("div.#MenuTxT div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $("div."+activeDiv).fadeIn();
    return false; });
});
</script>


<style>
/* настройки слайдера*/
#pun-announcement #slider {
	margin: 0 auto;
}
#pun-announcement #slides, #pun-announcement #control {
	display: inline-block;
        text-align: center;
}
#pun-announcement #slides {
  height: 300px;
  margin: 0;
  padding: 0;
  width: 260px;
}
#pun-announcement #control {
	vertical-align: middle;
}
#pun-announcement #control a {
  display: inline-block;
  height: 32px;
  text-decoration: none;
  width: 10px;
}

#next {
  background: url("http://www.armadaperm.ru/img/ar2.png") no-repeat scroll center center rgba(0, 0, 0, 0);
}
#prev {
  background: url("http://www.armadaperm.ru/img/ar2.png") no-repeat scroll center center rgba(0, 0, 0, 0);
}
#pun-announcement #control a:hover {

}

/* общие настройки объявления */
#pun-announcement {
  height: 370px;
  margin: 0;
  padding: 0;
  text-align: center;
}

#pun-announcement .container {
  margin: 0;
  padding: 0;
}

#pun-announcement h2 {
  display: none;
  height: 0;
}


/* переключатели */
#menu {
  display: block;
  height: 20px;
  text-align: center;
}

#menu span {
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  margin: 0 15px;
  text-transform: uppercase;
}

/* делает активную кнопку прозрачнее и подчеркнутой */
.tabactive {
  opacity: 0.8;
  text-decoration: underline;
}



/* общие настройки вкладок и внутренних элементов */

.submenutext {
  display: none;
  height: 300px;
  margin: 0;
  padding: 5px 15px;
}
.stolb h3 {
    font-size: 12px;
    font-weight: bold;
    height: 30px;
    color: #BD4631;
}

.stolb {
  display: inline-block;
  float: left;
  height: 300px;
  overflow: hidden;
  vertical-align: top;
}

.prokrytka {
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 5px 10px 5px 5px;
  text-align: justify;
}

/* всплывающий текст */
.hoverbox {
  cursor: default;
  display: inline;
}

.hoverbox a .preview 
{display: none;} 

.hoverbox a:hover .preview {
  background: none repeat scroll 0 0 rgba(189, 70, 49, 0.8);
  color: #fff;
  display: block;
  height: auto;
  margin-left: 50px;
  margin-top: -10px;
  padding: 5px;
  position: absolute;
  text-align: justify;
  width: 150px;
  z-index: 1;
}

.hoverbox li {
  display: inline-block;
  height: 100px;
  width: 100px;
}

/* 1 вкладка */
#sm1 .stolb:nth-child(1), #sm1 .stolb:nth-child(3) {
  width: 310px;
}
#sm1 .stolb:nth-child(2) {
  width: 230px;
}

#sm1 .stolb:nth-child(3) .prokrytka {
  float: right;
  height: 128px;
  width: 190px;
}
#sm1 .tekst {
  height: 130px;
}

/* 2 вкладка */
#sm2 .stolb:nth-child(1), #sm2 .stolb:nth-child(3) {
  width: 270px;
}
 
#sm2 .stolb:nth-child(2) {
  width: 308px;
}

#sm2 .stolb:nth-child(1) .prokrytka {
  height: 260px;
  margin-right: 10px;
}

#sm2 .stolb:nth-child(2) .prokrytka {
  height: 150px;
  margin-top: 8px;
}

#sm2 .stolb:nth-child(3) .prokrytka {
  height: 290px;
  margin-left: 10px;
}

/* 3 вкладка */
#sm3 .stolb:nth-child(1), #sm3 .stolb:nth-child(2) {
  width: 270px;
}
#sm3 .stolb:nth-child(3) {
  width: 300px;
}

#sm3 .prokrytka {
  height: 290px;
  margin-right: 10px;
}

#sm3 .stolb:nth-child(3) a {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 70%), linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 90%, rgba(255, 255, 255, 0.3)), linear-gradient(to right, rgba(125, 125, 125, 1), rgba(255, 255, 255, 0.9) 45%, rgba(125, 125, 125, 0.5)), linear-gradient(to right, rgba(125, 125, 125, 1), rgba(255, 255, 255, 0.9) 45%, rgba(125, 125, 125, 0.5)), linear-gradient(to right, rgba(223, 190, 170, 1), rgba(255, 255, 255, 0.9) 45%, rgba(223, 190, 170, 0.5)), linear-gradient(to right, rgba(223, 190, 170, 1), rgba(255, 255, 255, 0.9) 45%, rgba(223, 190, 170, 0.5));
  background-position: 200% 0px, 0 0px, 0 0px, 0 100%, 0 4px, 0 calc(100% - 4px);
  background-repeat: no-repeat;
  background-size: 200% 100%, auto auto, 100% 2px, 100% 2px, 100% 1px, 100% 1px;
  border-radius: 5px;
  box-shadow: 3px 10px 10px -10px rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.1);
  display: block;
  font-weight: bold;
  margin: 4px 0;
  outline: medium none;
  padding: 9px 0;
  position: relative;
  text-decoration: none;
  text-shadow: 1px 1px rgba(255, 255, 255, 0.5), 3px 7px 3px rgba(100, 100, 100, 0.3);
  width: 300px;
}

#sm3 .stolb:nth-child(3) a:hover {
  transition: .5s linear;
  background-position: -200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% - 4px);
}

#sm3 .stolb:nth-child(3) a:active {
  top: 1px;
}


</style>


    <div id="menu">
<span alt="#sm1">Слайд 1</span> <!--1 кнопка-->
<span alt="#sm2">Слайд 2</span> <!--2 кнопка-->
<span alt="#sm3">Слайд 3</span> <!--3 кнопка-->

</div>


<div id="MenuTxT"  align="center" valign="top"  style="padding: 0;">
 <div id="submenu" align="center"> 
   
  <div id="sm1" class="submenutext" style="display:block;">
   <div class="stolb">
 <div id="slider">
    	<table style="height: 300px;">
        <tr>
        	<td id="control"><a href="#" id="prev"></a></td>

        	<td id="slides">
            <div>
<img src="http://se.uploads.ru/Dt9lm.jpg">
            </div>

            <div>
<img src="http://se.uploads.ru/Dt9lm.jpg">
            </div>

            <div>
<img src="http://se.uploads.ru/Dt9lm.jpg">
            </div>

            <div>
<img src="http://se.uploads.ru/Dt9lm.jpg">
            </div>
        	</td>
        	
        	<td id="control"><a href="#" id="next"></a></td>
        </tr>
    	</table>
    </div>

   </div>

   <div class="stolb">
    <div class="tekst">
текст текст текст текст
    </div>
<h3>Заголовок</h3>
текст текст текст текст текст текст текст текст текст текст текст текст текст текст
<h3>Заголовок</h3>
текст текст текст текст текст текст текст текст текст текст текст текст текст текст
   </div>

   <div class="stolb">
<h3>Заголовок</h3>
<ul class="hoverbox">
<li>
<a href="http://unmasked.rusff.ru/profile.php?id=12">
<img border="0" src="http://se.uploads.ru/t/X9NK7.jpg"> <!-- тут первое изображение 100 -->
<div class="preview">текст описания тект описания текст описания текст описания </div><!-- тут описание -->
</a>
</li>
</ul>

<ul class="hoverbox">
<li>
<a href="http://unmasked.rusff.ru/profile.php?id=12">
<img border="0" src="http://se.uploads.ru/t/X9NK7.jpg"> <!-- тут первое изображение 100 -->
<div class="preview">текст описания тект описания текст описания текст описания </div><!-- тут описание -->
</a>
</li>
</ul>

<ul class="hoverbox">
<li>
<a href="http://unmasked.rusff.ru/profile.php?id=12">
<img border="0" src="http://se.uploads.ru/t/X9NK7.jpg"> <!-- тут первое изображение 100 -->
<div class="preview">текст описания тект описания текст описания текст описания </div><!-- тут описание -->
</a>
</li>
</ul>

<h3>Заголовок</h3>
<ul class="hoverbox">
<li>
<a href="http://unmasked.rusff.ru/profile.php?id=12">
<img border="0" src="http://se.uploads.ru/t/uIYVs.jpg"> <!-- тут первое изображение 100 -->
<div class="preview">текст описания тект описания текст описания текст описания </div><!-- тут описание -->
</a>
</li>
</ul>

     <div class="prokrytka">
текст текст текст
     </div>
   </div>
  </div>


     <div id="sm2" class="submenutext">
   <div class="stolb">
<h3>Заголовок</h3>
     <div class="prokrytka">
текст текст текст
     </div>
   </div>

   <div class="stolb">
<h3>Заголовок</h3>
<img src="http://se.uploads.ru/t/X9NK7.jpg">
<img src="http://se.uploads.ru/t/X9NK7.jpg">
<img src="http://se.uploads.ru/t/X9NK7.jpg">
     <div class="prokrytka">
текст текст текст
     </div>
   </div>

   <div class="stolb">
     <div class="prokrytka">
текст текст текст
     </div>
   </div>
    </div>

     <div id="sm3" class="submenutext">
      <div class="stolb">
     <div class="prokrytka">
текст текст текст
     </div>
   </div>
   <div class="stolb">
     <div class="prokrytka">
текст текст текст
     </div>
   </div>
   <div class="stolb">
<a href="http://qssupport.ru/viewtopic.php?id=2916&p=10#p63157">Ссылка1</a>
<a href="http://qssupport.ru/viewtopic.php?id=2916&p=10#p63157">Ссылка2</a>
<a href="http://qssupport.ru/viewtopic.php?id=2916&p=10#p63157">Ссылка3</a>
<a href="http://qssupport.ru/viewtopic.php?id=2916&p=10#p63157">Ссылка4</a>
<a href="http://qssupport.ru/viewtopic.php?id=2916&p=10#p63157">Ссылка5</a>
<a href="http://qssupport.ru/viewtopic.php?id=2916&p=10#p63157">Ссылка6</a>
<a href="http://qssupport.ru/viewtopic.php?id=2916&p=10#p63157">Ссылка7</a>
<a href="http://qssupport.ru/viewtopic.php?id=2916&p=10#p63157">Ссылка8</a>  
   </div>

     </div>



</div>
</div>

<!-- кусок слайдера должен быть ниже таблички -->
<script>
justSlider(
	$('#pun-announcement #slider'), 
	{
    left: $('#pun-announcement #control #prev'),
    right: $('#pun-announcement #control #next'),
    auto: 1000
	});

</script>

0

257

Ichimaru Gin
Похоже, нужно сделать прокрутку во всех блоках, так как текст более длинный не помещается(

0

258

Решено самостоятельно

Ichimaru Gin
Огромное спасибо. А теперь вопрос. Слайдер работает с перебоями, зацикливает одну и ту же картинку. Что с этим можно сделать?
http://indestructible.rusff.ru/

Отредактировано Noel (27.02.2015 12:04:41)

0

259

Ichimaru Gin
Теперь мне очень понадобилась прокрутка в пункты, где есть текст)
И если можно - прокрутка  должна быть тоненькой и черно-красной, как на зарубежных форумах.
Адрес - http://ohno.rusff.ru/
Заранее спасибо!

0

260

1. Sengoku Basara: Школа
2. Признаюсь, я не знаю, но знаю точно, дизайн не будет меняться.
3.

Тык-тык

http://se.uploads.ru/t/RUhZS.jpg
http://se.uploads.ru/t/y1frI.jpg
http://se.uploads.ru/t/oiPFn.jpg
http://se.uploads.ru/t/VkSUI.jpg

4. границы у таблицы: есть/нет (нужное подчеркнуть)
5. -
6. Фиксированная (270 px)
7. -

0


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


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