画像へのリンク範囲を指定出来ますか？

お世話になります。
こちらのサイト：https://arekiwaniuk.com/ でメニューを追加したいのですが、
IMDBへのリンク範囲がとても小さくなり、リンク先へ飛べません。

パソコン上でもスマホ上でもどうにかクリックすることは出来ますが、
ほぼほぼvimeoのリンク先に行ってしまいます。

CSSに背景画像の貼り付ける方法なども試みましたが、出来ず終いです・・・。
何か良い方法はありますでしょうか？

HTML
1    <header id="top">
2      <div id="imdb"> 
3        <a href="https://www.imdb.com/name/nm5232596/"><img src="assets/img/icons8-imdb-250.png"></a>
4    </div>
5     <div id="vimeo"> 
6        <a href="https://vimeo.com/arekiwaniuk"><img src="assets/img/icons-vimeo-256.png" alt="Vimeo Profile"></a>
7      </div>
8    </header>

CSS
1#imdb {
2  padding-top: 2.8em;
3  padding-left: 9.25rem;
4  display: block;
5  flex-wrap:wrap;
6  list-style-type: none;
7  background-image: url('assets/img/icons8-imdb-250.png')
8}
9
10#imdb img {
11  width: 44px;
12  height: 40px;
13}
14
15#vimeo {
16  margin-top: -47px;
17  padding-left: 13.25rem;
18  display: block;
19  flex-wrap:wrap;
20  list-style-type: none;
21  background-image: url('assets/img/icons-vimeo-256.png')
22}
23
24#vimeo img {
25  width: 44px;
26  height: 44px;
27}
28

For
1/* ---- Tablet 1024px ---- */
2@media (max-width: 1025px) {
3  .rk-size-12 {
4    height: 230px;
5  }
6
7  .item-0 {
8    height: 100%;
9  }
10
11
12#imdb {
13  padding-top: 1.8em;
14  padding-left: 3.25rem;
15  display: block;
16  position: relative;
17  z-index: 2;
18  flex-wrap:wrap;
19  list-style-type: none;
20}
21
22#vimeo {
23  padding-top: -1.8em;
24  padding-left: 6.25rem;
25  display: block;
26  position: relative;
27  z-index: 2;
28  flex-wrap:wrap;
29  list-style-type: none;
30 }
31
32 .imdb_vimeo img {
33  width: 44px;
34  height: 40px;
35 }
36}
37@media screen and (min-width: 768px) and (max-width: 979px) {
38  .item-0 {
39    width: 80%;
40    margin: 0 auto;
41  }
42
43  .blog-info {
44    width: 100%;
45  }
46  .blog-info {
47   margin-top: 1.7rem;
48}
49
50  .blog-info__title {
51    font-size: 78px;
52  }
53
54#imdb {
55  padding-top: 1.8em;
56  padding-left: 3.25rem;
57  display: block;
58  position: relative;
59  z-index: 2;
60  flex-wrap:wrap;
61  list-style-type: none;
62}
63
64#vimeo {
65  padding-top: -1.9em;
66  padding-left: 7.25rem;
67  display: block;
68  position: relative;
69  z-index: 2;
70  flex-wrap:wrap;
71  list-style-type: none;
72}
73
74  .rk-footer__text {
75    font-size: 10px;
76    letter-spacing: 0;
77  }
78
79  .rk-footer__copy span {
80    letter-spacing: 1px;
81  }
82
83  .rk-footer__text span {
84      font-size: 12px;
85  }
86
87  .rk-footer__text.rk-footer__copy {
88    width: 100%;
89    margin: 0 auto;
90  }
91}
92
93/* ------ Responsive CSS ------- */
94
95/* ------ SP ------ */
96@media (max-width: 767px) {
97  .item-0 {
98    width: 80%;
99    margin: 0 auto;
100  }
101
102  .blog-info {
103    width: 100%;
104  }
105  .blog-info {
106   margin-top: 1.7rem;
107}
108
109  .blog-info__title {
110    font-size: 78px;
111  }
112
113#imdb {
114  padding-top: 1.8em;
115  padding-left: 3.25rem;
116  display: block!important;
117  flex-wrap:wrap;
118  list-style-type: none;
119}
120
121#vimeo {
122  padding-top: -1.9em;
123  padding-left: 7.25rem;
124  display: block;
125  position: relative;
126  z-index: 2;
127  flex-wrap:wrap;
128  list-style-type: none;
129}
130
131  .rk-footer__text {
132    font-size: 10px;
133    letter-spacing: 0;
134  }
135
136  .rk-footer__copy span {
137    letter-spacing: 1px;
138  }
139
140  .rk-footer__text span {
141      font-size: 12px;
142  }
143
144  .rk-footer__text.rk-footer__copy {
145    width: 100%;
146    margin: 0 auto;
147  }
148}

行動規範の内容に同意します

回答2件

こうすればよいのでは？

HTML
1<div id="imdb"> 
2    <a href="https://www.imdb.com/name/nm5232596/"><img src="assets/img/icons8-imdb-250.png"></a>
3</div>
4```↓
5```HTML
6<a id="imdb" href="https://www.imdb.com/name/nm5232596/"><img src="assets/img/icons8-imdb-250.png"></a>

投稿2020/07/25 04:29

kei344

総合スコア69606

YukikoHamabe

2020/07/25 04:58

ありがとうございます！DIVタグが邪魔していたとは盲点でした！ PCでは完璧ですが、スマホだとクリックがVimeoになってしまいます。こちらの改善方法をもしご存知でしたらよろしくお願いしますm(__)m

kei344

2020/07/25 05:02

margin-top: -47px;を打ち消せばよいのでは。また、padding-top: -1.9em;とかpaddingにマイナスをつけているところが多数ありますが、マイナスが指定できるのはmarginでpaddingには指定できません。

YukikoHamabe

2020/07/25 07:50 編集

paddingnに指定しては行けないのですね、、知らなかったです！！ご教示ありがとうございます！ marginの打ち消しとpaddingの修正まではやったのですが・・。相変わらずリンク先に移動するのが一つしか指定出来ません。混乱してしまって、具体的な解決策の見当がつきません。。 https://tipsandtips.xsrv.jp/arekiwaniuk.com/ 因みにレスポンシブデこの構成はオススメではないですよね？ハンバーガーメニューなどにするべきなのでしょうか...

行動規範の内容に同意します

自己解決

HTML
1<header id="top" style="position: relative; z-index: 1; height: 170px;">
2<div id="imdb_b" onclick="brand_click('imdb')" style="width:47px;height:40px;float:left;margin-top: 20%;margin-left: 10%;"><a href="https://www.imdb.com/name/nm5232596/"><img src="assets/img/icons8-imdb-250.png" alt="IMDb Profile"></a></div>
3<div id="vimeo_b" onclick="brand_click('vimeo')" style="width:47px;height:40px;float:left;margin-top: 20%;margin-left: 10px;"><a href="https://vimeo.com/arekiwaniuk"><img src="assets/img/icons-vimeo-256.png" alt="Vimeo Profile"></a></div>
4</header>

JavaScript
1<script>
2var imdb_content = document.getElementById("video-content-imdb");
3var vimeo_content = document.getElementById("video-content-vimeo");
4var imdb_header = document.getElementById("imdb_b");
5var vimeo_header = document.getElementById("vimeo_b");
6var top_header = document.getElementById("top");
7
8
9var userAgentInfo = navigator.userAgent;
10var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
11var flag = true;
12for (var v = 0; v < Agents.length; v++) {
13if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; }
14}
15
16if(flag){
17imdb_header.style.marginTop = "7%";
18vimeo_header.style.marginTop = "7%";
19top_header.style.height = "160px";
20}else{
21imdb_header.style.marginTop = "17%";
22vimeo_header.style.marginTop = "17%";
23top_header.style.height = "100px";
24}
25
26
27function brand_click(brand_id) {
28if(flag){
29if (brand_id == "imdb") {
30imdb_content.style.display = "flex";
31vimeo_content.style.display = "none";
32}
33if (brand_id == "vimeo") {
34imdb_content.style.display = "none";
35vimeo_content.style.display = "flex";
36}
37}
38else{
39if (brand_id == "imdb") {
40imdb_content.style.display = "block";
41vimeo_content.style.display = "none";
42}
43if (brand_id == "vimeo") {
44imdb_content.style.display = "none";
45vimeo_content.style.display = "block";
46}
47}
48}
49</script>