вторник, 17 апреля 2012 г.

Фоновое изображение как ссылка


Делая сайт для своей группы столкнулся с проблемой — логотип был сделан в виде background-image в div#header, тем самым не было возможности напрямую использовать его как ссылку на главную страницу.

Однако всё решается довольно просто путём добавления ссылки в виде элемента <span> и помещения его в блок с абсолютным позиционированием с размерами, равными размеру фонового изображения, вкупе со скрытием содержимого <span> через CSS.

Следующий код наглядно иллюстрирует этот способ:

HTML-часть:

...
<div id="header">
  <a href="index.php" id="logo"><span>На главную</span></a> 
...

CSS-часть:

...
div#header
{
   height:145px; 
   padding:0 0 0 0; 
   background: url(../image/stamp_new.png) no-repeat; /* логотип */
}

a#logo
{
    position: absolute;
    top: 0;
    left: 0;
    width: 310px;
    height: 145px;
}

a#logo span {display: none;}
...

Комментариев нет:

Отправить комментарий