Как сделать div ссылкой?

@Natali_ya · Регистрация: 23.12.2016

Студворк — интернет-сервис помощи студентам

Есть код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<html>
<head>
<style type="text/css">
body{margin:0px;}
.cl0 {width: 1920px; height: 1080px; overflow: visible;}
#bl1 {position: relative; top: 0 px; left: 0 px;}
#bl2 {position: relative; top: 81 px; left: 0 px;}
#bl3 {position: relative; top: 100 px; left: 0 px; float: left;}
.cl1 {position: relative; float: left;}
#bl4 {position: relative; top: 100 px; left: 20 px;}
#bl8 {position: relative; top: 20 px; left: 178 px;}
#bl9 {position: relative; top: 20 px; left: 269 px;}
#bl12 {position: relative; top: 360 px; left: 20 px;}
#bl13 {position: relative; top: 429 px; left: 20 px;}
#bl14 {position: relative; top: 611 px; left: 20 px;}
#bl15 {position: relative; top: 979 px; left: 20 px;}
#bl5 {position: relative; top: 0 px; left: 0 px; float: left;}
.cl2 {position: relative; float: left;}
#bl6 {position: relative; top: 0 px; left: 0 px;}
#bl10 {position: relative; top: 441 px; left: 1558 px;}
#bl11 {position: relative; top: 495 px; left: 1558 px;}
#bl16 {position: relative; top: 979 px; left: 1558 px;}
#bl7 {position: relative; top: 100 px; left: 1899 px;}
#bl17 {position: relative; top: 997 px; left: 0 px;}
</style>
<meta charset="utf-8">
<title>
Вязанные игрушки - Главная
</title>
</head>
<body>
<div class="cl0">
   <div id="bl1"><img src="images\index\index_01.gif"></div>
   <div id="bl2"><img src="images\index\index_02.gif"></div>
   <div id="bl3"><img src="images\index\index_03.gif"></div>
   <div class="cl1">
        <div id="bl4"><a href="catalog.html"><img src="images\index\index_04.gif"></a></div>
        <div id="bl8"><a href="buy.html"><img src="images\index\index_08.gif"></a></div>
        <div id="bl9"><a href="about.html"><img src="images\index\index_09.gif"></a></div>
        <div id="bl12"><a href="contact.html"><img src="images\index\index_12.gif"></a></div>
        <div id="bl13"><img src="images\index\index_13.gif"></div>
        <div id="bl14"><img src="images\index\index_14.gif"></div>
        <div id="bl15"><img src="images\index\index_15.gif"></div>
   </div>
   <div id="bl5"><img src="images\index\index_05.gif"></div>
   <div class="cl2">
      <div id="bl6"><img src="images\index\index_06.gif"></div>
      <div id="bl10"><img src="images\index\index_10.gif"></div>
      <div id="bl11"><img src="images\index\index_11.gif"></div>    
      <div id="bl16"><img src="images\index\index_16.gif"></div>
   </div>
   <div id="bl7"><img src="images\index\index_07.gif"></div>  
   <div id="bl17"><img src="images\index\index_17.gif"></div>   
</div>
</body>
</html>

Надо сделать 4 ссылки. Пробовала многими вариантами, и блок прописывала к а, и див в ссылку писала, и ссылку в див. и онклик прописывала. не работает. Подскажите что сделать.

Dmitry · 27.12.2016, 02:13

у меня так работает

HTML5
1
<a href="index.html"><div style="width:100%; height:100%; display:box; cursor: pointer;">Home</div></a>

@Natali_ya · 27.12.2016, 09:40 **[ТС]**

Так тоже пробовала. Не работает

Dmitry · 27.12.2016, 10:05

ну сделайте через js (onClick)

@Natali_ya · 27.12.2016, 19:44 **[ТС]**

Пробовала

@mrtoxas · 27.12.2016, 20:35

Natali_ya, это ваш код? Я рекомендую его переписать, т.к. он, мягко скажем, некорректен, вы с ним намучаетесь и вот уже даже начали. Если будет интересно правильное решение с корректной версткой, можете создать соответствующую тему, где приложите свой код и изображение макета. Попробуем разобраться как лучше сделать.
В данном коде что-то советовать не имеет смысла. Я вставил произвольное изображение, вместо ваших - там половина блоков друг-друга перекрывают. Но может с вашими картинками вы сумели все подстроить. Уберите пробелы между значением стиля и единицами измерения, например, top: 100px;. Если не поможет, надо переверстывать.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@Natali_ya 0 / 0 / 0 Регистрация: 23.12.2016 Сообщений: 4
	27.12.2016, 09:40 [ТС]
	Так тоже пробовала. Не работает 0

Dmitry 13440 / 7534 / 830 Регистрация: 09.09.2009 Сообщений: 29,554
	27.12.2016, 10:05
	ну сделайте через js (onClick) 0

@Natali_ya 0 / 0 / 0 Регистрация: 23.12.2016 Сообщений: 4
	27.12.2016, 19:44 [ТС]
	Пробовала 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	27.12.2016, 20:35
	Natali_ya, это ваш код? Я рекомендую его переписать, т.к. он, мягко скажем, некорректен, вы с ним намучаетесь и вот уже даже начали. Если будет интересно правильное решение с корректной версткой, можете создать соответствующую тему, где приложите свой код и изображение макета. Попробуем разобраться как лучше сделать. В данном коде что-то советовать не имеет смысла. Я вставил произвольное изображение, вместо ваших - там половина блоков друг-друга перекрывают. Но может с вашими картинками вы сумели все подстроить. Уберите пробелы между значением стиля и единицами измерения, например, `top: 100px;`. Если не поможет, надо переверстывать. 0