Clickable underLink

HTML & CSS
1 
<!DOCTYPE HTML>

<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>clickable underLink</title>
<style media="screen">
#over {
display:flex;
width:100%;
position: fixed;
top: 0;
left: 50%;
transform: translate( -50%, 0 );
padding: 0.5em 1em;
background: pink;
}
#under {
padding: 1.5em 1em;
background: yellow;
}
</style>
</head>
<body>
<div id="over">
<div style="width:34%"><a href="[http://twitter.com](http://twitter.com/)" style="background:cyan">leftLink</a></div>
<div style="width:1%"></div>
<div style="width:30%;text-align:center"><a href="[http://sitepoint.com](http://sitepoint.com/)" style="background:cyan">centerLink</a></div>
<div style="width:1%"></div>
<div style="width:34%;text-align:right"><a href="[http://facebook.com](http://facebook.com/)" style="background:cyan">rightLink</a></div>
</div>
<a href="[http://google.com](http://google.com/)"><div id="under" style="height:100px"></div></a>
<div>
main contents<br>
main contents<br>
</div>
</body>
</html>

I have four links at http://form.kr/dest/over301.php.
They are leftLink going to twiter, centerLink going to sitepoint, rightLink going to facebook, and underLink going to google

I like to make it going to google by clicking the yellow box when a user click on the pink area,

The yellow box looks like just below the pink box, but it is, in fact, under the pink box.
You can see it is under the pink box at http://form.kr/dest/over302.php by removing the background color PINK.

2

Hi there joon1,

does this help…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled Document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">

body {
    background-color: #f0f0f0;
    font: normal 1em / 150% sans-serif;
 }
 
#twitter,
#sitepoint,
#facebook {
    position: fixed;
    left: 0.5%;
    padding: 0.25em 0.5em;
    background-color: #0ff;
 }
 
#sitepoint {
    left: 50%;
    transform: translate( -50%, 0 );
 }
 
#facebook {
    left: 99.5%;
    transform: translate( -100%, 0 );
 }
 
#content {
    background-color: #fff;
 }
 
h1 {
    text-align: center;
    text-transform: capitalize;
 }
 
#google {
    display: block;
    padding: 4em;
    background-color: #ff0;
    text-align: center;
 }

#content p {
    margin: 1em 2em;
 }
</style>

</head>
<body> 
 <a id="twitter" href="https://twitter.com">twitter</a>
 <a id="sitepoint" href="https://sitepoint.com">sitepoint</a>
 <a id="facebook" href="https://facebook.com">facebook</a>
 
 <div id="content">
 
  <a id="google" href="https://google.com">google</a>
  
  <h1>page description</h1>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eleifend rhoncus nisl, in aliquam tellus sollicitudin sit amet. Sed quis placerat felis. Vivamus sed libero euismod, congue massa vel, bibendum augue. Curabitur tempus pharetra laoreet. Suspendisse et mattis dolor, vitae molestie dolor. Sed varius neque vitae erat tincidunt, in gravida nunc scelerisque. Proin ultricies leo non dui commodo, id cursus nulla posuere. Nulla placerat bibendum nisi, sit amet dictum ligula auctor vel. Morbi dignissim lorem varius nulla tristique rutrum. Donec elementum aliquet tellus vel tristique. Proin gravida faucibus finibus. Morbi tincidunt libero metus, vel maximus eros molestie eget. Curabitur blandit sapien quam, sed aliquet eros tempor eget. Morbi enim turpis, interdum et massa ut, vehicula pretium risus. Sed ac gravida nunc. Nunc volutpat cursus lacus, a tempus ligula tempus sit amet.</p>

  <p>Vestibulum elementum leo rutrum mattis consectetur. Integer ac finibus ipsum. Fusce in enim vel ligula efficitur ultricies. Quisque interdum sit amet leo in aliquet. Donec elementum nisl vel nisl cursus ullamcorper. Vivamus accumsan magna at ullamcorper commodo. Maecenas consectetur nisl quis ligula molestie posuere. Donec vel placerat nisi, vitae feugiat erat.</p>

  <p>Quisque non augue mauris. Donec scelerisque augue tellus, sit amet fringilla est imperdiet laoreet. In risus elit, molestie et malesuada eget, efficitur non ligula. Quisque imperdiet orci facilisis, dictum tellus ut, sollicitudin arcu. Phasellus gravida elit a commodo dictum. Aenean commodo tellus et neque varius ultricies. Sed imperdiet odio sed magna sagittis finibus. Morbi egestas lectus id rhoncus tempor. Nullam nec ultricies eros. Aliquam at dui sapien.</p>

  <p>Nullam viverra eget sem eu hendrerit. Etiam sollicitudin placerat odio, ut posuere nisi vehicula id. Etiam faucibus nunc ante. Suspendisse id placerat felis. In ultrices eu dui eget finibus. Nam ultricies vehicula massa sit amet consectetur. Curabitur sodales, ex quis interdum blandit, ligula quam tempor nisl, id cursus tellus lorem ut enim. Sed ut fringilla leo. Sed lacinia varius finibus. Nullam non interdum mauris. Suspendisse ante ipsum, vehicula et nisi vitae, accumsan porttitor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque gravida lorem eros, id eleifend nibh vehicula at. Maecenas vulputate diam neque, in fringilla nisl lacinia id. Pellentesque at dolor sit amet velit lacinia ultrices. Praesent nec velit vitae erat lobortis gravida.</p>

  <p>Mauris non neque facilisis, scelerisque leo eget, congue nunc. Integer posuere ut mi ac dapibus. Phasellus velit nisl, cursus sit amet lorem eget, iaculis porttitor nulla. Donec id euismod nisl, sit amet dignissim turpis. Phasellus quis nisi malesuada, consequat leo sit amet, interdum turpis. Sed dapibus mattis turpis, nec ultricies neque lobortis nec. Phasellus ultrices odio at tempus convallis. Vestibulum et magna accumsan, posuere magna id, commodo quam.</p>   

 </div>

</body>
</html>

coothead

1 Like
3

Thank you for your help, coothead.

it works fine at http://form.kr/dest/under/overFix.php.
When I do scroll down, the 3 cyan color links, twiter, sitepoint, and facebook, are fixed on the top.
It works perfect, as I expected!

This time, I like to make a variation of it.
http://form.kr/dest/under/underFix.php is one of my trials for the variation…

(1) When I do scroll down, the yellow box which is going to google is fixed on the top, and the 3 cyan color links are moving with main contents.

(2) yellow box top position is “0px”
its top position is currently 50px in the trial link for showing the 3 cyan links.

(3) when I scroll down, yellow box should be under the 3 cyan links and .the main contents.
(yellow box will be actually hidden. but a user click it on the hidden area, then, it will go to google.
if any links are in the main contents, and click the links it will go to somewhere by links instead of going to google because main contents is over the yellow(hidden) box and yellow box is under the main contents.)

(4) The 3 cyan links are positioned that twitter is at leftmost, sitepoint is at center, and facebook is at right most.

4

http://form.kr/dest/under/underFix01.php is anoter trial.

The yellow box should be hidden under the 3 cyan links and the main contents.

Giving “z-index:-1” to the yellow box, it is hidden and under but it is not clickable at http://form.kr/dest/under/underFix02.php.
I like to make it clickable when pure text is over on it.

5

Hi there joon1,

have a look at this example…

https://codepen.io/coothead/full/rNVqRRW

This is the code…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled Document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">

body {
    margin: 0;
    background-color: #fff;
    font: normal 1em / 150% sans-serif;
 }
 
#google1, 
#google2 {
    position: fixed;
    width: 100%;
    height: 6em;
    display: block;
 }

#google2 {
    z-index:-1;
    border-bottom: 1px solid #666;
    background-color: #ff0;
    background-image: linear-gradient( to bottom, #ff0, #bb0 );
    box-shadow: 0 0.5em 0.5em rgba( 0, 0, 0, 0.4 );
 }

#content > div:nth-of-type(1) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 6em;
 }
 
#content > div:nth-of-type(1)  a {
    position: relative;
    z-index: 2;
    padding: 0.25em 0.5em;
    margin: 0.5em;
    background-color: #0ff;
    border: 1px solid #003;
    border-radius: 0.4em;
    color: #003;
    text-decoration: none;
 }

h1 {
    text-align: center;
    text-transform: capitalize;
 }
 
#content p {
    margin: 1em 2em;
 }
</style>

</head>
<body>

 <a id="google1" href="https://google.com" title="go to Google"></a>
 <a id="google2" href="#"></a>
 
 <div id="content">
 
 <div>
  <a href="https://twitter.com">twitter</a>
  <a href="https://sitepoint.com">sitepoint</a>
  <a href="https://facebook.com">facebook</a>
 </div>
  
  <h1>page description</h1>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eleifend rhoncus nisl, in aliquam tellus sollicitudin sit amet. Sed quis placerat felis. Vivamus sed libero euismod, congue massa vel, bibendum augue. Curabitur tempus pharetra laoreet. Suspendisse et mattis dolor, vitae molestie dolor. Sed varius neque vitae erat tincidunt, in gravida nunc scelerisque. Proin ultricies leo non dui commodo, id cursus nulla posuere. Nulla placerat bibendum nisi, sit amet dictum ligula auctor vel. Morbi dignissim lorem varius nulla tristique rutrum. Donec elementum aliquet tellus vel tristique. Proin gravida faucibus finibus. Morbi tincidunt libero metus, vel maximus eros molestie eget. Curabitur blandit sapien quam, sed aliquet eros tempor eget. Morbi enim turpis, interdum et massa ut, vehicula pretium risus. Sed ac gravida nunc. Nunc volutpat cursus lacus, a tempus ligula tempus sit amet.</p>

  <p>Vestibulum elementum leo rutrum mattis consectetur. Integer ac finibus ipsum. Fusce in enim vel ligula efficitur ultricies. Quisque interdum sit amet leo in aliquet. Donec elementum nisl vel nisl cursus ullamcorper. Vivamus accumsan magna at ullamcorper commodo. Maecenas consectetur nisl quis ligula molestie posuere. Donec vel placerat nisi, vitae feugiat erat.</p>

  <p>Quisque non augue mauris. Donec scelerisque augue tellus, sit amet fringilla est imperdiet laoreet. In risus elit, molestie et malesuada eget, efficitur non ligula. Quisque imperdiet orci facilisis, dictum tellus ut, sollicitudin arcu. Phasellus gravida elit a commodo dictum. Aenean commodo tellus et neque varius ultricies. Sed imperdiet odio sed magna sagittis finibus. Morbi egestas lectus id rhoncus tempor. Nullam nec ultricies eros. Aliquam at dui sapien.</p>

  <p>Nullam viverra eget sem eu hendrerit. Etiam sollicitudin placerat odio, ut posuere nisi vehicula id. Etiam faucibus nunc ante. Suspendisse id placerat felis. In ultrices eu dui eget finibus. Nam ultricies vehicula massa sit amet consectetur. Curabitur sodales, ex quis interdum blandit, ligula quam tempor nisl, id cursus tellus lorem ut enim. Sed ut fringilla leo. Sed lacinia varius finibus. Nullam non interdum mauris. Suspendisse ante ipsum, vehicula et nisi vitae, accumsan porttitor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque gravida lorem eros, id eleifend nibh vehicula at. Maecenas vulputate diam neque, in fringilla nisl lacinia id. Pellentesque at dolor sit amet velit lacinia ultrices. Praesent nec velit vitae erat lobortis gravida.</p>

  <p>Mauris non neque facilisis, scelerisque leo eget, congue nunc. Integer posuere ut mi ac dapibus. Phasellus velit nisl, cursus sit amet lorem eget, iaculis porttitor nulla. Donec id euismod nisl, sit amet dignissim turpis. Phasellus quis nisi malesuada, consequat leo sit amet, interdum turpis. Sed dapibus mattis turpis, nec ultricies neque lobortis nec. Phasellus ultrices odio at tempus convallis. Vestibulum et magna accumsan, posuere magna id, commodo quam.</p>   

 </div>

</body>
</html>

coothead

3 Likes
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.