Смысловой логотип с заменой изображения H1 не оставляет клика?

Я кодирую сайт с большим логотипом компании в левом верхнем углу.

Поэтому я кодирую его с логотипом в качестве фонового изображения, названием компании в H1 и скрываю H1, используя методы замены изображения.

Но в остальной части навигации по сайту нет ссылки «домой». Логотип, вероятно, предназначен для «домашней» ссылки. Но из-за техники семантики/замены изображения нечего нажимать.

Что бы вы сделали в такой ситуации? Поместите что-нибудь прозрачное поверх логотипа — это моя первая мысль, но я хотел бы услышать и другие предложения.


navigation html css semantic-markup image-replacement
person AmbroseChapel    schedule 11.11.2011    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Очень просто — поместите <a href="/home">Company name</a> внутри элемента H1 и примените стили замены изображения к h1#logo a (или любому другому селектору, который вы используете). Вам нужно будет добавить display:block; к стилям, чтобы якорь вел себя правильно.

Дайте мне знать, если вам нужно больше деталей, чем это!

Дополнительная информация:

ОК. Я обычно использую следующие HTML и CSS для замены изображения:

HTML:

<h1 id="logo">
    <a href="/home" title="Back to the home page">[Company name]</a>
</h1>

CSS

#logo a {
  display:block;
  width: 200px; /* Or whatever you like */
  height: 0;
  padding-top: 100px; /* The required height */
  text-indent: -999em; /* negative text indent, leaves the box alone, and in ems to scale with text */
  overflow: hidden;
  background: /*whatever you like */;
}

Это своего рода «двойная сила» — техника height:0/padding-top создает блок нужного вам размера, но без места для отображения текста (фоновое изображение будет отображаться в верхнем отступе, но текст не будет). Большой отрицательный текстовый отступ - это просто защита для браузеров, которые иногда ошибаются (раньше у старого вебкита были проблемы - в настоящее время это не проблема).

Дайте мне знать, как вы идете!

person Ben Hull    schedule 11.11.2011
comment
Да, пожалуйста, уточните... какой метод замены изображения вы предлагаете в своем примере? Если вы сделаете тип margin-left:99999px, a будет удалена вместе с H1. - person AmbroseChapel; 12.11.2011