oneman oneman - 28 days ago 9
HTML Question

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

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

enter image description here

Answer

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>

Comments