Ключевые слова:web, html, (найти похожие документы)
Date: Tue, 1 Aug 2000 19:44:06 +0400 (MSD)
From: MailList: Темные стороны HTML
Subject: [HTML] Позиционирование фоновых картинок
Добрый день уважаемые читатели!
1.08.2000
Выпуск 9
В этом выпуске читайте:
*База тегов
*Позиционирование картинки в качестве фона
*Подсказки к ссылкам
*Заключение
----------------------------------------------------------------------------------
**База тегов**
----------------------------------------------------------------------------------
Ближайшее время рассылка будет выходить в несколько укороченном варианте,
это связано с тем, что сейчас все наши силы брошены на изготовление базы тегов и
открытие новых разделов на сайте.
На этой неделе мы планируем открытие раздела "Скрипты". А также возможно
закончим проектирование базы данных.
----------------------------------------------------------------------------------
**Позиционирование картинки в качестве фона**
----------------------------------------------------------------------------------
Недавно делали сайт для одной компании и столкнулись со следующей проблемой.
Необходимо было сделать вот такую табличку:
____________________________________________________________________
| | |
| | |
| | |
|_______________/|\________________________________________________|
| \|/ |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
|________________|_________________________________________________|
Вроде бы таблица, как таблица. Однако там где Вы видите ромбик (на пересечении
ячеек необходимо было разместить логотип. Помещение этого логотипа в слой,
а затем его позиционирование было бы очень проблематично и по определенным желаниям
заказчика не выполнимо, поэтому мы недолго думая покромсали логотип на 4 части и
всунули в таблицу. Вроде бы получилось неплохо:
<html>
<head></head>
<body bgcolor=#000000>
<table width=700 bgcolor=steelblue align=center border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=170 height=80 align=right><img src='topleft.gif'></td><
<td align=left><img src='topright.gif'></td>
</tr>
<tr>
<td height=200 align=right valign=top><img src='bottomleft.gif'></td>
<td align=left valign=top><img src='bottomright.gif'></td></tr>
</table>
</body>
</html>
Обратите внимание, чтобы не было пустых мест надо обязательно обнулить атрибуты
cellpadding и cellspacing, потому как по умолчанию у них ненулевые значения.
Итак таблицу в логотипом в заданном месте мы сделали, но проблемы начались когда
мы начали заполнять ячейки. Вы можете сами в этом убедиться добавив в любую из ячеек текст.
Это никак нельзя было обойти и пришлось искать другой вариант. И тут нам в голову пришла
мысль использовать куски логотипа как фоны для ячеек. Тогда бы текст и рисунки никак
не пересекались и все было бы в порядке. Сказано-сделано:
<html>
<head></head>
<body bgcolor=#000000>
<table width=700 bgcolor=steelblue align=center border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=170 height=100 valign=top style='background-image: url(topleft.gif);
background-repeat: no-repeat;
background-position: bottom right;'>
</td>
<td width=530 height=100 valign=top style='background-image: url(topright.gif);
background-repeat: no-repeat;
background-position: bottom left;'>
</td>
</tr>
<tr>
<td width=80 height=300 valign=top style='background-image: url(bottomleft.gif);
background-repeat: no-repeat;
background-position: top right;'>
<hr color=black align=left width=70>
</td>
<td width=530 height=300 valign=top style='background-image: url(bottomright.gif);
background-repeat: no-repeat;
background-position: top left;'>
<hr color=black align=right width=430>
</td>
</tr>
</table>
</body>
</html>
Все работает прекрасно. Как видите мы использовали атрибут background-position,
который бывает очень часто просто незаменим, но к сожалению вынужден огорчить
пользователей Нетскейпа, там этот атрибут просто отсутствует (кстати в Опере он есть).
Полный вариант примера с рисунками можно посмотреть
http://darkhtml.webservis.ru/rus/example/9/index.html
----------------------------------------------------------------------------------
**Подсказки к ссылкам**
----------------------------------------------------------------------------------
Решили мы подкинуть Вам один интересненький скриптик - подсказки к ссылкам.
Написан он не нами, а взят с сайта http://leechy.design.ru,
хотя в исходнике стоял копирайт Артемия Лебедева. Ну что ж если это его скрипт,
то благодарим его и по всем правилам даем ссылку и на его сайт - http://design.ru
Посмотреть скрипт: http://darkhtml.webservis.ru/rus/example/9/2.html
К сожалению в рассылке мы его поместить не можем, но посмотреть Вы его можете по
указанной выше ссылке.
В скрипте не используются координаты мышки, а все привязано
к относительно спозиционированному span - у ссылки.
<p>Есть возможность контролировать время появления и пропадания ссылок.
В данном варианте ссылка появляется через полсекунды и через секунду прячется.
----------------------------------------------------------------------------------
**Заключение**
----------------------------------------------------------------------------------
В заключение хотим сказать, что без вашей помощи наша рассылка не сможет
полноценно существовать. Мы стремимся сделать действительно профессиональную
рассылку, которая помогала бы людям. Поэтому будем очень благодарны
всем, кто пришлет свои глюки и различия при реализации HTML в различных браузерах.
Еще лучше, если вы будете писать о своих проблемах и затруднениях при создании
сайта. Мы обязательно постараемся вам помочь, кроме того мы расскажем о вашей проблеме
другим людям.
--
Архив рассылки и коллекции уже доступны на сайте http://darkhtml.webservis.ru
в разделе "Web-design".
--
Ваши письма направляйте по адресу darkhtml@univer.kharkov.ua
--
С уважением
Автор рассылки, редактор сайта, Веб-мастер сайта,
дизайнер консультант по вопросам веб-дизайна
Авдошин Андрей Дмитрий Видмич
avdoshyn@univer.kharkov.ua wizard@univer.kharkov.ua
andreas49@themail.com
