VPF::Процентные разеры таблиц - Форум программистов

PARROT

Дата 11.5.2005, 10:58 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Экс. модератор
Сообщений: 2339
Регистрация: 5.1.2005
Где: Спб-ЦарьГрад

Репутация: 2
Всего: 50

Вот ссылка... http://www.admin.traktora.spb.ru/lenta/zv.html

--------------------

Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!

dm9

Дата 11.5.2005, 11:17 (ссылка)

(нет голосов)

Загрузка ...

Дмитрий Копытин

Профиль
Группа: Vingrad developer
Сообщений: 3876
Регистрация: 22.7.2002
Где: Москва

Репутация: 29
Всего: 137

Фон всегда располагается сверху. Вот решение:

Код


<html><head></head>
<body topmargin="0" leftmargin="0" bottommargin="0">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td width="64">
<table cellpadding="0" cellspacing="0" width="64">
<tbody><tr>
<td><img src="zv_files/top_film.gif"></td>
</tr>
<tr>
<td><img src="zv_files/mid_film.gif"></td>
</tr>
<tr>
<td><img src="zv_files/36k_film.gif"></td>
</tr>
<tr>
<td><img src="zv_files/bot_film.gif"></td>
</tr>
</tbody></table>
</td>
<td valign="center"><div style="height: 60px; width: 100%; background-repeat: repeat-x; background-image: url(zv_files/film.gif);">&nbsp;</div></td>
<td height="60" width="60"><img src="zv_files/end_film.gif"></td>
</tr>
</tbody></table>
</body></html>

Это сообщение отредактировал(а) dm9 - 11.5.2005, 11:18

PARROT

Дата 11.5.2005, 11:54 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Экс. модератор
Сообщений: 2339
Регистрация: 5.1.2005
Где: Спб-ЦарьГрад

Репутация: 2
Всего: 50

dm9 Клево!
Только остался один баг, После конца кассеты и начала пленки, остается пустое место.
Как их соединить? Пленка меня не слушается... smile

Это ж сколько так можно сделать, а? Много мыслей в голову бредет. smile

Это сообщение отредактировал(а) PARROT - 11.5.2005, 11:55

--------------------

Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!

dm9

Дата 11.5.2005, 12:14 (ссылка)

(нет голосов)

Загрузка ...

Дмитрий Копытин

Профиль
Группа: Vingrad developer
Сообщений: 3876
Регистрация: 22.7.2002
Где: Москва

Репутация: 29
Всего: 137

Вот полностью грамотное решение.

Код


<html>
<head></head>
<body topmargin="0" leftmargin="0" bottommargin="0">
<table cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td width="37">
            <img src="zv_files/top_film.gif"><br />
            <img src="zv_files/mid_film.gif"><br />
            <img src="zv_files/36k_film.gif"><br />
            <img src="zv_files/bot_film.gif"><br />
        </td>
        <td valign="middle">
            <div style="height: 60px; width: 100%; background-repeat: repeat-x; background-image: url(zv_files/film.gif);">&nbsp;</div>
        </td>
        <td valign="middle" width="60">
            <img src="zv_files/end_film.gif"><br />
        </td>
    </tr>
</table>
</body>
</html>

Добавлено @ 12:15
Ну, может, пара мелочей не на 100% грамотна, а на 95% smile

Добавлено @ 12:16
Картинки
<img src="zv_files/top_film.gif"><br />
<img src="zv_files/mid_film.gif"><br />
<img src="zv_files/36k_film.gif"><br />
<img src="zv_files/bot_film.gif"><br />
имхо, лучше соединить в одну.

Добавлено @ 12:17
А, и там плёнка относительно кассеты чуть-чуть неграмотно лежит.
Для этого можно немножко подправить высоту кассеты - самое простое решение такое.

Это сообщение отредактировал(а) dm9 - 11.5.2005, 12:17

PARROT

Дата 11.5.2005, 12:52 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Экс. модератор
Сообщений: 2339
Регистрация: 5.1.2005
Где: Спб-ЦарьГрад

Репутация: 2
Всего: 50

Да!
Это считается из разряда сложных?
Нас так не учили.
Про div вообще никакого разговора не велось.

--------------------

Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!

dm9

Дата 11.5.2005, 12:55 (ссылка)

(нет голосов)

Загрузка ...

Дмитрий Копытин

Профиль
Группа: Vingrad developer
Сообщений: 3876
Регистрация: 22.7.2002
Где: Москва

Репутация: 29
Всего: 137

Ой, сложно-не сложно, я не знаю smile

Насчёт дива - надо понимать, зачем он сделан, чем отличается от спана и где используется.
А так - опыт... чтение спецификаций. Логическое домысливание. Интерес smile

PARROT

Дата 11.5.2005, 12:58 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Экс. модератор
Сообщений: 2339
Регистрация: 5.1.2005
Где: Спб-ЦарьГрад

Репутация: 2
Всего: 50

Где почитать про него? Интерес проснулся smile

--------------------

Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!

Urod

Дата 11.5.2005, 13:25 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 376
Регистрация: 10.4.2004
Где: Москва

Репутация: нет
Всего: -1

Вставила вот так:

Код


<td style="background-repeat: repeat-x;  background-repeat: repeat-y; background-image: url('../Templates/Doma_gory/Fon_fasad.jpg'); valign="top">

Безрезультатно: ни по вертикали, ни по горизонталми не вытягивается фоновая картинка smile

Она статична.
Что не так? Полагаю, что решение несложное, но мне не доводилось с этим работать, и поэтому я сосвем не знаю, куда эту связку вставить smile

Это сообщение отредактировал(а) Urod - 11.5.2005, 15:47

Urod

Дата 11.5.2005, 19:33 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 376
Регистрация: 10.4.2004
Где: Москва

Репутация: нет
Всего: -1

Я не пойму url должен с кавычками ставить или нет? Т.к. я ставила с кавычками, в dm9 дал последний пример без smile

Aliance

Дата 11.5.2005, 19:42 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 2
Всего: 137

Должен с кавычками

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Urod

Дата 11.5.2005, 20:16 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 376
Регистрация: 10.4.2004
Где: Москва

Репутация: нет
Всего: -1

AlianceОк! А эти репиты куда тыкать-то? Постом выше не посмотришь - у меня там где-то ошибка smile

Это сообщение отредактировал(а) Urod - 11.5.2005, 20:23

Urod

Дата 11.5.2005, 20:31 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 376
Регистрация: 10.4.2004
Где: Москва

Репутация: нет
Всего: -1

СТОП!
Я уже куда-то в дебри лезу. Мне необходимо сделать динамичными две верхние строки страницы (эти строки содержат картинки => мне надо применить некоторые приемы работы с картинками)
Вот мои вопросы по страничке, которые я никак не могу решить (ссылка на страничку приведена выше):

Я применяла предложенные Вами методы, но ни в одном вопросе я не пришла к успеху. Я уже себе голову сломала smile

Может, посмотрите по ссылке?

dm9

Дата 11.5.2005, 20:31 (ссылка)

(нет голосов)

Загрузка ...

Дмитрий Копытин

Профиль
Группа: Vingrad developer
Сообщений: 3876
Регистрация: 22.7.2002
Где: Москва

Репутация: 29
Всего: 137

Цитата(Aliance @ 11.5.2005, 20:42)

Должен с кавычками

Не столько категорично smile

Спецификация утверждает, что это всё равно, опыт тоже.
Читать тут. http://loc.stack.ru/projects/CSS2/syndata.html#x44

Цитата(Urod @ 11.5.2005, 14:25)

background-repeat: repeat-x; background-repeat: repeat-y;

Ты 2 раза задала 1 и тот же стиль. Второй перекрывает первый. Есть три значения: repeat-x, repeat-y, repeat. Твой случай третий. Ну, ещё no-repeat.
Читать тут. http://www.webber.ru/articles/article.html?article_id=7

Urod

Дата 11.5.2005, 20:46 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 376
Регистрация: 10.4.2004
Где: Москва

Репутация: нет
Всего: -1

Вот:

Код


<td {background-repeat: repeat; background-image: url../Templates/Doma_gory/Fon_fasad.jpg);}>

Или вот:

Код


<td style="width: 100%; background-repeat: repeat; background-image: url(../Templates/Doma_gory/Fon_fasad.jpg);">

Не получается smile

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

Это сообщение отредактировал(а) Urod - 11.5.2005, 21:09

dm9

Дата 11.5.2005, 20:51 (ссылка)

(нет голосов)

Загрузка ...

Дмитрий Копытин

Профиль
Группа: Vingrad developer
Сообщений: 3876
Регистрация: 22.7.2002
Где: Москва

Репутация: 29
Всего: 137

Цитата(PARROT @ 11.5.2005, 13:58)

Где почитать про него? Интерес проснулся

Ой...
В общем, суть такая. Есть блочные элементы, и есть inline-элементы (не знаю, как по-русски, близкие по значению слова: поточный, линейный).

Поточные располагаются один ЗА другим. Пример - картинки. Если ты напишешь 10 тэгов <img> подряд, картинки расположатся слева направо, одна ЗА другой.

Блочные же располагаются один ПОД другим. Пример - таблицы. Если ты напишешь подряд 10 таблиц, они будут расположены одна ПОД другой. Как бы блоками.

ВСЕ элементы делятся на блочные и поточные (inline).
Блочные: table, li, form, p, div, др.
Поточные: img, простые буквы - тоже поточные элементы, input, span, др.

Это не фатально, это так по умолчанию. Любой блочный элемент можно сделать поточным, и наоборот. Блочный: стиль "display: block", поточный: "display:inline". Часто применяется, например, перевод формы (тэг form), которая по умолчанию является блоком, в inline-вид.

Блочный - он как бы всегда прямоугольный, а набор inline-элементов может состоять из нескольких строк, как выделение текста.

Теперь о div и span. Иногда нужно применить какой-то стиль к блоку или потоку элементов (ну, термины неофициальные, понятно, о чём я говорю). Тогда используется соответственно либо <div class="my">...</div>, либо <span class="my">...</span>.

Иногда бывает нужно просто создать блок, например, для того, чтобы туда запихнуть фоновое изображение и разместить его по центру. Тогда используем div.
Если надо выделить часть текста красным цветом, пишем <span style="color:red">my_text</span>, и тут неверно было бы применить div, так как это оказался бы блок, и этот "my_text" стал бы блоком, то есть весь последующий текст пошёл бы ниже, а не справа от my_text (ЗА my_text).

Вот, собственно, суть...
Ещё вот этот пункт спецификации стоит просмотреть:
http://pyramidin.narod.ru/html401/global.html#h-7.5.4

Это сообщение отредактировал(а) dm9 - 14.5.2005, 14:26

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »