Make a Div into a Link

How to make entire div clickable(into a link)?

if you don't want to use JS in your code, just add a tag before your columns

check this code

#ana_div {
height: 400px;
width: 960px;
margin-right: auto;
margin-left: auto;
background-color: #f7f7f7;

.ikon {
margin-left: 30px;
margin-top: 15px;
position: absolute;

.div {
display: inline-block;
float: left;
height: 80px;
width: 300px;
margin: 10px;

.btn {
border: none;
color: black;
height: 80px;
width: 300px;
font-size: 19px;
cursor: pointer;
background-color: #fff;

.btn:hover {
background-color: #4d4d4d;
 <div id="ana_div">
<a href="">
<div class="div" id="div">
<div class="ikon">
<img src="icon.png">
<button class="btn"> button1</button>

<a href="">
<div class="div" id="div">
<div class="ikon">
<img src="icon.png">
<button class="btn"> button2</button>

How do I make entire div a link?

You need to assign display: block; property to the wrapping anchor. Otherwise it won't wrap correctly.

<a style="display:block" href="">
<div class="xyz">My div contents</div>

Turn Div into Link

I think IE's actually responding properly in this case.

A div is a block-level element; so it shouldn't be contained within an inline-element such as, for example, an a. If you use a span (in place of div) does that work in both IE and Firefox?

If you want to make it look like a link (in terms of the cursor), then you may want to use:

a > div, /* please change your mark-up to the following */
a > span {cursor: hand; /* for earlier versions of IE */
cursor: pointer; /* for, I think, IE 7+ and FF etc. */

How can I turn the entire div into a clickable link?

You need to make your a tag full width and height of the li. Moving padding:20px; to your a tag css and adding display:block; allows the links to be clickable, without modifying your HTML.

Update your li tag css to:

.navigation ul li {
display: inline-block;

Update your a tag css to:

.navigation ul li a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 20px;

Full Code:

body {  margin: 0;  padding: 0;  font-family: sans-serif;  background: url("../images/bg.png") no-repeat;  background-attachment: fixed;}
header { background-color: #088CAF; color: white; width: 100%; padding: 20px 0; text-align: center;}
.navigation { position: sticky;}
.navigation ul { background-color: #075E75; overflow: hidden; color: white; padding: 0; text-align: center; margin: 0; border-top: 2px solid #2E2E2E; border-bottom: 2px solid #2E2E2E;}
.navigation ul li { display: inline-block; }
.navigation li:hover { background-color: #069DAA;}
.navigation ul li a { text-decoration: none; color: white; font-size: 20px; padding: 20px; display:block;}
.footer { color: white; text-align: center; width: 100%; background-color: #2E2E2E; border-top: 2px solid #099C9E; position: absolute; bottom: -800px; height: 80px; overflow: hidden;}
<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>Squallz Test Page</title>    <link rel="stylesheet" href="css/style.css">  </head>  <body>    <header>      <h1>This is a header</h1>    </header>    <div class="navigation">      <ul>        <li><a href="#">Home</a></li>        <li><a href="#">About</a></li>        <li><a href="#">Repo</a></li>        <li><a href="#">Code</a></li>      </ul>    </div>    <div class="footer">      <div class="footerinfo">        <p id="copyright">Copyright © Squallz 2017 - Rights Reserved</p>        <p id="info">Personal website by <b>Squallz</b></p>      </div>    </div>  </body></html>

Make a div a link in JavaScript?

you can easily make it so that when you click your div you go to another page, like this (using jQuery)

$('#myId').click(function () {
window.location = 'newurl.php';

Make entire div a hyperlink

<a href=''>
<div class="pad">
<div style="height:286px;width:286px;background:url('') top center no-repeat;background-size:cover">
<span>View all</span>

wrap a tag around the whole thing!

HTML - how to make an entire DIV a hyperlink?

You can add the onclick for JavaScript into the div.

<div onclick="location.href='newurl.html';"> </div>

EDIT: for new window

<div onclick="'newurl.html','mywindow');" style="cursor: pointer;"> </div>

Related Topics

Leave a reply