Маркетер
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
Facebook 0 Likes
Twitter 0 Followers
Instagram 0 Followers
Pinterest 0 Followers
YouTube 0 Subscribers
Подписаться
Маркетер
Маркетер
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
  • HTML

HTML – Долой тег hr из html разметки

  • 14.11.2009
Total
0
Shares
0
0
0
0
0
0

Все наверно знают про тег hr (кто не знает тем сюда http://htmlbook.ru/html/hr.html)
Он используется для смыслового разделения контента, но плохо вписывается в дизайн.
Дело в том, что на данный момент даже самые последние браузеры по-разному воспринимают задание цвета hr через CSS, также он ставит margin который тоже зачастую бывает не нужен.

С приходом CSS тег font стал бесполезен, т.к все можно задать через css. А почему же мы тогда все еще пользуемся “кривым” hr?

К сожалению совсем без тега обойтись не получится 🙂 Поэтому как контейнер мы берем тег DIV

<div class=”separator”>&nbsp;</div>

будем создавать разделитель высотой в 2х состоящий из 2-х цветов (для красоты), поэтому прописываем для класса separator вот такой стиль:

.separator {
  background:#0033CC;
  border-top:1px solid #FFCC00;
  font-size:1px;
  height:1px;
  overflow:hidden;
  width:200px;
}

Но тут есть один момент. Все нормальные браузеры уже показывают 2-х пиксельную полоску, а IE все еще нет. Проблему может решить установка DOCTYPE:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> 

Либо написание выражения, которое понятно только IE:

.separator {
  background:#0033CC;
  border-top:1px solid #FFCC00;
  font-size:1px;
  height:1px;
  height:expression(‘2px’);
  overflow:hidden;
  width:200px;
}

Все таки советую всегда устанавливать DOCTYPE, потому как

Если же вы хотите сделать разделитель высотой в 1 пиксель, то можно использовать такой стиль (без border):

.separator {
   background:#0033CC;
   font-size:1px;
   height:1px;
   overflow:hidden;
   width:200px;
}

Автор: Петров Е.В (phpcode.ru)

Total
0
Shares
Телеграфировать 0
Поделиться 0
Репост 0
Твитнуть 0
Алексей Волков

Предыдущий материал
  • Все о Photoshop

Создание комиксов в стиле Max Payne, спецэффект

  • 14.11.2009
  • Алексей Волков
Read More
Следующий материал
  • PHP

PHP – грамотная работа с файлами

  • 14.11.2009
  • Алексей Волков
Read More
Вас также может заинтересовать
Read More
  • HTML

Оптимизация. Важность тега TITLE

  • Алексей Волков
  • 30.11.2009
Read More
  • HTML

Советы начинающему верстальщику HTML

  • Алексей Волков
  • 25.11.2009
Read More
  • HTML

“Резиновая” рамка с фигурными углами

  • alexvolkov
  • 27.07.2005
Read More
  • HTML

Создай свою Web-страницу за пять минут!

  • Алексей Волков
  • 31.03.2005
Read More
  • HTML

Блокнотик с подсветкой

  • Алексей Волков
  • 31.03.2005
Read More
  • HTML

HTML-редактор? Вот и редактируй!

  • Алексей Волков
  • 21.08.2003
Read More
  • HTML

Выбираем HTML-редактор

  • Алексей Волков
  • 14.08.2003
Read More
  • HTML

HTML в студию

  • Алексей Волков
  • 05.05.2003

Добавить комментарий

Для отправки комментария вам необходимо авторизоваться.

Свежие посты
  • Рассылка как продукт
    • 24.07.20
  • Google назвал лучшие приложения App Store за 2018 год
    • 14.12.18
  • Онлайн-конференция интернет-магазин от “А до Я” CyberE-com 2018
    • 25.05.18
  • Бесплатная онлайн-конференция по управлению репутацией
    • 04.12.17
  • Открыта регистрация на CyberMarketing-2017
    • 19.10.17
Маркетер
  • О проекте
  • Информационное спонсорство
  • Рекламным агентствам
  • Ссылки
(с) ООО "Маркетер". Официальный сайт. Маркетер: Статьи про рекламу, маркетинг, public relations, интернет

Введите ключевые слова для поиска и нажмите Enter