Here is my link but the problem is i cant put a link inside the grid. I want to make the whole box a clickable link.
* {
padding: 0;
margin: 0;
}
body {
font-family: Hiragino Kaku Gothic Pro W3, Arial;
}
.title-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: auto;
gap: 1px;
background-color: #000000;
padding: 1px;
}
.title {
grid-area: title;
background-color: #FFFFFF;
padding: 10px;
text-align: center;
font-size: 34px;
color: #000000;
grid-column: 1 / span 5;
}
.container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: auto;
gap: 1px;
background-color: #000000;
padding: 1px;
}
.container div {
background-color: #FFFFFF;
padding: 10px;
text-align: center;
font-size: 28px;
color: #000000;
}
.header {
background-color: #86a789 !important;
color: #000000;
font-size: 28px;
color: #FFFFFF !important;
}
.header2 {
background-color: #739072 !important;
color: #000000;
font-size: 28px;
color: #FFFFFF !important;
grid-column: 2 / span 5;
}
.header3 {
background-color: #739072 !important;
color: #000000;
font-size: 28px;
color: #FFFFFF !important;
grid-column: 1 / 2;
}
.header4 {
background-color: #739072 !important;
color: #000000;
font-size: 28px;
color: #FFFFFF !important;
grid-column: 1;
grid-row: 7 / span 2;
align-content: center;
}
.arrow {
font-size: 28px;
color: #739072;
}
.size {
grid-column: 2 / span 2;
text-decoration: none;
}
.size2 {
grid-column: 4 / span 2;
}
.empty {
background-color: #e5e5e5 !important;
grid-column: 4 / span 2;
}
.empty2 {
background-color: #e5e5e5 !important;
}
<div class="title-container">
<div class="title">
<p style="color: #739072 !important; float: left; text-align: left; "><b>リード選びチャート</b><br>愛犬の性格、体重に合わせてリードを選びましょう!</p><img src="flexi-logo.png" width="12%" style="float: right;">
</div>
</div>
<div class="container">
<div class="header"><b>愛犬の性格</b></div>
<div class="header2"><b>愛犬の体重</b></div>
<div class="header3">おとなしい</div>
<div>9 - 15 kg</div>
<div>16 - 20 kg</div>
<div>21 - 25 kg</div>
<div>26 - 30 kg</div>
<div class="header3">普通</div>
<div>9 - 15 kg</div>
<div>16 - 20 kg</div>
<div>21 - 25 kg</div>
<div>26 - 30 kg</div>
<div class="header3">活発</div>
<div>9 - 15 kg</div>
<div>16 - 20 kg</div>
<div>21 - 25 kg</div>
<div>26 - 30 kg</div>
<div class="header3">とても活発</div>
<div>9 - 15 kg</div>
<div>16 - 20 kg</div>
<div>21 - 25 kg</div>
<div>26 - 30 kg</div>
<div class="header3">リードの種類</div>
<div><img src="arrowonly.gif"></div>
<div><img src="arrowonly.gif"></div>
<div><img src="arrowonly.gif"></div>
<div><img src="arrowonly.gif"></div>
<div class="header4">コードタイプ</div>
<div class="size"><a href="">Sサイズ(5m)</a></div>
<div class="empty"></div>
<div class="size">Sサイズ(8m)</div>
<div class="empty"></div>
<div class="header3">とても活発</div>
<div class="empty2"></div>
<div>Sサイズ</div>
<div class="size2">Mサイズ</div>
</div>
Under the header 4 code that’s here I want to put a link.
I can’t put the link in the box, but I don’t know how to do it. Can you please help me guys.
I tried putting it outside the DIV it messes it up
Thank you !
3
Answers
You first need to target the div.size that contains a and display it flex with margin 0 and padding 0. Then target a tag inside and set height 100% and width 100%. (I added text-decoration:none to remove a underline)
Instead of using a
div
, use a linka
and add the css to keep your styles.container > a {}
.Also, note that you can merge some css,
[class^="header]
means "each class starting with header".try this!