X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Прописать ссылки на картинке
modlen
modlen
Topic Starter сообщение 13.5.2013, 13:32; Ответить: modlen
Сообщение #1


Участник
***

Группа: User
Сообщений: 239
Регистрация: 14.10.2009
Из: Россия
Поблагодарили: 30 раз
Репутация:   2  


Подскажите пожалуйста. Хочу сделать меню из картинки. Для наглядного примера я разделил картинку на 5 квадратиков где должны стоять ссылки.


Как прописать ссылки к каждому квадратику на картинке?


--------------------
Regvps профессиональные Linux VPS в России.
-2
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
devuser
devuser
сообщение 13.5.2013, 13:36; Ответить: devuser
Сообщение #2


Все будет тип-топ
*****

Группа: Active User
Сообщений: 713
Регистрация: 5.12.2012
Из: Online
Поблагодарили: 342 раза
Репутация:   52  


Абсолютным позиционированием, например

CSS
/*фон меню*/
.menu{ width:300px; height:200px; position: relative; }
/*собственно ссылки*/
a.item{ position:absolute; display:block; width:40px; height:30px;}
a.item1{ left:40px top: 20px;}
a.item2{ left:100px top: 20px;}
a.item3{ left:160px top: 20px;}


и HTML
<div class="menu">
<a href="#" class="item item1"></a>
<a href="#" class="item item2"></a>
<a href="#" class="item item3"></a>
</div>


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
bifot
bifot
сообщение 19.6.2013, 20:51; Ответить: bifot
Сообщение #3


Участник
***

Группа: User
Сообщений: 217
Регистрация: 30.5.2013
Поблагодарили: 49 раз
Репутация:   3  


Вот, пожалуйста!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
body {
    background: #ddd; /* Серый фон (не обязательно). */
}

#menu {
}

#menu a {
    padding: 15px; /* Расстояние в одном блоке до ссылок. */
    margin: 10px; /* Расстояние от блоков. */
    text-decoration: none; /* Стиль ссылки (отсутствует). */
}

.one {
    background: black; /* Черный фон первой ссылки. */
}

.two {
    background: red; /* Красный фон второй ссылки. */
}

.three {
    background: yellow; /* Желтый фон третий ссылки. */
}
.four {
    background: green; /* Зеленый фон четвертой ссылки. */
}

.five {
    background: blue; /* Синий фон пятой ссылки. */
}
</style>
</head>
<body>
<div id="menu">
<a href="#" class="menu one">Главная</a> <!-- Первая ссылка -->
<a href="#" class="menu two">О нас</a> <!-- Вторая ссылка -->
<a href="#" class="menu three">Услуги</a> <!-- Третья ссылка -->
<a href="#" class="menu four">Портфолио</a> <!-- Четвертая ссылка -->
<a href="#" class="menu five">Контакты</a> <!-- Пятая ссылка -->
</div>
</body>
</html>


--------------------
веб-мастер, с радостью адаптирую Ваши сайты под мобильные устройства

портфолио/прайс/отзывы, вконтакте
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Статейные ссылки. Ручное размещение. Средний тИЦ - 300
18 DizzeeR 1691 Сегодня, 15:03
автор: DizzeeR
Открытая тема (нет новых ответов) Ищу человека, который сможет размещать ссылки на форумах
9 _fan_ 1922 Сегодня, 13:21
автор: _fan_
Открытая тема (нет новых ответов) Естественные ссылки в системе ответов Mail.ru
Качественные ссылки с уникальным околоссылочным текстом
19 Vsevseo 2628 Вчера, 11:08
автор: areainfo
Горячая тема (нет новых ответов) Вечные ссылки с 300+ СДЛов, тиц до 750, ЯКи, DMOZ, от 1$/ссылка
вечные ссылки
210 SeoUaSales 71027 16.12.2017, 22:03
автор: SeoUaSales
Открытая тема (нет новых ответов) Ссылки с форумов от 40 рублей без предоплаты
7 skylar 1756 14.12.2017, 14:06
автор: coremission


 



RSS Текстовая версия Сейчас: 18.12.2017, 15:12
Дизайн