Кликабельный логотип или ссылка поверх изображения

Сегодня расскажу немного о верстке, HTML и CSS. Товарищи, верстальщики просьба не судить строго, поскольку я сам таковым не являюсь, а лишь немного знакомлюсь с теми или иными нюансами этого нелегкого дела по мере необходимости.

Задача следующая. В шапке сайта имеется цельное изображение, на котором располагается логотип сайта. Требуется сделать его кликабельным, чтобы при клике мы переходили на главную страницу. Хочу заметить, что следующие действия пригодятся, если вы не верстали шаблон с нуля, а просто хотите внести некоторые правки уже в чью-либо верстку — тему для wordpress, например.

Для начала вырезаем с помощью photoshop изображение логотипа, который должен быть кликабельным:

Далее требуется добавить в HTML код новый слой. Находим в шаблоне место, где выводится изображение в шапке и размещаем там еще один элемент DIV. Получим что-то вроде следующей конструкции:

В файле стилей CSS пишем:

Здесь свойство position: absolute означает, что позиционирование будет происходить от левого верхнего угла страницы, а в данном примере — элемента <div В принципе, для слоя доступны свойства горизонтального и вертикального позиционирования — left и top, которые задают отступы от левого и верхнего краев соответственно. Тем не менее, я встречал также использование обычного отступа margin.

Свойство z-index задает порядок перекрытия слоями друг друга при наложении. Блок DIV с более высоким индексом будет располагаться выше чем тот, у кого значение ниже. Оно также используется для создания кликабельной подложка для фона.

Часто в шаблонах wordpress или любых других определяются отступы или рамки для всех изображений на сайте, поэтому может понадобиться обнуление этих значений:

Если есть какие-то замечания или советы — с радостью выслушаю в комментариях.

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

Попробую разобраться с этим следующий раз.

Гораздо логичней сделать картинку именно фоном, кликабельным (к тому же, судя по закрывающеюмуся <img />, это XHTML, в котором нельзя использовать атрибуты width и height, а также нет title у ссылки и alt у картинки).

Для этого нам потребуется только текст, заключенный в ссылку — <a href=»»>Text</a> (и находящийся в диве и одно свойство CSS:

#header a

Проблема остается в тексте, который останется в центре картинки. Чтобы его сместить чисто по-горизонтали, можно воспользоваться text-indent прямо в нашем #header a.

Если же по-вертикали, то текст внутри ссылки нужно засунуть в спан — <a href=»»><span>Text</span></a>. А уже в CSS писать дополнительные паддинги в самом спане, ну или абсолютное позиционирование (только в этом случае, у header должно быть position:relative, чтобы считалось относительно блока, а не всей области экрана).

Это если кратко ;)

#header a