Три полезные мелочи для верстки
11.17.2008 – Рубрика: HTML&CSS
Во время серфинга открыл для себя три небольшие, но полезные мелочи, которые можно применить при верстке. Хоть они и незначительные, их присутствие в верстке буде еще одним плюсом в сторону верстальщика. Две из них нашел на тематических ресурсах посвященных веб-разработке, одну на сайте студии веб-дизайна.
Знак ударения для любой буквы
Иногда, при написании некоторых слов, нужно явно указать ударение. Есть два выхода: первый состоит в заменой аналогичными латинскими буквами с знаком ударения таких как Á, è. Правда это создает лишние неприятности, такие как невозможность поиска, или проверки орфографии этого слова. Но что делать, если нужно поставить ударение над буквой і, или я? В этом случае на помощь приходит спец-символ ́. Его нужно размещать после буквы, над которой нужно поставить ударение. В конце заметки приводиться пример с использованием знака ударения.
Перенос неразрывной строки
В блоках с резиновой шириной порой случается досадная ситуация, когда внутри него находится строка текста без пробела, тогда при чрезмерном сужении блока строка вываливается из него из-за невозможности ее перенести. Для того чтоб переносить неразрывную строку существует специальный тег <wbr> который отлично работает, но не проходит валидацию при доктайпе XHTML-типа. Но есть более красивый способ, чтоб сделать перенос неразрывной строки с прохождением валидации. Для этого на помощь приходит спец-символ ­, он вставляет знак переноса(дефис) в установленном месте, если строка не помещается в отведенные границы и переносит остальную часть текста на другую строку.
Как убрать пунктирную рамку у ссылок, которая появляется при клике по ним в FireFox
Многие неоднократно замечали, что в браузере FireFox в момент клика по ссылке вокруг не возникает пунктирная рамка цвет, который указан в стилях для ссылки. Недостаток этой рамки в том, что она иногда идет в разрез с общим дизайном макета(когда для ссылки задается особый контур), или имеет очень большие размеры если ссылка является блоком с бекграудом под которым прячется текст используя IR метод Phark (подробней о методе можно прочитать в заметке Как заменить текст картинкой). Чтоб убрать эту пунктирную рамку достаточно для нужной ссылки задать в стилях свойство outline-style:none; Свойство outline-style задает тип рамки(dotted, dashed,solid,double) вокруг объекта, которая не влияет на размеры объекта. То есть если есть блок шириной в 300 пикселей и в нем располагаются два плавающих блока с шириной по 150, то их рамки в 5 пикселей заданные через outline-width не будут влиять на размеры блоков, но будут накладываться друг на друга. Есть еще свойство outline-color, которое задает цвет рамки, к тому же все три свойства можно записывать в сокращенной форме outline:5px double #000; К сожалению, это свойство не поддерживается браузерами Internet Explorer 7 и ниже.
Вот пример реализации всех вышеуказанных полезностей и свойства outline
(для отображения разрыва строки нужно изменить размеры окна браузера)
Источники материала:
webew.ru
fastcoder.org
27 Отзывов to “Три полезные мелочи для верстки”
Оставить отзыв
Последние записи
- DATA:URL – Картинки в документе без дополнительных запросов к серверу
(Вторник, 09. 8. 2009 – 20 отзывов) - Как изменить внешний вид checkbox
(Вторник, 04. 28. 2009 – 32 отзывов) - Как сделать галерею товаров для интернет-магазина
(Пятница, 03. 13. 2009 – 8 отзывов) - Я.ру
(Воскресенье, 03. 8. 2009 – 3 отзывов)
Ноябрь 17, 2008 в 22:49
Спасибо.
Как раз сегодня размышлял по поводу ударения…
Ноябрь 18, 2008 в 0:26
отлично, что вы зашли ко мне на блог сегодня!!! иначе я бы не нашел ваш, а он так полезен, спасибо
Ноябрь 18, 2008 в 0:41
Действительно полезные мелочи. Вот только почему ничего подобного нет в 100% книг по веб-строительству которые у меня есть!!! Неужели авторы печатных трудов настолько зажрались?!
Ноябрь 18, 2008 в 10:19
Мягкий перенос shy, вроде как, тоже не всеми поддерживается. Хотя при использовании justify было бы неплохо сделать движок переносов – чтобы хоть как-то нивелировать «дыры».
Ударения – об этом еще Иванов писал, их нормально воспринимают вроде как только Яндекс с Гуглом. Но это нормально
За аутлайн – сэнкс, а то у меня в ФФ в настройках эти рамки выключены и совсем забыл про это свойство. Забил себе в шапку.
Ноябрь 18, 2008 в 13:45
2Сергей М.
На видовсе shy работает во всех браузерах(IE6,7, FF3.0.4, Opera 9.62, Safari 3.1.2), на других платформах пока не имею возможности просмотреть, нужно будет в браузершот закинуть.
2Xero201
Чтоб все расписать в книге нужно талмуд делать. А вообще, это все должно быть в спецификации…
Ноябрь 18, 2008 в 15:23
во втором ФФ shy неработает.
outline подерживает shorthand. Тоесть можно писать короче outline:none; или ещё короче outline:0;
Ноябрь 19, 2008 в 19:35
Да со вторым FF реально фигня, возможно есть какие-то варианты?
Ноябрь 19, 2008 в 22:25
2Temych
Использовать wbr который не проходит валидацию
Ноябрь 22, 2008 в 9:06
здорово, даже не знал что есть такие приколюхи. Одно только вот думаю, почему нет у нас нормального единого стандарта, который бы браузераим поддерживался на должном уровне.
Декабрь 11, 2008 в 0:06
Огромное спасибо за инфу про ударение! У меня задание сделать сайт в виде тетрадки первоклассника! Мучался с картинками, а оказывается есть такое дело и все оч просто!
Еще раз спасибо!
Декабрь 11, 2008 в 0:08
Кстати стандарты то есть, только браузеры их по своему воспринимают. Если у всех будет одинаково, не в чем им будет соревноваться )
Декабрь 15, 2008 в 11:23
Спасибо, хорошая статья. Даже не пожалел получаса, потраченных на чтение талмуда.
Декабрь 24, 2008 в 14:58
Хороший блог, только вот в примере почему ударение на согласные?
Январь 26, 2009 в 11:32
Клевый сайт у тебя
Февраль 4, 2009 в 0:45
Спасибо. Про FF – редко в нете! Работает на ура!
СПАСИБО!!!
Март 8, 2009 в 12:03
Привет, стукни в аську 236781742 плз
Апрель 29, 2009 в 15:31
Пример с текстом с ударением адекватно ведет себя только в IE8. В Опере и младших ослах на ряде машин есть однозначная кривизна. На Маке тоже не очень красиво иногда смотряться квадратики. Лучший выход в подобных случаях – не пользоваться вебдингами, а использовать старый добрый апостроф и шаманство со спаном.
P.S. да, и ударения расставлены неверно )
Июнь 7, 2009 в 19:19
пания «АЙЗАТ+» — официальный представитель Станкостроительного Торгово-Промышленного объединения «ДВТ» в городе Казани приветствует на страницах своего сайта всех, кто ищет качественное металлообрабатывающее, кузнечно-прессовое и автосервисное оборудование! Здесь вы сможете подобрать станки и механизмы российских и зарубежных заводов-изготовителей, которые позволят как полностью оснастить производство любого масштаба, так и расширить уже существующий бизнес и спектр услуг с помощью предлагаемого нами оборудования. Мы занимаемся поставкой оборудования (токарных станков, гильотин и т.д.) по Казани и всему Татарстану.
Август 11, 2009 в 13:34
Огорчает наличие проблем с браузерами, а так интересно
Август 11, 2009 в 13:34
Кстати, всеже наверное стоило бы как то стандартизировать отображение.
Август 11, 2009 в 13:36
При работе с разными шаблонами, отображение в опере и мозилле, а также в эксплорере бывает отличным.
Август 20, 2009 в 12:06
Спасибо вам огромное:) Классная тема, пишите чаше – у вас отлично получается
Август 24, 2009 в 18:13
Да уж! Вообще, поразительно наблюдать , когда в считанные часы совершенно практически без повода из пальца высасывается этакий “новостной сюжет” и начинает широко гулять по интернету.
Август 26, 2009 в 13:01
Кстати стандарты то есть, только браузеры их по своему воспринимают
Август 26, 2009 в 13:02
Лучший выход в подобных случаях – не пользоваться вебдингами, а использовать старый добрый апостроф и шаманство со спаном.
Август 26, 2009 в 13:03
Про FF – редко в нете! Работает на ура!
СПАСИБО!!!
Апрель 4, 2011 в 23:57
про пунктир в ff помогло, спасибо!