Изменился раздел инструментария посвященного цветным полосам прокрутки.
Теперь стало более удобно подбирать цвета и пользоваться программой. Напоминаю,
Что данная фича поддерживается только Internet Explorer 5.5 и выше.
Пожаловались мне некоторые, что мало конкретных советов стал давать в
последнее время, а все больше теории. Сегодня как раз очень даже практическая
статья посвященная созданию рамок с помощью CSS. Полный текст статьи лежит
по адресу www.htmlbook.ru/css/borders.shtml
Границы и рамки
Спецификация CSS описывает несколько свойств, с помощью которых
можно создавать границу вокруг различных элементов и управлять ее
видом. Границы - одна из наиболее слабых сторон CSS, т.к. браузеры
содержат большое количество ошибок и по разному интерпретируют параметры.
Старшие версии браузеров отображают рамки вокруг элементов более
корректно.
В примере используется задание стиля для всей таблицы целиком и
ее ячеек. Если определить стиль только для таблицы, вокруг нее появится
рамка, но сами ячейки никак выделены не будут. Ниже представлен
результат действия примера. Netscape 4.x в данном случае некорректно
работает с рамками таблиц.
Чебурашка
Гена
Шапокляк
Пики
6
2
4
Трефы
3
4
5
Бубны
9
2
1
Червы
4
3
5
Чтобы установить границу определенной толщины и цвета, удобней
использовать параметр border, который
задает сразу несколько значений через пробел.
<body>
<p><b>Грог по-рыбацки</b><br>
1 рыбу залить кипятком, через 5 минут процедить и добавить
грога. Подавать в чашках.
</p>
</body>
</html>
В примере используется двойная рамка, толщина которой складывается
из толщины линий и расстояния между ними. Чтобы рамка не соприкасалась
с текстом, задан отступ от рамки до содержимого параметром padding.
Грог по-рыбацки
1 рыбу залить кипятком, через 5 минут процедить и добавить грога.
Подавать в чашках.
Особенности браузеров
1. Netscape 4 плохо работает с рамками таблиц. На рис. 2 представлена
рамка, которая получается в других браузерах, а на рис.3 рамка (точнее
ее отсутствие) в Netscape 4.x.
Рис.2. Рамка в Internet Explorer и Opera
Рис. 3. Рамка в Netscape 4.x
При этом для параграфа, тега DIV и других
элементов рамки показываются. Возникает соблазн использовать тег
DIV (или SPAN)
совместно с ячейками таблицы. Однако и тут нас ожидает разочарование,
поскольку рамка будет рисоваться строго по содержимому элемента.
Так, если указать ширину ячеек, поместить внутри них тег DIV,
в стиле которого задать рисование рамки, то ширина ячеек изменится
так, словно этот параметр и не задавался (рис. 4).
Рис. 4. Итоги использования тега DIV внутри ячеек таблицы
Это не таблица получается, а калькулятор какой-то!
Также Netscape 4.x не может устанавливать цвета границ индивидуальных
сторон элемента.
2. Internet Explorer 4/5 корректно работает с блочными элементами,
такими, как параграф и таблица, но не умеет устанавливать отступы
и рамки для встроенных элементов, например, тега SPAN.
Пример 3. Правильная работа в Internet Explorer 4/5
<DIV style=""border:" solid
1px #336699; padding: 3px">
<b>Рома!</b><br>
Очистить от ядрышек 2 кг. грецких орехов. Растолочь скорлупу
и смешать с фруктами в 2 литрах рома. Употреблять 3-4
раза в день. </DIV>
Рома!
Очистить от ядрышек 2 кг. грецких орехов. Растолочь скорлупу и смешать
с фруктами в 2 литрах рома. Употреблять 3-4 раза в день.
Пример 4. Не работает в Internet Explorer 4/5
<SPAN style=""border:" solid
2px #336699; padding: 1px">Хвангур</SPAN><br>
Сварить на медленном огне воду. Добавить в нее хлива и
хрольва. Довести до кипения.
Хвангур
Сварить на медленном огне воду. Добавить в нее хлива и хрольва.
Довести до кипения.
Copyright 2002 Влад Мержевич, e-mail: vlad@htmlbook.ru Материалы сайта охраняются законом об авторском
праве.
Вы можете свободно использовать и распространять любые статьи с указанием
автора и ссылки на сайт www.htmlbook.ru.