Комментарии 87
Да, заранее прошу прощение за форматирование, первый пост :(
А ларчик-то просто открывался )))
Спасибо!
Спасибо!
НЛО прилетело и опубликовало эту надпись здесь
Еще можно использовать способ line-height: 9999em; который вытолкнет текст не в стороны а вниз. И который также не зависит от выравнивания.
Я уже давно втаких случаях использовал «color: transparent», но без обнуления шрифта. Проблем особых не наблюдается.
h1 {
background-image:url(img/1326900333.jpg);
height:240px;
width:384px;
background-repeat: no-repeat;
color:transparent;
overflow:hidden;
}
Что я сделал не так? link
Попробуйте выделить картинку.
А каким методом вы пытаетесь спрятать текст? У вас нет ни padding, ни text-ident, ни font:0…
Очевидно при помощи color: transparent;
А overflow: hidden; не даёт «вылазить» тексту дальше указанного элемента.
Единственная досадная мелочь − это то, что при выделении текст всё же проявится.
А overflow: hidden; не даёт «вылазить» тексту дальше указанного элемента.
Единственная досадная мелочь − это то, что при выделении текст всё же проявится.
Единственная досадная мелочь − это то, что при выделении текст всё же проявится.
Об этом и речь… Чтобы избежать этого и нужен или text-indent:-9999px, или padding:%height_image% px, или font:0
Это же здорово! пользователи смогут полноценно копировать контент.
Досадно, но можно красиво стилизировать текст и использовать это как «пасхальное яйцо».
Это был вопрос пользователю IkaR49
Просто не на тот линк нажал…
Просто не на тот линк нажал…
Я уже давно втаких случаях использовал «color: transparent», но без обнуления шрифта. Проблем особых не наблюдается
Я вот так делал:
del {
font-size: 0px;
letter-spacing: 0px;
color: white;
color: transparent;
color: rgba(0,0,0,0);
text-decoration: none;
line-height: 0;
}
А вот вам ещё один способ.
Используются псевдоэлементы. Так что IE8+.
Используются псевдоэлементы. Так что IE8+.
А почему бы встраивать шрифты в сайт и писать текст текстом?
Ну вот, заминусовали и не объяснили. У меня возник похожий вопрос. Есть же cufon, google font в конце концов… Боязнь «утяжелить» страницу?
Редко, когда чистый текст, например логотипы. Даже если и будут шрифт подходящий, то придется решать задачу совмещения с графикой. А логически — это единый объект — картинка.
вы вообще сути не поняли или не верстали никогда
Сейчас меню навигации верстают примерно так:
При этом ссылки стилизуются всевозможными картинками, в том числе необычной формы и даже вообще без шрифтовых элементов при помощи background-image.
А сама ссылка должна содержать текст для поисковиков, вот его-то и прячут.
Сейчас меню навигации верстают примерно так:
<nav>
<ul>
<li><a href="#">главная</a></li>
<li><a href="#">неглавная</a></li>
<li><a href="#">контакты</a></li>
</ul>
</nav>
При этом ссылки стилизуются всевозможными картинками, в том числе необычной формы и даже вообще без шрифтовых элементов при помощи background-image.
А сама ссылка должна содержать текст для поисковиков, вот его-то и прячут.
Название звучит как: «Новый метод замены текста картинкой, или избавляемся от -9999px». Замена текста. Вот и возникли вопросы.
Если текст для заголовка, который может меняться, то есть более удобные способы, мне кажется.
Если ссылку нужно стилизировать картинкой (домик, например, для возврата на главную), то почему не использовать «alt» и «title»?
Объясните пожалуйста, чем alt у картинки в ссылке хуже скрытого текста с точки зрения поисковика? Если уж речь зашла о них.
Если текст для заголовка, который может меняться, то есть более удобные способы, мне кажется.
Если ссылку нужно стилизировать картинкой (домик, например, для возврата на главную), то почему не использовать «alt» и «title»?
Объясните пожалуйста, чем alt у картинки в ссылке хуже скрытого текста с точки зрения поисковика? Если уж речь зашла о них.
Да стилизовать можно как угодно эти пункты меню, прятать текст то зачем? Если пункты меню в виде иконок, то правильнее использовать атрибуты alt и title
А как вы думаете, поисковикам понравится скрытый текст? Это будет напоминать поисковой спам, за который всегда банили.
А как вы думаете, поисковикам понравится скрытый текст? Это будет напоминать поисковой спам, за который всегда банили.
Насколько я помню, была проблема в рендеринге шрифтов. Они при разных условиях (браузер, ОС) выглядели по разному.
Все верно, это самый прогрессивный метод. Проблема только в том, что шрифты не сглаживаются пока что. Впрочем, зачастую это и не является проблемой — тогда да, @фонт-фэйс — и вперед.
alt — аттрибут тега img, он не имеет никакого отношения к оформлению элементов стилями
тайтл тоже совсем для других целей
тайтл тоже совсем для других целей
ой, это ответ сюда
Ну естественно, alt и title не имеют отношения к оформлению, но вы же говорите о том, что ссылка должна иметь текст для поисковика и использовать картинки (иконки) без текста — не хорошо. Вот и возник вопрос, а почему нельзя использовать иконку в ссылке как картинку и задать ей alt, title на радость поисковикам? В чем минус этой идеи?
Альты привязаны к картинкам и используются для индексации поисковиками этих самых картинок. По ним никакой поисковик не построит карту сайта, что тут сложного, не пойму?
Самый базовый принцип создания ссылок — использование анкоров.
Самый базовый принцип создания ссылок — использование анкоров.
Кроме того, если вы вставите картинки для кнопок прямо в html, что само по себе противоречит принципу разделения контента, как потом их стилизовать по :hover и т.п.?
Мы уже о кнопках говорим? А начали с «заголовков».
В общем, не хочу углубляться с сео-дебри, в которых относительно слабо компетентен.
Весь интернет использует отрицательный text-indent, а вы можете использовать картинки с альтами, никаких проблем. Тем более, товарищ вон подтвердил про «рабочие примеры».
Анкор всегда влиял на релевантность в первую очередь, возможно со временем альты будут равноценны или даже лучше.
Удачи.
Весь интернет использует отрицательный text-indent, а вы можете использовать картинки с альтами, никаких проблем. Тем более, товарищ вон подтвердил про «рабочие примеры».
Анкор всегда влиял на релевантность в первую очередь, возможно со временем альты будут равноценны или даже лучше.
Удачи.
Если картинка — это сслылка, то нет никакой проблемы в построении карты сайта поисковиком.
Я не силен в оптимизации, вот и спрашиваю. Я считал, что alt для картинки обернутой в ссылку нормально индексируется. Я ошибался?
Это все плохие решения. Почему? Потому, что надо исходить не из абстрактной «семантики», а из решения минимум 2 задач: корректного отображения текста на разных устройствах (в т.ч. при отключеннных картинках) и корректного понимания текста поисковыми системами.
Этот способ не решает ни первой проблемы (если отключить картинки, текст не виден), ни второй (поисковики, увидев что у текста нулевой размер шрифта, могут игнорировать его).
Потому я обычно делаю так: спан с position:relative, display: inline-block, overflow: hidden, в нем текст, поверх него спан с position: absolute и фоном в виде картинки (с непрозраным фоном). Если картинка не загрузилась, виден текст под ней.
Но этот способ не позволяет использовать прозрачную картинку (так как через нее будет просвечивать текст). Может, можно его как-то доработать? Чтобы, например, поместить текст и картинку в общий контейнер и картинка при загрузке сдвигала текст за пределы видимости? Что-то у меня нет решения.
Этот способ не решает ни первой проблемы (если отключить картинки, текст не виден), ни второй (поисковики, увидев что у текста нулевой размер шрифта, могут игнорировать его).
Потому я обычно делаю так: спан с position:relative, display: inline-block, overflow: hidden, в нем текст, поверх него спан с position: absolute и фоном в виде картинки (с непрозраным фоном). Если картинка не загрузилась, виден текст под ней.
Но этот способ не позволяет использовать прозрачную картинку (так как через нее будет просвечивать текст). Может, можно его как-то доработать? Чтобы, например, поместить текст и картинку в общий контейнер и картинка при загрузке сдвигала текст за пределы видимости? Что-то у меня нет решения.
При использовании alt'а с примененным к нему CSS, можно получить адекватный текст на месте отключенной картинки.
Чем не устраивает вариант встраивания нужного шрифта в сайт?
Вообще, хороший вариант, лучше чем приведен в статье, и чем приведен у меня (просто раньше внешние шрифты не всеми браузерами поддерживались, вот с тех времен я этот способ и использую), единственное, что может быть иногда ради 10 букв тянуть шрифт (пусть даже порезанный) неоправданно. Плюс, надо еще проверить, не будет ли это тормозить в ИЕ6/7.
Я бы сформулировал по-другому — эти решения неплохие, просто они не идеальны. Ваш способ имеет право на жизнь, но во многих случаях он будет избыточен из-за двух спанов, а position:absolute может повести себя непредсказуемо в некоторых мобильных браузерах. Да и в старых ИЕ могут возникнуть нюансы, если на странице есть куча лайтбоксов и поп-апов — нужно отслеживать, чтобы правильно наследовался z-index.
Мне кажется, что хороший вариант решения этой задачи может быть решен с помощью js или средствами сервера — отслеживать состояние окна браузера и делать соответствующую развилку, как это сейчас делается с помощью тех же yepnope.js или если более глобально — modernizr.
Для нас, как для разработчиков, это будет более геморно, однако в конечном итоге до пользователя дойдет самый оптимальный вариант
Мне кажется, что хороший вариант решения этой задачи может быть решен с помощью js или средствами сервера — отслеживать состояние окна браузера и делать соответствующую развилку, как это сейчас делается с помощью тех же yepnope.js или если более глобально — modernizr.
Для нас, как для разработчиков, это будет более геморно, однако в конечном итоге до пользователя дойдет самый оптимальный вариант
НЛО прилетело и опубликовало эту надпись здесь
варианты с нулевым размером шрифта и псевдоэлементами не применимы к старым браузерам. А то светлое будущее, в котором не осталось старых браузеров, пока еще далеко за горами. Так что зря вы, на мой взгляд, привели эти примеры.
Надо будет опробовать метод Зельдмана. Даже если он не работает в ИЕ6, для того старичка неизбежно пишется отдельный стилевой файл, в который никто не мешает воткнуть -9999px.
Надо будет опробовать метод Зельдмана. Даже если он не работает в ИЕ6, для того старичка неизбежно пишется отдельный стилевой файл, в который никто не мешает воткнуть -9999px.
НЛО прилетело и опубликовало эту надпись здесь
В эти 6%, довольно часто попадают заказчики со своими офисными компьютерами. Обычно у директора все ок. Но все начинается с момента, когда открывает страничку нового сайта компании помощница помощницы бухгалтера.
А если говорить про зарубежных клиентов то это вообще мрак. Не так давно имел дело с компанией, в которой у 4 из 7 человек на iPad 2 стояла iOS 3, а на маках 3 версия Firefox и древний Safari.
А если говорить про зарубежных клиентов то это вообще мрак. Не так давно имел дело с компанией, в которой у 4 из 7 человек на iPad 2 стояла iOS 3, а на маках 3 версия Firefox и древний Safari.
всегда писал -999em и экономил байт!
Мне ближе два других варианта:
либо, который кстати чаще использую:
в стилях так:
отрицательными отступами и т.д. как-то не пользовался никогда, уж простите.
Разумеется использую их там, где font-face не помогает!
<a href="#"><img src="картинка.png" alt="тут писать текст"></a>либо, который кстати чаще использую:
<a href="#"><span>тут писать текст</span></a>в стилях так:
a {background:url('картинка.png') no-repeat} /* соответственно ширина, высота и display: block */
a span {display:none}
отрицательными отступами и т.д. как-то не пользовался никогда, уж простите.
Разумеется использую их там, где font-face не помогает!
НЛО прилетело и опубликовало эту надпись здесь
Без твоих комментов этот пост был бы неполным, спасибо :)
Что-то я не пойму, разве при отключенной графике будет виден текст в способе с -9999px? Тем более второй вариант с display:none полезен для ПС имхо, и, когда я так делаю (надо было об это сразу написать), думаю именно о ПС, а не о слепых и тех, кто за МКАДом, — в чем возможно не прав.
НЛО прилетело и опубликовало эту надпись здесь
Последнее было проверенно мною на практике — несколько сайтов, где неумышленно было приличное количество элементов с display:none и visibility:hidden, серьезно выпали из индекса сначала яндекса, потом гугла…
Способе с display: none я не считаю клоакингом, потому что имеется в виду следующее:
На изображении «Hello world!» и в коде соответственно
а не
На изображении «Hello world!» и в коде соответственно
<a href="#"><span>Hello world!</span></a>
а не
<a href="#"><span>купите Hello world! бесплатно Hello world! скачать Hello world! и т.п.</span></a>
IMHO, нужен SVG+Web-fonts. При этом индексироваться будет сам текст на картинке. Плюс появляется возможность отображать текст на картинке на том языке, который установлен в браузере.
Зелдман пишет:
Т.е. не Зелдман этот метод придумал, а просто о нём рассказал.
My friend Scott Kellum, design director at Treesaver, has now sent me this refactored code for hiding text, which I hereby christen the Kellum Method:
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
Т.е. не Зелдман этот метод придумал, а просто о нём рассказал.
смею предложить еще один способ, которым я периодически пользуюсь. Его смысл заключется в ацки огромном размере шрифта:
.logo {
background: url(logo.png);
font-size: 999em;
height: 50px;
overflow: hidden;
width: 100px;
}
НЛО прилетело и опубликовало эту надпись здесь
Эмм. А в чем проблема-то? Почти как начал верстать и понимать SEO принципы, верстаю так и не думал, что есть методы даже чьим-то именем названные.
Если картинки нет или отключена — видим текст. Есть — выталкивает текст и видим только картинку. Из старого тестил только в IE6-7, но ничего не указывает на не кроссбраузерность.
<style>
.logo{
display:block;
overflow:hidden;
width:imgWidth px;
height:imgHeight px;
}
</style>
<a href="/" class="logo"><img src="img.png" align="left"/>название сайта</a>
Если картинки нет или отключена — видим текст. Есть — выталкивает текст и видим только картинку. Из старого тестил только в IE6-7, но ничего не указывает на не кроссбраузерность.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Новый метод замены текста картинкой, или избавляемся от -9999px