Альтернативный текст для графики при использовании CSS
Смотря сегодняшним взглядом на одну их своих предыдущих статей “Альтернативный текст для изображений в блочной верстке“, понимаю, что я переборщил с кодом, как в части HTML, так и в части CSS. Все то же самое можно было сделать гораздо проще. Поэтому данная статья – это дубль 2.
Данная техника, которая используется для создания альтернативного текста к изображениями, выводимым с помощью CSS, называется Image Replacement. По сути мы пишем какой-то текст и накладываем на него слой с изображением, таким образом замещая текст.
Эту технику я использую, как правило, для отображения логотипа сайта, когда верстаю дивами. Реальный пример – RSS-иконка на этом блоге.
HTML
<a id="logo" href="#">Название сайта<b></b></a>
CSS
#logo {
position: relative;
cursor: pointer;
}
#logo b {
position: absolute;
top: 0;
left: 0;
width: 250px;
height: 50px;
background: url(i/logo.gif) no-repeat;
}
По сравнению с моим предыдущим вариантом CSS-код сократился раза в два. Остается только добавить оформление шрифта в идентификатор #logo. Я стараюсь делать его максимально, насколько это возможно, схожим с текстом на изображении.
Данная техника не подходит при использовании полупрозрачных изображений.
Смотрите также
Простая техника позиционирования изображения при обтекании текстом
Довольно часто при верстке создается необходимость расположить изображение слева от текста таким образом, чтобы текст находился справа от изображения и не сворачивал под него, т.е. должно это выглядеть вот так: ...
5 советов верстальщику
Лучше поздно, чем никогда. Наконец-то я готов представить свои пять советов в рамках эстафеты, запущенной Никитой, тем более что “пинок” получил от трех человек. 1) Читайте блоги специалистов в данной ...
Добавляем иконку предзагрузки к большим изображениям при помощи CSS
Давайте представим, что у нас есть специальная страница, содержащая одно или несколько больших изображений, и мы хотим дать знать посетителю, что изображение загружается. Для этой цели можно было бы использовать ...
Альтернативный текст для изображений в блочной верстке
С дивовой версткой я работаю по следующему принципу – все оформление (в том числе графика) через CSS, в HTML же выносятся только изображения, дополняющие текст, изложенный на странице. В связи ...
Комментарии (20)
Странный результат выходит однако, :) как позиционировать этот Лого-блок? я что-то не могу додуматься, видать знаний моих в верстке не хватает :(
Не понимаю, в чем у вас затруднение. Вставляете вышеуказанный html-код в шапку страницы. В
#logo bменяете ширину и высоту на свои, а для#logoдобавляете отступы и поля (margin, padding), если это нужно, чтобы позиционировать блок с лого. Либо, вместо отступов можно задать для этого блока абсолютное позиционирование.А, понял, ну в прочем да, нормально :)
а есть ли вообще какая-нибудь возможность проверить включено ли у пользователя отображение картинок?
Очень бывает обидно, когда рождаешь отличную идею, а потом вдруг узнаешь, что это кто то уже придумал до тебя.
Метод Pixi
2 Максим Покровский:
Ни разу не обидно.. вот когда придумали лучше и проще чем ты (например как определить что отображение картинок не включено) – вот тогда начинаешь думать – чтобы в себе изменить :) – прогресс однако так и возникает :)
Так что – как определить что отображение картинок отключено никто не знает?
Steward, ИМХО, определить отключено ли отображение картинок в браузере, сложно технически, поэтому нигде такого нет. Или я ошибаюсь на счет “технически”?
Максим, идея-то, собственно, и не моя, подсмотрел в каком-то хорошем списке с различными вариантами Image Replacement.
А вообще, ситуация, когда придумываешь идею, которая уже была придумана до тебя, я думаю, в веб-разработке встречается часто (так как уже все давно придумано за нас :). Мне в таком случае, конечно же, было бы немного обидно.
Вот такой кусок кода :) – dot.gif – белая точка 1х1 px :)
длинновато конечно… надо ещё поработать – зато для прозрачных лого невидно алтернативный текст :))))
и display: block; – не даёт вылезать длинному тексту за рамки изображения
#logo {
position: absolute;
top: 0;
left: 0;
width: 118px;
height: 110px;
position: relative;
display: block;
}
#logo b {
position: absolute;
top: 0;
left: 0;
width: 118px;
height: 110px;
background: url(“i/logo.gif”) no-repeat;
}
#logo i {
position: absolute;
top: 0;
left: 0;
width: 118px;
height: 110px;
background:url(“i/dot.gif”) repeat;
}
Alternative text here sdfdfgfgdhfdgh
спасибо за внимание
конструктивная критика приветствуется :)))
ой блин :( вот кусок текста
вот что значит не читать инструкцию :)))
У меня почти так же получилось (правда я брал за основу гугл).
Насчёт как определить отображение картинок –
2 Mr.KTO:
Определение таким образом включены ли картинки – это некарашо :)… точнее я слабо представляю как это можно применить например на статических страницах – надо подумать.
А на счёт “У меня почти так же получилось” – как я понимаю – у вас таже проблема с прозрачными логотипами получится.
А не смущает, что
наверняка будет обруган валидатором? Меня всегда это немного смущало, даже если сделать
.
ATimofeev, валидатор на такую запись не ругается, однако она не соответствует семантике, поэтому подобное меня тоже немного смущает. Пробел вставлять не обязательно, т.к. суть не изменится.
А что произойдет если валидатор поругается? Это как-то отразится на сайте?
Если валидатор ругается, ничего не произойдет и на сайте этот никак не отразится.
Прохождение валидации означает, что сайт соответствует современным стандартам и это говорит о профессионализме веб-разработчика. Хотя в действительности часто сайты не валидны из-за наличиния различных ява-скриптов, флеша (возможно чего-то еще), без которых, бывает, никак не обойтись.
Понял. Думал уже, что как-то на продвижении сайта может сказаться несоответствие стандартам.
Добавлю, что в данном виде техника будет часто давать глюки — так как необходимо задать ширину и высоту и для #logo, а так же добавить overflow:hidden,иначе текст будет вылазить из под картинки.
О, какие люди пожаловали :). akella, спасибо за коммент, не ожидал.
А по существу – я для
#logoздесь написал минимальный код, чтобы показать суть. В каждом конкретном случае он, естественно, будет доработан. Я поступаю по-разному, иногда задаю ширину и высоту и выравниваю текст вертикально и горизонтально, а иногда просто подбираю такой размер шрифта, чтобы текст не выставлялся ис-под картинки. overflow:hidden при этом мне даже ни разу не пригодилось.Dimox, пригодится, если попробуешь увеличить размер текста в Firefox’е.
cursor: pointer; про это не знал, спасибо.