Семантический логотип с заменой изображения H1 ... ничего не нажимает? - PullRequest
Новая
       29

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

0 голосов
/ 12 ноября 2011

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

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

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

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

1 Ответ

6 голосов
/ 12 ноября 2011

Очень просто - поместите <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 создает блок нужного вам размера, но без места для отображения текста (фон)изображение появится в верхнем поле, но текст не появится).Большой отрицательный текстовый отступ - это просто безопасность для браузеров, которые иногда ошибаются (старый webkit раньше имел проблемы - не большая проблема в наше время).

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

...