Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Кнопка-изображение и поисковая оптимизация

Автор: Satellence 14.7.2011, 01:20

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

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

Код


<a href="/.../...">
    <img src="/..." alt="Название кнопки">
</a>

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

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

Код


<a href="/.../...">
    <div></div>
</a>

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

Код


<a href="/.../...">
   <div class="hidden">текст кнопки</div>
    <div class="img"></div>
</a>

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

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

Автор: ayax2005 14.7.2011, 08:10

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

Автор: SelenIT 14.7.2011, 21:15

Цитата(Satellence @ 14.7.2011, 01:20

)

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

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

Цитата(Satellence @ 14.7.2011, 01:20

)

А если его спрятать с помощью нулевой высоты?

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

Автор: Satellence 14.7.2011, 23:11

Цитата(SelenIT @ 14.7.2011, 21:15

)

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

Код


<a>
  <div class="image"></div>
  <div>текст</div>
</a>

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

Автор: olldman 15.7.2011, 03:51

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

Чем не угодил обычный список, ведь это меню?
HTML:

Код


<ul>
   <li><a href="" title="">текст ссылки какой угодно длинны</a></li>
</ul>

CSS:

Код


ul{list-style:none;}
ul li{width:**px;/*при необходимости - height:*px;*/}
ul li a{display:block;background:url(../img/pic-on.gif);text-indent:-9999px;}
ul li a:hover{background:url(../img/pic-act.gif);

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

Автор: SelenIT 15.7.2011, 08:45

Цитата(olldman @ 15.7.2011, 03:51

)

Кто ж в ссылку ставит блочный элемент?

http://html5doctor.com/block-level-links-in-html-5/ smile

Цитата(olldman @ 15.7.2011, 03:51

)

Чем не угодил обычный список, ведь это меню?

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

Цитата(olldman @ 15.7.2011, 03:51

)

для того, чтобы небыло эффекта запаздывания с подгрузкой второго изображения при hover

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

Автор: Satellence 15.7.2011, 09:56

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

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

Автор: SelenIT 15.7.2011, 10:13

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

Цитата(olldman @ 15.7.2011, 03:51

)

text-indent:-9999px;

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

Автор: olldman 15.7.2011, 10:53

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

Автор: ayax2005 15.7.2011, 11:46

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

Автор: SelenIT 15.7.2011, 12:04

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

Автор: olldman 15.7.2011, 12:21

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

Цитата

" Делайте сайты для людей, а не для ботов"

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

Цитата

В моем варианте ПС таки как раз увидят анкор в ссылке, а пользователь то, что хочет ему показать автор.

Как то так ...

Автор: SelenIT 15.7.2011, 12:48

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

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

Автор: olldman 15.7.2011, 12:56

Цитата

Чистое решение, имхо - вставка графики псевдоэл-том

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

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

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

(сори за оффтоп)

Автор: SelenIT 15.7.2011, 13:07

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

Автор: olldman 15.7.2011, 13:22

Ну что сказать - для такого варианта существует атрибут title для элемента А, а в случае таки недозагрузки графики, ставим подходящий к дизайну фон ссылке:

Код


ul{list-style:none;}
ul li{width:**px;/*при необходимости - height:*px;*/}
ul li a{display:block;background:#CCC url(../img/pic-on.gif);text-indent:-9999px;}
ul li a:hover{background:#CCC url(../img/pic-act.gif);

p.s. чет, по-моему, мы уже просто изгаляемся друг над другом, за сим - всё. smile

Автор: SelenIT 15.7.2011, 13:41

Я не изгаляюсь, а борюсь за юзабилити ;). Title - не панацея, для него надо навести мышкой, а если юзер телепат и догадается, что на однотонный прямоугольник надо навести, он и текст угадает smile

. Зачем? Зачем подпирать костылями самый убогий метод image replacement'а, когда есть море других, без этого недостатка?

Автор: Satellence 15.7.2011, 23:01

По-моему, метод

Код


<a href="..">
    <div class="image"></div>
    <div class="text">текст ссылки</div>
</a>

Самый оптимальный.
Верхний div закрывает текст картинкой.
Если картинки отключены - пользователь видит текст ссылки, максимально похожий на предполагаемое изображение.
Тем самым, ссылка уже видна, даже если интернет медленный и картинка еще не загрузилась.

Автор: SelenIT 16.7.2011, 17:03

Вообще-то, если вынести за скобки резкость и безапелляционность, в главном olldman был прав — не следует множить сущности (элементы) без явной необходимости. При возможности абстрагироваться от IE7-, я бы сделал как-то так:

Код


<a href="..">текст ссылки</a>

Код


.menu a {
   display: block; /* или inline-block, если меню горизонтальное, а вообще по ситуации */
   position: relative;
}
.menu a:after {
   position: absolute;
   top: 0; right: 0; left: 0; bottom: 0;
   background: url(адрес_картинки.png) 50% 50% no-repeat;
}

Но если нужна кроссбраузерность с IE7 и ниже, то я скорее смирюсь с вынужденным злом в виде пустого дива/спана (вместо :after), чем с риском нечитаемости текста ссылки...