css, gradient, links. link, ссылка, ссылки, градиент, ксс, цссВыполняя верстку сайта, мне нужно было сделать так, чтобы некоторая часть “шапки” была - ссылкой.

Безусловно, можно было вставить html-кусок кода где я бы описал точек-координат ссылки, с помощью тегов:

<AREA SHAPE=”poly” COORDS=”координаты по x и y”>

Однако я пошел совсем другим путем.

Итак, в CSS моя шапка выводится следующим способом:

#head {
color: #fff;
clear: both;
background: #fff url(images/searchbg.jpg) no-repeat;
padding: 0px 0 25px 5px;
width: 960px;
position:relative;
margin: 0;
}

Создаем еще один класс:

#head #logo {
position:absolute;
top:1px; //отступ сверху
left:48px; //отступ справа
}

#head #logo a {
display:block;
width:100px; //ширина ссылки
height:50px; //высота
}

Теперь заходим в php файл и находим строчку, где выводится “шапка”:

<div id=”head”>

И добавляем наш созданный ранее класс:

<div id=”logo”>
<a href=”ссылка”></a>
</div>

В итоге, мы получили прозрачный DIV, который наложен на наш логотип (который прорисован в шапке сайта). Чтобы определить отступы слева и сверху воспользуйтесь линейкой на панели в PhotoShop’e.

Другие посты