CODEWITHSUNDEEP
htmlcss
michaelmcgurk
michaelmcgurk

Reputation: 6509

Make entire div area clickable hyperlink

How do I make the entire red area 'clickable'? I'd rather not use Javascript if I can help it.

https://jsfiddle.net/8m6z0h22/

.block {
    width: 200px;
    height: 272px;
    background:red;
    border: 0;
}
<div class="block"> 
					 <h3>Book a season ticket with Manchester United</h3>
					 <ul> 
						<li><a href="#" title="Read more about Manchester United">Read more about Manchester United <span class="bold">></span></a></li> 
					 </ul>
				</div>

Upvotes: 3

Views: 11318

Answers (3)

DanielTheGeek
DanielTheGeek

Reputation: 193

Just put the div inside the anchor tag: 

<a href="#" title="Read more about Manchester United"><div class="block"> 
  <h3>Book a season ticket with Manchester United</h3>
  <ul> 
    <li>Read more about Manchester United <span class="bold">></span></li> 
  </ul>
 </div>
</a>

Upvotes: 0

Mohammad Usman
Mohammad Usman

Reputation: 39382

Wrap all your code inside <a> tag instead of <div>.

.block {
    text-decoration: none;
    width: 200px;
    height: 272px;
    background:red;
    border: 0;
    display: block;
}
.block h3 {
  color: black;
}
.block ul li {
  text-decoration: underline;
}
<a href="#" title="Read more about Manchester United" class="block"> 
  <h3>Book a season ticket with Manchester United</h3>
  <ul> 
    <li>Read more about Manchester United <span class="bold">></span></li> 
  </ul>
</a>

Upvotes: 8

Sagar Kodte
Sagar Kodte

Reputation: 3815

you can add whole div in a

.block {
    width: 200px;
    height: 272px;
    background:red;
    border: 0;
}
a{

    text-decoration:none;
}
<a href="#" title="Read more about Manchester United"><div class="block"> 
					 <h3>Book a season ticket with Manchester United</h3>
					 <ul> 
						<li>Read more about Manchester United <span class="bold"></span></li> 
					 </ul>
				</div>
 </a>

Upvotes: 0

Related Questions