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

sadhaka

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

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

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

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

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 ячейки в каждой строке:

код будет выглядеть вот так:
<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 в одну строчку.

Делается это следующим образом:
<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.

Для этого вписываем тег 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: Фоновое изображение в таблице.

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

Для этого необходимо дописать в уже существующий код таблицы ссылку на изображение:
<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: Фоновый цвет в таблице.

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

Сначала определим цвета.
Желтый цвет у нас имеет код 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>
Синим отмечен цвет границ.

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

Примеры

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

<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. Ширина и высота таблицы. Ширина и высота ячеек таблицы.

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

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

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

В пикселях это прописывается следующим образом:
height="35" width="50"
красным - обозначение тега
синим - значение ширины в пикселях

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

Делается это так:
width="100%"
красным - обозначение тега
синим - значение ширины в процентах

Примеры

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

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

В код этой таблицы (из кода убраны теги задающие цвет и фон таблицы для наглядности в рассмотрении тегов) вписываем 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>
теперь таблица выглядит вот так:

Следующая задача - задать ширину колонкам.
Для этого ищем самые верхние ячейки, с которых начинаются колонки. Как видно, ячейка 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>
Мы достигли желаемого результата:

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

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

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

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

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

Для начала разберемся со всеми характеристиками ширины.
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>
Результат:

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>
Результат:

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>
Результат:

На этом работа с шириной ячеек таблиц закончена!
Почему не вписана ширина последней ячейки?
Потому что очевидно, что 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>
Результат:

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>
Результат:

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>
Результат:

Все, таблица готова.
Теперь можно, например, вставить в нее фоновое изображение размером 800*500:
Код:
<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"
Примеры

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

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>
Результат:

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>
Результат:

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

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

cellspacing отвечает за расстояние ячеек относительно друг друга и ширину границ между ними.
Значение этого тега задается в пикселях:
cellspacing="1"
Если вы хотите, чтобы границ между ячейками не было вообще, то необходимо задать для атрибута cellspacing значение "0":
<table cellspacing="0">
....
</table>
С помощью атрибута cellpadding вы можете контролировать отступ содержимого ячеек от границ между ячейками.
Значение этого атрибута тоже задается в пикселях:
cellpadding="5"
Примеры

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

Вот ее исходный код, который мы будем менять:
Код:
<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: Убираем границы между ячейками.
Добьемся такого результата:

<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>
можно сравнить результат:
было
стало
Пример 2: Отодвигаем содержимое ячейки от краев.

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

<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>
Теперь сравним:
было
стало
источник

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

+2

albar · Поделиться**161**13.10.2014 18:13:37

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

0

;sneak · [1990-12-20]

sadhaka
конечно к концу недели это долго
но ничего, это подождет с:
выздоравливайте!

0

sadhaka · Поделиться**163**14.10.2014 10:09:31

albar
такая прокрутка покатит?
http://joxi.ru/Eb48VIwyTJD2bmYdv8g

0

albar · Поделиться**164**14.10.2014 21:03:13

sadhaka
Да, отлично) А можно где-то регулировать цвет ползунка?

0

sadhaka · Поделиться**165**14.10.2014 21:33:30

albar
можно

0

sadhaka · Поделиться**166**15.10.2014 09:22:16

albar
тэкс.

в хтмл-верх можно запихать вот это

<script type="text/javascript" src="https://forumstatic.ru/files/0011/e9/e1/48134.js"></script>

Стили (можно в свой стиль в конец второго окна)
зеленым - высота всего объявления
красным - высота контейнеров с прокруткой
Подробнее про настройку полосы прокрутки Настраиваем скроллбар

/*****Стили слайдера*****/
.content-container {
width: 885px;
height: 300px;
}
ul.tabs {
text-align: right;
list-style: none outside none;
margin: 0 0 15px 0;
padding: 0;
width: 100%;
}
ul.tabs li {
display: inline-block;
text-align: center;
}
ul.tabs a {
display: inline-block;
width: 142px;
height: 43px;
}
.tab1 {
background: url(http://ipic.su/img/img7/fs/Bezimeni-1.1412956904.jpg) no-repeat;
}
.tab2 {
background: url(http://ipic.su/img/img7/fs/2099.1412956929.jpg) no-repeat;
}
.tab3 {
background: url(http://ipic.su/img/img7/fs/aktiv.1412956949.jpg) no-repeat;
}
.tab4 {
background: url(http://ipic.su/img/img7/fs/reklama.1412956964.jpg) no-repeat;
}
ul.tabs a span {
display: none;
}
ul.tabs li.active {
}
ul.tabs li a {
outline: medium none;
}
.tab_container {
overflow: hidden;
clear: both;
width: 885px;
}
.tab_content {
overflow: hidden;
padding: 5px 25px;
}
.tab_content h3 {
text-align: center;
margin: 10px 0 10px 0;
}
.flexcroll {
height: 170px;
overflow-y: scroll;
padding-right: 7px;
margin-bottom: 15px;
}
.tab_content .center {
text-align: center;
}
.tab_content .col {
display: inline-block;
width: 130px;
}
.img_hover {
opacity: 0.5;
transition: opacity 1s;
}
.img_hover:hover {
opacity: 1;
}
/*****Стили скроллбара*****/
.scrollgeneric {
line-height: 1px;
font-size: 1px;
position: absolute;
top: 0; left: 0;
}
.vscrollerbase { /*База вертикального скроллбара*/
width: 10px;
background-color: #f4cf9e;
}
.vscrollerbar { /*Цвет и ширина бегунка вертикального скроллбара*/
width: 10px;
background-color: #b75d2c;
}
.scrollerjogbox {
background: #f4cf9e;
width: 10px;
height: 10px;
top: auto; left: auto;
bottom: 0px; right: 0px;
}
/* Стили контейнера */
#news {
height: 170px;
overflow: auto;
position: relative;
}
#banners {
height: 100px;
overflow: auto;
position: relative;
}

В объявление:

Код:

<!--Контент слайдера-->
<div class="content-container">
<ul class="tabs">
    <li><a class="tab1" href="#tab1"><span>Новости</span></a></li>
    <li><a class="tab2" href="#tab2"><span>О мире</span></a></li>
    <li><a class="tab3" href="#tab3"><span>Актив</span></a></li>
    <li><a class="tab4" href="#tab4"><span>Реклама</span></a></li>
</ul>

<div class="tab_container">
    <div class="tab_content" id="tab1" style="display: block;">
        <div style="float: left; width: 48%">
            <h3>Информация о проекте: </h3>
Aliquam erat volutpat. Aliquam interdum quam et nisl pellentesque ultrices. Curabitur dignissim lorem et neque faucibus tristique. In fermentum nisi a augue condimentum, ac tincidunt felis aliquam. Etiam nec leo vel mi porttitor laoreet. Aliquam erat volutpat. Proin sit amet mi at dui hendrerit faucibus quis sit amet massa.
            <h3>В игре: </h3>
            <div class="center">
Месяц, день, год <br /><br />
<a href="#"><img width="88" height="31" src="http://top100-images.rambler.ru/top100/banner-88x31-rambler-blue.gif"></a>
<a href="#"><img width="88" height="31" src="http://top100-images.rambler.ru/top100/banner-88x31-rambler-blue.gif"></a>
<a href="#"><img width="88" height="31" src="http://top100-images.rambler.ru/top100/banner-88x31-rambler-blue.gif"></a>
            </div>
        </div>
        <div style="float: right; width: 48%">
            <h3>Новости</h3>
            <div id='news' class='flexcroll'>
Aliquam erat volutpat. Aliquam interdum quam et nisl pellentesque ultrices. Curabitur dignissim lorem et neque faucibus tristique. In fermentum nisi a augue condimentum, ac tincidunt felis aliquam. Etiam nec leo vel mi porttitor laoreet. Aliquam erat volutpat. Proin sit amet mi at dui hendrerit faucibus quis sit amet massa.
Aliquam erat volutpat. Aliquam interdum quam et nisl pellentesque ultrices. Curabitur dignissim lorem et neque faucibus tristique. In fermentum nisi a augue condimentum, ac tincidunt felis aliquam. Etiam nec leo vel mi porttitor laoreet. Aliquam erat volutpat. Proin sit amet mi at dui hendrerit faucibus quis sit amet massa.
Aliquam erat volutpat. Aliquam interdum quam et nisl pellentesque ultrices. Curabitur dignissim lorem et neque faucibus tristique. In fermentum nisi a augue condimentum, ac tincidunt felis aliquam. Etiam nec leo vel mi porttitor laoreet. Aliquam erat volutpat. Proin sit amet mi at dui hendrerit faucibus quis sit amet massa.
            </div>
            Aliquam erat volutpat. Aliquam interdum quam et nisl pellentesque ultrices.
        </div>
    </div>
    <div class="tab_content" id="tab2" style="display: none;">
        <div style="float: left; width: 48%">
            <h3>Гостям</h3>
            <div class="center">
Ссылка <br />
Ссылка <br />
Ссылка <br />
Ссылка <br />
            </div>
        </div>
        <div style="float: left; width: 48%">
            <h3>Игрокам</h3>
            <div class="center">
Ссылка <br />
Ссылка <br />
Ссылка <br />
Ссылка <br />
            </div>
        </div>
    </div>
    <div class="tab_content" id="tab3" style="display: none;">
        <div style="float: left; width: 48%">
            <h3>Игрок месяца</h3>
            <div class="center">
<img src="" width="70" height="70" /> <br /><br />
Aliquam erat volutpat. Aliquam interdum quam et nisl pellentesque ultrices.
            </div>
            <h3>Цитата недели</h3>
            Aliquam erat volutpat. Aliquam interdum quam et nisl pellentesque ultrices.
        </div>
        <div class="center" style="float: right; width: 48%">
            <h3>Администраторы</h3>
            <span class="col"><img class="img_hover" src="http://ipic.su/img/img7/fs/Bezimeni-3.1412957039.png" /><br /> 000000000000</span>
            <span class="col"><img class="img_hover" src="http://ipic.su/img/img7/fs/Bezimeni-3.1412957039.png" /><br /> 000000000000</span>
            <span class="col"><img class="img_hover" src="http://ipic.su/img/img7/fs/Bezimeni-3.1412957039.png" /><br /> 000000000000</span>
            <h3>Модераторы</h3>
            <span class="col"><img class="img_hover" src="http://ipic.su/img/img7/fs/Bezimeni-3.1412957039.png" /><br /> 000000000000</span>
            <span class="col"><img class="img_hover" src="http://ipic.su/img/img7/fs/Bezimeni-3.1412957039.png" /><br /> 000000000000</span>
        </div>
    </div>
    <div class="tab_content" id="tab4" style="display: none;">
        <div style="float: left; width: 49%">
            <h3>Парнеры</h3>
            <div class="center">
<a href="#"><img width="88" height="31" src="http://top100-images.rambler.ru/top100/banner-88x31-rambler-blue.gif"></a>
<a href="#"><img width="88" height="31" src="http://top100-images.rambler.ru/top100/banner-88x31-rambler-blue.gif"></a>
<a href="#"><img width="88" height="31" src="http://top100-images.rambler.ru/top100/banner-88x31-rambler-blue.gif"></a>
            </div>
            <br />Оставить заявку можно тут.
        </div>
        <div style="float: right; width: 49%">
            <h3>Баннеры</h3>
            <div id='banners' class='flexcroll'>
<a href="#"><img width="88" height="31" src="http://top100-images.rambler.ru/top100/banner-88x31-rambler-blue.gif"></a>
<a href="#"><img width="88" height="31" src="http://top100-images.rambler.ru/top100/banner-88x31-rambler-blue.gif"></a>
<a href="#"><img width="88" height="31" src="http://top100-images.rambler.ru/top100/banner-88x31-rambler-blue.gif"></a>
<a href="#"><img width="88" height="31" src="http://top100-images.rambler.ru/top100/banner-88x31-rambler-blue.gif"></a>
<a href="#"><img width="88" height="31" src="http://top100-images.rambler.ru/top100/banner-88x31-rambler-blue.gif"></a>
<a href="#"><img width="88" height="31" src="http://top100-images.rambler.ru/top100/banner-88x31-rambler-blue.gif"></a>
<a href="#"><img width="88" height="31" src="http://top100-images.rambler.ru/top100/banner-88x31-rambler-blue.gif"></a>
<a href="#"><img width="88" height="31" src="http://top100-images.rambler.ru/top100/banner-88x31-rambler-blue.gif"></a>
<a href="#"><img width="88" height="31" src="http://top100-images.rambler.ru/top100/banner-88x31-rambler-blue.gif"></a>
            </div>
        </div>
    </div>
</div>
</div>
<!--/Контент слайдера-->

<!--Do magic :)-->
<script type="text/javascript">
$(document).ready(function() {
    $(".tab_content").hide();
    $("ul.tabs li:first").addClass("active").show();
    $(".tab_content:first").show();
    fleXenv.initByClass("flexcroll");

    $("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");
    $(".tab_content").hide();
    var activeTab = $(this).find("a").attr("href");
    $(activeTab).fadeIn();
    fleXenv.initByClass("flexcroll");
    return false;
    });
});
</script>

Бонусы:

Если необходимо поместить текст по центру, оберните его в див с классом center (<div class="center>здесь текст</div>) или допишите этот класс к диву, в который вложен текст.

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

.tab_content h3 {
text-align: center;
margin: 10px 0 10px 0;
}

//Сейчас они просто центрированы и сделаны отступы снизу и сверху.

+1

albar · Поделиться**167**15.10.2014 09:45:49

sadhaka
Прекрасная работа, спасибо вам огромное! Это стоило того, чтобы подождать. Именно то, что нужно!)
В качестве бонуса еще осмелюсь уточнить: а заголовкам можно задать легкую тень? Как сейчас стоит на панели с кнопками форум, участники и т.д.

0

sadhaka · Поделиться**168**15.10.2014 10:38:14

albar
Да, конечно.
Для этого специально вынесен селектор.
Вы также можете поменять цвет, размер шрифта, насыщенность и все что Вам еще захочется.

.tab_content h3 {
text-align: center;
margin: 10px 0 10px 0;
text-shadow: 1px 1px 2px #694c2c;
}

0

Ichimaru Gin · Поделиться**169**16.10.2014 00:21:18

;sneak написал(а):

конечно к концу недели это долго

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

.obyava {
top: 450px; /*сдвинуть всю таблицу вверх или вниз*/
}

Надеюсь, найдете.
Единственное, может поехать окно с переключателями страниц. Самостоятельно тут:

#submenu {
margin-left: 20px; /*сдвинуть вкладки влево*/
margin-top: -76px; /*сдвинуть вкладки вверх*/
}
#menu {
margin-left: -3px; /*сдвинуть обе стрелки влево*/
}

Или обратиться. Хотя делал на ваш стиль, не должно.

В объявление

Код:

<!--Кастомизация полосы прокрутки-->
<script type="text/javascript" src="https://forumstatic.ru/files/0011/e9/e1/48134.js"></script>

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

<style type="text/css">
                /* Настраиваем скроллбар */
                .scrollgeneric {
                    line-height: 1px;
                    font-size: 1px;
                    position: absolute;
                    top: 0; left: 0;
                }
                .vscrollerbase { /*База вертикального скроллбара*/
                    width: 10px;
                    background-color: #f4cf9e;
                }
                .vscrollerbar { /*Цвет и ширина бегунка вертикального скроллбара*/
                    width: 10px;
                    background-color: #b75d2c;
                }

                .scrollerjogbox {
                    background: #f4cf9e;
                    width: 10px;
                    height: 10px;
                    top: auto; left: auto;
                    bottom: 0px; right: 0px;
                }
                /* Стили контейнера прокрутки*/
                #mycustomscroll {
                    width: 290px;
                    height: 120px;
                    overflow: auto;
                    position: relative;
                    background-color: #f4cf9e;
                    padding: 0 10px 0 0;
                }

</style>

<!-- Таблица -->
<style>
/*Стиль переключателя*/
#menu {
  margin-left: -3px; /*сдвинуть обе стрелки влево*/
  padding: 0;
  text-align: center;
  width: 300px;
}

#menu span {
  height: auto;
  margin-top: 34px;
  text-align: center;
}

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

#l_srtela {
  float: left;
}

#p_strela {
  float: right;
}

#MenuTxT {
  margin-bottom: 0;
  text-align: center;
}

#submenu {
  background: none repeat scroll 0 0 gold;
  height: 120px;
  margin-left: 20px;    /*сдвинуть вкладки влево*/
  margin-top: -76px;  /*сдвинуть вкладки вверх*/
  padding: 0;
  width: 254px;
}

.submenutext {
  display: none;
  text-align: center;
}

/*Общий стиль таблицы*/
.obyava {
  background: none repeat scroll 0 0 #fff;
  height: 200px;
  left: 50%;
  margin-left: -450px;              /*отступ от центра*/
  position: absolute;
  top: 450px;                                      /*сдвинуть всю таблицу вверх вниз*/
  width: 900px;
}

.stolb {
  float: left;
  padding: 0;
  text-align: center;
  width: 300px;
}

.okno {
  background: none repeat scroll 0 0 green;
  display: block;
  height: 80px;
  width: 300px;
}

 /*отступы от краев для текста, сразу во всех ячейках*/
.text_block {
  padding: 5px;
}
</style>

<div class="obyava">
 <div class="stolb">
  <div class="okno">
   <div class="text_block ">
295 на 80 первое
   </div>
  </div>
  <div id='mycustomscroll' class='flexcroll'>
                Тут длинный текст <br />
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ultrices facilisis risus. Aenean sollicitudin imperdiet justo. Nam sed nulla sed metus blandit pretium. Morbi odio. Maecenas vestibulum dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam in elit. Nam venenatis urna id diam. Quisque porta. Sed ultricies, sem vel gravida mollis, pede lectus vehicula orci, quis sodales mauris velit vitae dui. Sed tincidunt mauris ut libero. Suspendisse potenti. Praesent adipiscing. Sed sem. Ut non justo. Cras pretium nibh scelerisque nibh hendrerit venenatis.
  </div>
 </div>

 <div class="stolb">
  <div class="okno">
   <div class="text_block ">
295 на 80 второе
   </div>
  </div>
  <table border=0 height="auto" style="background-position: relative;"><tbody>
<tr>
<td>
    <div id="menu">
  <span alt="#sm1" id="l_srtela" style="cursor: pointer;"><img src="http://sd.uploads.ru/Vf3Cc.png"></span>
  <span alt="#sm2" id="p_strela" style="cursor: pointer;"><img src="http://sd.uploads.ru/Jncts.png"></span>
   </div>
</td>
</tr>
</tbody>
  </table>

<table border=0 height="auto" style=" background-position: relative;">
<tbody>
<tr>
   <td id="MenuTxT"  align="center" valign="top">
    <div id="submenu" align="center"> 
   
  <div id="sm1" class="submenutext" style="display:block;"><br/>
   <div class="text_block ">
первая страница
   </div>
  </div>
     <div id="sm2" class="submenutext"><br/>
       <div class="text_block ">
вторая страница
       </div>
    </div>


</div>
   </td>
</tr>
 </tbody>
</table>
</div>

<div class="stolb">
<div id='mycustomscroll' class='flexcroll' style="height: 160px;">
                Тут длинный текст <br />
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ultrices facilisis risus. Aenean sollicitudin imperdiet justo. Nam sed nulla sed metus blandit pretium. Morbi odio. Maecenas vestibulum dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam in elit. Nam venenatis urna id diam. Quisque porta. Sed ultricies, sem vel gravida mollis, pede lectus vehicula orci, quis sodales mauris velit vitae dui. Sed tincidunt mauris ut libero. Suspendisse potenti. Praesent adipiscing. Sed sem. Ut non justo. Cras pretium nibh scelerisque nibh hendrerit venenatis.
             </div>
<div class="okno" style="height: 40px;">
еще одно окно без отступа для текста наверное баннеры.
</div>
</div>
</div>

+2

;sneak · [1990-12-20]

Ichimaru Gin
огромнейшее вам спасибо! безмерно благодарна!

0

;sneak · [1990-12-20]

Ichimaru Gin
возник вот такой вопрос с:
а как сделать чтобы в столбце с прокруткой (обоих столбцах), первая строка не входила в неё?

чтобы как бы название и под ним текст с прокруткой?

0

Ichimaru Gin · Поделиться**172**16.10.2014 14:32:06

Да не за что)
Вот с заголовками:

код

Код:

<!--Кастомизация полосы прокрутки-->
<script type="text/javascript" src="https://forumstatic.ru/files/0011/e9/e1/48134.js"></script>

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

<style type="text/css">
                /* Настраиваем скроллбар */
                .scrollgeneric {
                    line-height: 1px;
                    font-size: 1px;
                    position: absolute;
                    top: 0; left: 0;
                }
                .vscrollerbase { /*База вертикального скроллбара*/
                    width: 10px;
                    background-color: #f4cf9e;
                }
                .vscrollerbar { /*Цвет и ширина бегунка вертикального скроллбара*/
                    width: 10px;
                    background-color: #b75d2c;
                }

                .scrollerjogbox {
                    background: #f4cf9e;
                    width: 10px;
                    height: 10px;
                    top: auto; left: auto;
                    bottom: 0px; right: 0px;
                }
                /* Стили контейнера прокрутки*/
                #mycustomscroll {
                    width: 290px;
                    height: 100px;     /*высота*/
                    overflow: auto;
                    position: relative;
                    background-color: #f4cf9e;
                    padding: 0 10px 0 0;
                }

</style>

<!-- Таблица -->
<style>
/*Стиль переключателя*/
#menu {
  margin-left: -3px; /*сдвинуть обе стрелки влево*/
  padding: 0;
  text-align: center;
  width: 300px;
}

#menu span {
  height: auto;
  margin-top: 34px;
  text-align: center;
}

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

#l_srtela {
  float: left;
}

#p_strela {
  float: right;
}

#MenuTxT {
  margin-bottom: 0;
  text-align: center;
}

#submenu {
  background: none repeat scroll 0 0 gold;
  height: 120px;
  margin-left: 20px;    /*сдвинуть вкладки влево*/
  margin-top: -76px;  /*сдвинуть вкладки вверх*/
  padding: 0;
  width: 254px;
}

.submenutext {
  display: none;
  text-align: center;
}

/*Общий стиль таблицы*/
.obyava {
  background: none repeat scroll 0 0 #fff;
  height: 200px;
  left: 50%;
  margin-left: -450px;              /*отступ от центра*/
  position: absolute;
  top: 450px;                                      /*сдвинуть всю таблицу вверх вниз*/
  width: 900px;
}

.stolb {
  float: left;
  padding: 0;
  text-align: center;
  width: 300px;
}

.okno {
  background: none repeat scroll 0 0 green;
  display: block;
  height: 80px;
  width: 300px;
}

 /*отступы от краев для текста, сразу во всех ячейках*/
.text_block {
  padding: 5px;
}

.zagolovok {
height: 20px;   /*высота контейнера для заголовков*/
width: 300px;
font-weight: bold;
}
</style>

<div class="obyava">
 <div class="stolb">
  <div class="okno">
   <div class="text_block ">
295 на 80 первое
   </div>
  </div>
    <div class="zagolovok">ЗАГОЛОВОК</div>
  <div id='mycustomscroll' class='flexcroll'>
                Тут длинный текст <br />
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ultrices facilisis risus. Aenean sollicitudin imperdiet justo. Nam sed nulla sed metus blandit pretium. Morbi odio. Maecenas vestibulum dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam in elit. Nam venenatis urna id diam. Quisque porta. Sed ultricies, sem vel gravida mollis, pede lectus vehicula orci, quis sodales mauris velit vitae dui. Sed tincidunt mauris ut libero. Suspendisse potenti. Praesent adipiscing. Sed sem. Ut non justo. Cras pretium nibh scelerisque nibh hendrerit venenatis.
  </div>
 </div>

 <div class="stolb">
  <div class="okno">
   <div class="text_block ">
295 на 80 второе
   </div>
  </div>
  <table border=0 height="auto" style="background-position: relative;"><tbody>
<tr>
<td>
    <div id="menu">
  <span alt="#sm1" id="l_srtela" style="cursor: pointer;"><img src="http://sd.uploads.ru/Vf3Cc.png"></span>
  <span alt="#sm2" id="p_strela" style="cursor: pointer;"><img src="http://sd.uploads.ru/Jncts.png"></span>
   </div>
</td>
</tr>
</tbody>
  </table>

<table border=0 height="auto" style=" background-position: relative;">
<tbody>
<tr>
   <td id="MenuTxT"  align="center" valign="top">
    <div id="submenu" align="center"> 
   
  <div id="sm1" class="submenutext" style="display:block;"><br/>
   <div class="text_block ">
первая страница
   </div>
  </div>
     <div id="sm2" class="submenutext"><br/>
       <div class="text_block ">
вторая страница
       </div>
    </div>


</div>
   </td>
</tr>
 </tbody>
</table>
</div>

<div class="stolb">
    <div class="zagolovok">ЗАГОЛОВОК</div>
<div id='mycustomscroll' class='flexcroll' style="height: 140px;">
                Тут длинный текст <br />
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ultrices facilisis risus. Aenean sollicitudin imperdiet justo. Nam sed nulla sed metus blandit pretium. Morbi odio. Maecenas vestibulum dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam in elit. Nam venenatis urna id diam. Quisque porta. Sed ultricies, sem vel gravida mollis, pede lectus vehicula orci, quis sodales mauris velit vitae dui. Sed tincidunt mauris ut libero. Suspendisse potenti. Praesent adipiscing. Sed sem. Ut non justo. Cras pretium nibh scelerisque nibh hendrerit venenatis.
             </div>
<div class="okno" style="height: 40px;">
еще одно окно без отступа для текста наверное баннеры.
</div>
</div>
</div>

Делал не глядя, как поставите, отпишитесь.

+1

;sneak · [1990-12-20]

Ichimaru Gin
- итак постаралась подстроить под себя таблицу и вот что вышло:
те два заголовка что добавились в конце, выше чем названия иных столбцов
то есть "новости" у самого края таблицы а "администрация" чуть ниже (как надо)

- что то я задела в настройках прокрутки что теперь она либо в верху либо в низу, не плавная больше, прошу прощение за ляп, но надо вернуть :с

- не получается где найти и убрать жёлтый цвет вкладок оО

- и как добавить еще страницу, например?

- таблица вдруг вылезла, опять я думаю это я где-то что-то задела

- ячейка "топ" впритык с той что выше

таблица

Код:

<!--Кастомизация полосы прокрутки-->
<script type="text/javascript" src="https://forumstatic.ru/files/0011/e9/e1/48134.js"></script>

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

<style type="text/css">
                /* Настраиваем скроллбар */
                .scrollgeneric {
                    line-height: 1px;
                    font-size: 1px;
                    position: absolute;
                    top: 0; left: 0;
                }
                .vscrollerbase { /*База вертикального скроллбара*/
                    width: 10px;
                    background-color: #2d2a23;
                }
                .vscrollerbar { /*Цвет и ширина бегунка вертикального скроллбара*/
                    width: 10px;
                    background-color: #28261f;
                }

                .scrollerjogbox {
                    background: trasparent;
                    width: 10px;
                    height: 10px;
                    top: auto; left: auto;
                    bottom: 0px; right: 0px;
                }
                /* Стили контейнера прокрутки*/
                #mycustomscroll {
                    width: 290px;
                    height: 100px;     /*высота*/
                    overflow: auto;
                    position: relative;
                    background-color: trasparent;
                    padding: 0 10px 0 0;
                }

</style>

<!-- Таблица -->
<style>
/*Стиль переключателя*/
#menu {
  margin-left: -3px; /*сдвинуть обе стрелки влево*/
  padding: 0;
  text-align: center;
  width: 300px;
}

#menu span {
  height: auto;
  margin-top: 34px;
  text-align: center;
}

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

#l_srtela {
  float: left;
}

#p_strela {
  float: right;
}

#MenuTxT {
  margin-bottom: 0;
  text-align: center;
}

#submenu {
  background: none repeat scroll 0 0 gold;
  height: 120px;
  margin-left: 20px;    /*сдвинуть вкладки влево*/
  margin-top: -76px;  /*сдвинуть вкладки вверх*/
  padding: 0;
  width: 254px;
}

.submenutext {
  display: none;
  text-align: center;
}

/*Общий стиль таблицы*/
.obyava {
  background: none repeat scroll 0 0 trasparent;
  height: 200px;
  left: 50%;
  margin-left: -450px;              /*отступ от центра*/
  position: absolute;
  top: 450px;                                      /*сдвинуть всю таблицу вверх вниз*/
  width: 900px;
}

.stolb {
  float: left;
  padding: 0;
  text-align: center;
  width: 300px;
}

.okno {
  background: none repeat scroll 0 0 trasparent;
  display: block;
  height: 80px;
  width: 300px;
}

 /*отступы от краев для текста, сразу во всех ячейках*/
.text_block {
  padding: 5px;
}

.zagolovok {
height: 20px;   /*высота контейнера для заголовков*/
width: 300px;
font-weight: bold;
}
</style>

<div class="obyava">
 <div class="stolb">
  <div class="okno">
   <div class="text_block ">
<div style="font-family: 'Franklin Gothic Medium'; font-size: 15px; text-align: center;  letter-spacing: 1px; color: #796c4f; font-weight: bold; text-shadow: 1px 1px 0px #15130f">DYSTOPIA: bellum frigidum</div><BR>
<div style="font-family: 'Franklin Gothic Medium'; font-size: 12px; text-align: JUSTIFY; line-height: 95%; color: #796c4f;"><b>Рейтинг:</b> 18+<br>
<b>Система игры:</b> эпизодическая<br>
<b>Тип мастеринга:</b> смешанный</div>
   </div>
  </div>
    <div class="zagolovok"><div style="font-family: 'Franklin Gothic Medium'; font-size: 15px; text-align: center; letter-spacing: 1px; color: #796c4f; text-shadow: 1px 1px 0px #15130f">ЭПИЗОДЫ</div></div>
  <div id='mycustomscroll' class='flexcroll'><div style="font-family: 'Franklin Gothic Medium'; font-size: 12px; text-align: JUSTIFY; line-height: 95%; color: #796c4f;">
                Тут длинный текст <br/>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ultrices facilisis risus. Aenean sollicitudin imperdiet justo. Nam sed nulla sed metus blandit pretium. Morbi odio. Maecenas vestibulum dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam in elit. Nam venenatis urna id diam. Quisque porta. Sed ultricies, sem vel gravida mollis, pede lectus vehicula orci, quis sodales mauris velit vitae dui. Sed tincidunt mauris ut libero. Suspendisse potenti. Praesent adipiscing. Sed sem. Ut non justo. Cras pretium nibh scelerisque nibh hendrerit venenatis.
  </div>  </div>
 </div>

 <div class="stolb">
  <div class="okno">
   <div class="text_block ">
<div style="font-family: 'Franklin Gothic Medium'; font-size: 15px; text-align: center; letter-spacing: 1px; color: #796c4f; font-weight: bold; text-shadow: 1px 1px 0px #15130f">АДМИНИСТРАЦИЯ</div><BR>
   </div>
  </div>
  <table border=0 height="auto" style="background-position: relative;"><tbody>
<tr>
<td>
    <div id="menu">
  <span alt="#sm1" id="l_srtela" style="cursor: pointer;"><img src="http://sd.uploads.ru/Vf3Cc.png"></span>
  <span alt="#sm2" id="p_strela" style="cursor: pointer;"><img src="http://sd.uploads.ru/Jncts.png"></span>
   </div>
</td>
</tr>
</tbody>
  </table>

<table border=0 height="auto" style=" background-position: relative;">
<tbody>
<tr>
   <td id="MenuTxT"  align="center" valign="top">
    <div id="submenu" align="center"> 
   
  <div id="sm1" class="submenutext" style="display:block;"><br/>
   <div class="text_block ">
первая страница
   </div>
  </div>
     <div id="sm2" class="submenutext"><br/>
       <div class="text_block ">
вторая страница
       </div>
    </div>

</div>
   </td>
</tr>
 </tbody>
</table>
</div>

<div class="stolb">
<div class="zagolovok"><div style="font-family: 'Franklin Gothic Medium'; font-size: 15px; text-align: center; letter-spacing: 1px; color: #796c4f; text-shadow: 1px 1px 0px #15130f">НОВОСТИ</div></div>
<div id='mycustomscroll' class='flexcroll' style="height: 140px;"> <div style="font-family: 'Franklin Gothic Medium'; font-size: 12px; text-align: JUSTIFY; line-height: 95%; color: #796c4f;">
                Тут длинный текст <br />
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ultrices facilisis risus. Aenean sollicitudin imperdiet justo. Nam sed nulla sed metus blandit pretium. Morbi odio. Maecenas vestibulum dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam in elit. Nam venenatis urna id diam. Quisque porta. Sed ultricies, sem vel gravida mollis, pede lectus vehicula orci, quis sodales mauris velit vitae dui. Sed tincidunt mauris ut libero. Suspendisse potenti. Praesent adipiscing. Sed sem. Ut non justo. Cras pretium nibh scelerisque nibh hendrerit venenatis.Cras pretium nibh scelerisque nibh hendrerit venenatis.Cras pretium nibh scelerisque nibh hendrerit venenatis.Cras pretium nibh scelerisque nibh hendrerit venenatis.
</div>  </div>

<div class="okno" style="height: 40px;">
<center><img src="http://sa.uploads.ru/t/bC8fu.png"> <img src="http://sa.uploads.ru/t/bC8fu.png"> <img src="http://sa.uploads.ru/t/bC8fu.png"></center>
</div>
</div>
</div>

http://bykatistou.rusff.me/

благодарю еще раз :3

Отредактировано ;sneak (16.10.2014 17:04:36)

0

Ichimaru Gin · Поделиться**174**16.10.2014 17:51:56

;sneak написал(а):

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

опустил на 4 пикселя, вроде ровно, смотрите .zagolovok и его свойства.

;sneak написал(а):

- не получается где найти и убрать жёлтый цвет вкладок оО

удалил. оформление вкладок: #submenu.

;sneak написал(а):

- ячейка "топ" впритык с той что выше

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

Код

Код:

<!--Кастомизация полосы прокрутки-->
<script type="text/javascript" src="https://forumstatic.ru/files/0011/e9/e1/48134.js"></script>

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

<style type="text/css">
                /* Настраиваем скроллбар */
                .scrollgeneric {
                    line-height: 1px;
                    font-size: 1px;
                    position: absolute;
                    top: 0; left: 0;
                }
                .vscrollerbase { /*База вертикального скроллбара*/
                    width: 10px;
                    background-color: #2d2a23;
                }
                .vscrollerbar { /*Цвет и ширина бегунка вертикального скроллбара*/
                    width: 10px;
                    background-color: #28261f;
                }

                .scrollerjogbox {
                    background: trasparent;
                    width: 10px;
                    height: 10px;
                    top: auto; left: auto;
                    bottom: 0px; right: 0px;
                }
                /* Стили контейнера прокрутки*/
                #mycustomscroll {
                    width: 290px;
                    height: 100px;     /*высота*/
                    overflow: auto;
                    position: relative;
                    background-color: trasparent;
                    padding: 0 10px 0 0;
                }

</style>

<!-- Таблица -->
<style>
/*Стиль переключателя*/
#menu {
  margin-left: -3px; /*сдвинуть обе стрелки влево*/
  padding: 0;
  text-align: center;
  width: 300px;
}

#menu span {
  height: auto;
  margin-top: 34px;
  text-align: center;
}

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

#l_srtela {
  float: left;
}

#p_strela {
  float: right;
}

#MenuTxT {
  margin-bottom: 0;
  text-align: center;
}

#submenu {
  background: transparent;
  height: 120px;
  margin-left: 20px;    /*сдвинуть вкладки влево*/
  margin-top: -76px;  /*сдвинуть вкладки вверх*/
  padding: 0;
  width: 254px;
}

.submenutext {
  display: none;
  text-align: center;
}

/*Общий стиль таблицы*/
.obyava {
  background: none repeat scroll 0 0 trasparent;
  height: 200px;
  left: 50%;
  margin-left: -450px;              /*отступ от центра*/
  position: absolute;
  top: 450px;                                      /*сдвинуть всю таблицу вверх вниз*/
  width: 900px;
}

.stolb {
  float: left;
  padding: 0;
  text-align: center;
  width: 300px;
}

.okno {
  background: none repeat scroll 0 0 trasparent;
  display: block;
  height: 80px;
  width: 300px;
}

 /*отступы от краев для текста, сразу во всех ячейках*/
.text_block {
  padding: 5px;
}

.zagolovok {
height: 20px;   /*высота контейнера для заголовков*/
width: 300px;
 margin-top: 4px;
font-weight: bold;
}
</style>


<div class="obyava">
 <div class="stolb">
  <div class="okno">
   <div class="text_block ">
<div style="font-family: 'Franklin Gothic Medium'; font-size: 15px; text-align: center;  letter-spacing: 1px; color: #796c4f; font-weight: bold; text-shadow: 1px 1px 0px #15130f">DYSTOPIA: bellum frigidum</div><BR>
<div style="font-family: 'Franklin Gothic Medium'; font-size: 12px; text-align: JUSTIFY; line-height: 95%; color: #796c4f;"><b>Рейтинг:</b> 18+<br>
<b>Система игры:</b> эпизодическая<br>
<b>Тип мастеринга:</b> смешанный</div>
   </div>
  </div>
    <div class="zagolovok"><div style="font-family: 'Franklin Gothic Medium'; font-size: 15px; text-align: center; letter-spacing: 1px; color: #796c4f; text-shadow: 1px 1px 0px #15130f">ЭПИЗОДЫ</div></div>
  <div id='mycustomscroll' class='flexcroll'><div style="font-family: 'Franklin Gothic Medium'; font-size: 12px; text-align: JUSTIFY; line-height: 95%; color: #796c4f;">
                Тут длинный текст <br/>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ultrices facilisis risus. Aenean sollicitudin imperdiet justo. Nam sed nulla sed metus blandit pretium. Morbi odio. Maecenas vestibulum dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam in elit. Nam venenatis urna id diam. Quisque porta. Sed ultricies, sem vel gravida mollis, pede lectus vehicula orci, quis sodales mauris velit vitae dui. Sed tincidunt mauris ut libero. Suspendisse potenti. Praesent adipiscing. Sed sem. Ut non justo. Cras pretium nibh scelerisque nibh hendrerit venenatis.
  </div>  </div>
 </div>

 <div class="stolb">
  <div class="okno">
   <div class="text_block ">
<div style="font-family: 'Franklin Gothic Medium'; font-size: 15px; text-align: center; letter-spacing: 1px; color: #796c4f; font-weight: bold; text-shadow: 1px 1px 0px #15130f">АДМИНИСТРАЦИЯ</div><BR>
   </div>
  </div>
  <table border=0 height="auto" style="background-position: relative;"><tbody>
<tr>
<td>
    <div id="menu">
  <span alt="#sm1" id="l_srtela" style="cursor: pointer;"><img src="http://sd.uploads.ru/Vf3Cc.png"></span>
  <span alt="#sm2" id="p_strela" style="cursor: pointer;"><img src="http://sd.uploads.ru/Jncts.png"></span>
   </div>
</td>
</tr>
</tbody>
  </table>

<table border=0 height="auto" style=" background-position: relative;">
<tbody>
<tr>
   <td id="MenuTxT"  align="center" valign="top">
    <div id="submenu" align="center"> 
   
  <div id="sm1" class="submenutext" style="display:block;"><br/>
   <div class="text_block ">
первая страница
   </div>
  </div>
     <div id="sm2" class="submenutext"><br/>
       <div class="text_block ">
вторая страница
       </div>
    </div>

</div>
   </td>
</tr>
 </tbody>
</table>
</div>

<div class="stolb">
<div class="zagolovok"><div style="font-family: 'Franklin Gothic Medium'; font-size: 15px; text-align: center; letter-spacing: 1px; color: #796c4f; text-shadow: 1px 1px 0px #15130f">НОВОСТИ</div></div>
<div id='mycustomscroll' class='flexcroll' style="height: 140px;"> <div style="font-family: 'Franklin Gothic Medium'; font-size: 12px; text-align: JUSTIFY; line-height: 95%; color: #796c4f;">
                Тут длинный текст <br />
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ultrices facilisis risus. Aenean sollicitudin imperdiet justo. Nam sed nulla sed metus blandit pretium. Morbi odio. Maecenas vestibulum dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam in elit. Nam venenatis urna id diam. Quisque porta. Sed ultricies, sem vel gravida mollis, pede lectus vehicula orci, quis sodales mauris velit vitae dui. Sed tincidunt mauris ut libero. Suspendisse potenti. Praesent adipiscing. Sed sem. Ut non justo. Cras pretium nibh scelerisque nibh hendrerit venenatis.Cras pretium nibh scelerisque nibh hendrerit venenatis.Cras pretium nibh scelerisque nibh hendrerit venenatis.Cras pretium nibh scelerisque nibh hendrerit venenatis.
</div>  </div>

<div class="okno" style="height: 40px; padding-top: 4px;">
<center><img src="http://sa.uploads.ru/t/bC8fu.png"> <img src="http://sa.uploads.ru/t/bC8fu.png"> <img src="http://sa.uploads.ru/t/bC8fu.png"></center>
</div>
</div>
</div>

;sneak написал(а):

- что то я задела в настройках прокрутки что теперь она либо в верху либо в низу, не плавная больше, прошу прощение за ляп, но надо вернуть :с

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

;sneak написал(а):

- таблица вдруг вылезла, опять я думаю это я где-то что-то задела

какая таблица?

А теперь про добавление страниц.
Вы попросили 2, и я взял переключатель вкладок, а не слайдер. Если добавить сейчас еще одну, то появится третья стрелка))
Сейчас уточню, нельзя ли это обойти, и, если нет, то вы перед уходом оставьте мне окончательный вариант, чтоб вам настройки не сбивать, будем переделывать)

+1

;sneak · [1990-12-20]

Ichimaru Gin написал(а):

какая таблица?

http://prntscr.com/4wpfkx

Ichimaru Gin написал(а):

А теперь про добавление страниц.
Вы попросили 2, и я взял переключатель вкладок, а не слайдер. Если добавить сейчас еще одну, то появится третья стрелка))
Сейчас уточню, нельзя ли это обойти, и, если нет, то вы перед уходом оставьте мне окончательный вариант, чтоб вам настройки не сбивать, будем переделывать)

на самом деле чуть ниже я написала про третью, видимо не заметили
и я не думала что сложно будет добавить
не получается не важно, хватит и так))

0

Ichimaru Gin · Поделиться**176**16.10.2014 21:26:33

;sneak написал(а):

http://prntscr.com/4wpfkx

где-то надо уменьшать ширину... Выбирайте колонку)

;sneak написал(а):

на самом деле чуть ниже я написала про третью, видимо не заметили
и я не думала что сложно будет добавить
не получается не важно, хватит и так))

вот это:
- и как добавить еще страницу, например?
так я поэтому и написал про добавление.
Но не надо так не надо *дансинг.джпг*

0

;sneak · [1990-12-20]

Ichimaru Gin написал(а):

где-то надо уменьшать ширину... Выбирайте колонку)

так и сделала) вроде норм)

и да скрипт для прокрутки переставила, она так же дёргается...

0

Deff · Поделиться**178**17.10.2014 13:25:38

;sneak написал(а):

и да скрипт для прокрутки переставила, она так же дёргается...

:glasses: Для трех и более страничек лучше поставить слайдер: => Простой Слайдер картинок и контента

+1

sadhaka · Поделиться**179**17.10.2014 14:26:53

;sneak
с прокруткой все нормально.
Она перескакивает вниз только когда Вы щелкаете по базе скроллбара (она у Вас светлее и выделяется больше, чем бегунок, оттого хочется на нее нажать). Текста мало, поэтому сразу открывается непросматриваемая часть и бегунок уходит вниз.
Если захватить за более темную часть и потащить в низ - то она плавно прокручивается, как и мышкой.

Вот здесь бегунок ощущения не обманывает, поэтому все работает как надо
http://testzone.anihub.ru/

0

;sneak · [1990-12-20]

sadhaka
я полный пень хахахах даже стыдно, спасибо))

0

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

Меню навигации

Пользовательские ссылки

Объявление

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

О форуме

Полезные ссылки

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

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

Сообщений 161 страница 180 из 286

Поделиться111.10.2013 21:08:44

Поделиться16113.10.2014 18:13:37

Поделиться16214.10.2014 03:31:28

Поделиться16314.10.2014 10:09:31

Поделиться16414.10.2014 21:03:13

Поделиться16514.10.2014 21:33:30

Поделиться16615.10.2014 09:22:16

Поделиться16715.10.2014 09:45:49

Поделиться16815.10.2014 10:38:14

Поделиться16916.10.2014 00:21:18

Поделиться17016.10.2014 13:57:11

Поделиться17116.10.2014 14:10:14

Поделиться17216.10.2014 14:32:06

Поделиться17316.10.2014 16:38:39

Поделиться17416.10.2014 17:51:56

Поделиться17516.10.2014 18:09:48

Поделиться17616.10.2014 21:26:33

Поделиться17717.10.2014 13:11:35

Поделиться17817.10.2014 13:25:38

Поделиться17917.10.2014 14:26:53

Поделиться18017.10.2014 14:40:40