Html Question posted in
Some basic documentation can be found here.

Html – Is there a way to put LINK inside the CSS GRID?

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 !

Tags:

3

Answers


  1. 0

    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)

    * {
  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;
}

div.size:has(a){
  display:flex;
  margin:0;
  padding: 0;
}

div.size a{
  height:100%;
  width:100%;
  text-decoration:none;
  color:white;
  background-color:blue;
}

.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>
    Login or Signup to reply.
  2. 0

    Instead of using a div, use a link a 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".

    * {
  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,
.container > a {
  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>
  <a class="size" href="#">Sサイズ（5m</a>
  <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>
    Login or Signup to reply.
  3. 0 
    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CHART</title>
<style>
    *{ 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;
        position: relative;
    }
    
    .container a {
        text-decoration: none;
        color: inherit;
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
    }
    
    .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;
    }
    
    .size2 {
        grid-column: 4 / span 2;
    }
    
    .empty {
        background-color: #e5e5e5 !important;
        grid-column: 4 / span 2;
    }
    
    .empty2 {
        background-color: #e5e5e5 !important;
    }
</style>
</head>
<body>
    
    <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"><a href="#">Sサイズ（8m）</a></div>
        <div class="empty"></div>
        
        <div class="header3">とても活発</div>
        <div class="empty2"></div>
        <div>Sサイズ</div>
        <div class="size2">Mサイズ</div>
    </div>
    
</body>
</html>

    try this!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search