How do I make a fixed position div a clickable link?

Question

I have seen the question make a div a link but the basis behind it is having the div position set to relative . But in my case where I have centered my div and it is also circle (I don't know if that makes a difference or not) but I have used fixed position so that no matter what size screen you have, it is always horizontally centered.

Based on that information, how should I go about making my whole logo (div) a clickable link.

/* Centering of the content */
div.homepage {
 position: fixed;
   text-align: center;
  margin: 0 auto;
 left: 0;
 right: 0;
}

/* Logo Design */
div.circle {
 margin: 0 auto;
 border-radius: 50%;
 width: 900px;
 height: 900px;
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
 background:
 linear-gradient(135deg, #dddada 22px, #d9ecff 22px, #fff 24px, transparent 24px, transparent 67px, #fff 67px, #fff 69px, transparent 69px),
 linear-gradient(225deg, #dddada 22px, #d9ecff 22px, #fff 24px, transparent 24px, transparent 67px, #fff 67px, #fff 69px, transparent 69px)0 64px;
 background-color:#dddada;
 background-size: 64px 128px 
}

p.pavel, p.design {
 font-family: 'Open Sans', sans-serif;
 font-size: 12em;
 color: #708090;
 margin: 0;
}

<link href="css/index.css" rel="stylesheet" type="text/css">
<body>
 <div class="homepage">
  <div class="circle">
   <p class="pavel">Pavel</p>
   <p class="design">Design</p>
  </div>
  <ul>
   <li class="button"><a href="index.html" data-text="Home">Home</a></li>
   <li class="button"><a href="about.html" data-text="About">About</a></li>
   <li class="button"><a href="services.html" data-text="Services">Services</a></li>
   <li class="button"><a href="contact.html" data-text="Contact">Contact</a></li>
  </ul>
 </div>

This is what the site looks like and I want the big circle bit to be clickable

With CSS you could simulate clickable-like visual effects, but sole `div` is not clickable. You need to either embed an `a` element, or use some JavaScript. — Leo, Nov 07 '16 at 03:44

junkfoodjunkie · Accepted Answer · 2016-11-07T03:57:13.533

Here's a working version of a link inside the <div> making the whole circle clickable. Granted, having <p>-tags inside an <a> isn't entirely kosher either, but it's allowed in HTML 5.

/* Centering of the content */
div.homepage {
 position: fixed;
   text-align: center;
  margin: 0 auto;
 left: 0;
 right: 0;
}

/* Logo Design */
div.circle,a.circle {
 margin: 0 auto;
 border-radius: 50%;
 width: 900px;
 height: 900px;
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
 background:
 linear-gradient(135deg, #dddada 22px, #d9ecff 22px, #fff 24px, transparent 24px, transparent 67px, #fff 67px, #fff 69px, transparent 69px),
 linear-gradient(225deg, #dddada 22px, #d9ecff 22px, #fff 24px, transparent 24px, transparent 67px, #fff 67px, #fff 69px, transparent 69px)0 64px;
 background-color:#dddada;
 background-size: 64px 128px;
      text-decoration: none;
}

p.pavel, p.design {
 font-family: 'Open Sans', sans-serif;
 font-size: 12em;
 color: #708090;
 margin: 0;
}

<link href="css/index.css" rel="stylesheet" type="text/css">
<body>
 <div class="homepage">
  <div class="circle">
           <a class="circle" href="#">
   <p class="pavel">Pavel</p>
   <p class="design">Design</p>
           </a>
  </div>
  <ul>
   <li class="button"><a href="index.html" data-text="Home">Home</a></li>
   <li class="button"><a href="about.html" data-text="About">About</a></li>
   <li class="button"><a href="services.html" data-text="Services">Services</a></li>
   <li class="button"><a href="contact.html" data-text="Contact">Contact</a></li>
  </ul>
 </div>

Naltroc · Answer 2 · 2016-11-07T03:52:38.030

-1

Anything you wrap in an anchor tag <a href='http://link.com'></a> will be a link, including all of the things inside the main div you are wrapping. Note that this includes the margins. For example,

<link href="css/index.css" rel="stylesheet" type="text/css">
<body>
    <div class="homepage">

        <a href="http://go-somewhere.com">
            <div class="circle">
                <p class="pavel">Pavel</p>
                <p class="design">Design</p>
            </div>
        </a>

The circle will now be clickable. But since it is centered with margin: 0 auto;, the margins extend through the empty space.

To fix this, put your circle in a container. Give the container the width and position you want, then the circle link inside the container.

Here is a link to a working pen:

http://codepen.io/anon/pen/ENapEd

and the updated HTML/CSS

<div class='container'>
  <a href="#">
        <div class="circle">
      <p class="pavel">Pavel</p>
      <p class="design">Design</p>
        </div>
  </a>
</div>

CSS

.container {
  width: 900px;
  position: relative;
  margin: 0 auto;
}

Note that position: fixed; will not keep your circle centered. You want position: relative for that.

edited Nov 07 '16 at 03:52

answered Nov 07 '16 at 03:38

Naltroc

989
1
14
34

if you try that yourself, youll find it makes virtually my whole clickable instead of just the circle. I did try this before I posted my question, but it doesn't work as intended – oneman Nov 07 '16 at 03:40
also gives a warning "invalid place for div" when using eclipse – oneman Nov 07 '16 at 03:41
The entire width of the div will be a link. Divs naturally take up 100% the width of their parent element. If you want the link to be only only on the circle, give it a specific width. – Naltroc Nov 07 '16 at 03:42
it does have a specific width, 900px. check original post to see the styling applied to div.circle – oneman Nov 07 '16 at 03:44
@oneman good point. I checked it out in the inspector. Looks like the reason is the margin on the div. An updated edit to the answer in a minute. – Naltroc Nov 07 '16 at 03:49

How do I make a fixed position div a clickable link?

2 Answers2