Делаю меню сайта, где дизайн не позволяет сделать обычный отформатированный текст на фоне кнопки. 
Текстом кнопки является изображение. Тут я задаюсь вопросом - как сделать лучше всего и для поисковиков, и для пользователей, и для меня.

В первую очередь, конечно, выходит это:


Но этим способом невозможно нормально выделять состояния по a:hover

Можно сделать 


и для внутреннего div стилем указывать фоновое изображение. Так с подсветкой кнопок под курсором все отлично, но поисковики не увидят ссылку.


Этот вариант, насколько я знаю, опасен, т.к. поисковики не особо любят спрятанный текст. 
А если его спрятать с помощью нулевой высоты? 

Вообщем, мне нужен Ваш совет

поисковики не парсят CSS. Скрытый текст, за который вы можете получить уродбаллы - это несколько другое, поэтому ссыка с бэкграундом и текстом нулевой высото - ничем вам не грозит, если конечно ваш скрытый текст будет вменяемым)

Возможно, используя св-во clip. Но много возни.


А нельзя его просто накрыть позиционированным дивом с картинкой поверх? Заодно и юзеры с отключенными/недогрузившимися картинками (такие редко, но еще бывают;) не пострадают...

Сегодня так и сделал =)
В итоге:


для .image абсолютная позиция, что закрывает текст.

Вы что, белены объелись? Кто ж в ссылку ставит блочный элемент? Вот почему всегда придумываются проблемы на пустом месте, а потом мужественно преодоливаются?  
Чем не угодил обычный список, ведь это меню? 
HTML:

CSS:

А еще лучше использовать одну картинку - спрайт, для того, чтобы небыло эффекта запаздывания с подгрузкой второго изображения при hover. Ведь приводил простейший пример совсем недавно: _http://realtsib.ru/oldman/sprite/index.html
И никаких картинок в коде html не нужно, если в них нет необходимости, все лежит в файле стилей.

Это сообщение отредактировал(а) olldman - 15.7.2011, 03:56

Разработчики HTML5  


Ручаетесь? ;)


Так автор темы об этом с самого начала говорит, BTW 

olldman, спасибо, попробую.. смутные подозрения на счет ie.

А изображение у меня итак одно для всего меню, которое сменяется используя position

Кстати, вот это

гадость страшная, имхо худший из всех вариантов image replacement-а. Заставлять несчастного юзера, у которого по какой-то причине не догрузилась картинка, пялиться в белый фон лишь ради экономии одного тега (который в правильных браузерах без ущерба заменяется псевдоэлементом)... Особенно для ссылок, на которых это безобразие растягивает ненавидимую массами пунктирную рамку фокуса на всю ширину экрана, превращая ее из неназойливого и по-своему полезного элемента в настоящую грязь для дизайна. Появление этого "способа" было большой ошибкой, а тиражировать ее сейчас - имхо, просто вредительство.

На счет гадости - вопрос спорный. Для меня гадостью являются как раз лишние элементы разметки, внесенные в код лишь для представления. 
В моем варианте ПС таки как раз увидят анкор в ссылке, а пользователь то, что хочет ему показать автор. В коде же html присутствуют только те элементы, которые логически нужны(семантика) и ничего более. И овцы сыты и волкам бояться нечего.
Ну а насчет картинки - ну так хочет ТС, спорить с его желаниями не входит в планы.

Вроде вопросы был по SEO)

olldman, я согласен, мусор в разметке - тоже зло. Но верстка, как и политика - искусство возможного, и вся состоит из компромиссов. И для меня то зло, из-за которого пенсионер из глухой деревни, сидящий на GPRS  с перебоями, может не увидеть ссылку " вызвать врача" ( утрирую, но чуть;), явно хуже зла, за которое поругает лишь коллега-верстальщик. И представители поисковиков в один голос говорят "делайте сайты для людей, а не для ботов"...

Это сообщение отредактировал(а) SelenIT - 15.7.2011, 12:08

Ну хорошо, давайте попробуем оттолкнуться от вашего "недогрузится картинка" - если она есть на сервере и путь к ней указан верно, то загрузится в любом случае, ежели нет, то разницы я не вижу, будь она представлена элементом IMG(а здесь как раз большой АХ в виде вылезшего содержимого атрибута alt), либо прописана фоном элементу "А" в файле стилей. Если у деда отключен показ графики, то увы и ах - как в первом, так и втором варианте он неувидит ничего.
Я же пытаюсь сказать, что нет необходимости (даже вредно) прописывать графический элемент только для представления. 
Ну а в вашем контексте по поводу html5, элементам DIV вообще не место в этой конструкции (да и ТС не обозначил изначально тип его документа).
 - именно, для людей, именно по этой причине не стоит вталкивать в html-код все, что под руку попало (лишь бы костюмчик сидел) - не забываем о пользователях и "пенсионер-ах из глухой деревни, сидящих на goes с перебоями" - незачем им грузить лишний код(читай - килобайты), можно обойтись и минимальным, самым близким по смыслу, набором элементов разметки.
Ну и я же уточнил:

Как то так ...

В случае IMG при отключенной или битой графике юзер увидит тот самый alt. Но я агитировал не за граф. элемент, а против скрытия текста по умолчанию. Чистое решение, имхо - вставка графики псевдоэл-том, но старые ИЕ...

А div в ЖHTML оставили как раз в качестве вынужденной меры для целей оформления;)

Да каким бы вы способом не вставляли графику, применительно к дедушке в деревне - он ее не увидит.

В моем  понимании, чистое решение - подбор элемента разметки, подходящего по смыслу, а вот его представление - отдаем на откуп CSS.


... задумчиво: дедушка .. GPRS в глухой деревне ... продвинутый такой, дедушка   (сори за оффтоп)

Фиг с графикой. Но прочитать ссылку он должен всегда, это аксиома. И если ЦСС-оформление может ему в этом помешать - в топку такой ЦСС, какой бы идеальной ни была при нем разметка.