Главная » Создание сайтов » Верстка » Делаем кусок изображения — ссылкой

Делаем кусок изображения — ссылкой

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; <strong>//отступ сверху</strong>
left:48px; <strong>//отступ справа</strong>
}

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

Теперь заходим в php файл и находим строчку, где выводится «шапка»:
<div id="head">
И добавляем наш созданный ранее класс:
<div id="logo">
<a href="ссылка"></a>
</div>

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

Комментарии — 2 комментария

  1. #40 WebMast в 12:11, 13 октября 2008:

    Ответить | Цитировать

    Если вы не хотите подмерять в фотошопе, можно использовать красивый, приятный виджет (для оперы естественно).

    widgets number 5228

  2. #41 Artur в 14:53, 13 октября 2008:

    Ответить | Цитировать

    Спасибо, всегда интересовало как это делают :)

    ЗЫ: лексдрайв — спамер :)

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting