A text link on left-top and another text link on right top over 3 column link which are in the bottom layer

[joon1]

I have a page at http://form.kr/test01/test2.php.

A table with yellow background is on top with position fixed.

Two rows are in the table.
The first row has cyan background at the left side and right side.
The second row has silver background at the left side and right side.

The first row has 3 cells with following quote.

The first cell on the left is cyan block.
The second cell on the center is yellow block.
The third cell on the right is cyan block.

The first cyan cell has a link to yahoo.
If you click anywhere on the cyan block, it will go to yahoo although there is no anchor text “yahoo”.

The second yellow cell has a link to google.
If you click anywhere on the yellow block, it will go to google although there is no anchor text “google”.

The third cyan cell has a link to sitepoint.
If you click anywhere on the cyan block, it will go to sitepoint although there is no anchor text “sitepoint”.

The second row has 3 cells with following quote.

The first cell on the left is silver block.
The second cell on the center is yellow block.
The third cell on the right is silver block.

The first silver cell has a link to gmail.
If you click on the anchor text “gmail”, it will go to gmail.

The second yellow cell has a link to google.
If you click anywhere on the yellow block, it will go to google although there is no anchor text “google”.

The third silver cell has a link to youtube.
If you click on the anchor text “youtube”, it will go to youtube.

I used table on the page for express what I want more clearly.

Now I like to make it like the following.
a row only is shown.
it has 3 columns like the following.

The first column on the left is cyan block.
The second column on the center is yellow block.
The third column on the right is cyan block.

The first cyan column has a link to yahoo.
If you click anywhere on the cyan block, it will go to yahoo although there is no anchor text “yahoo”.

The second yellow column has a link to google.
If you click anywhere on the yellow block, it will go to google although there is no anchor text “google”.

The third cyan column has a link to sitepoint.
If you click anywhere on the cyan block, it will go to sitepoint although there is no anchor text “sitepoint”.

Although a row only is shown, it might actually has another row over the row, maybe with different higher z-index.

A link to gmail with the anchor text “gmail” is shown over the left cyan column.
if you click the anchor text “gmail”, it will go to gmail.
if you click the other part of the anchor text “gmail” in the left cyan column,
it will go to yahoo.

A link to gmail with the anchor text “youtube” is shown over the right cyan column.
if you click the anchor text “youtube”, it will go to youtube.
if you click the other part of the anchor text “youtube” in the right cyan column,
it will go to youtube.

[Erik_J]

@joon1

Although a row only is shown, it might actually has another row over the row, maybe with different higher z-index.

Please describe how you want that to work.

@joon1

I used table on the page for express what I want more clearly.

You mean visually express what you want?
What is the table showing if you name the parts it shows?

[joon1]

@Erik_J

You mean visually express what you want?

I failed in expressing what I want in table.
but I can express myself more clearly when I use table.

@Erik_J

Please describe how you want that to work.

Okay,
Please, forget about the page at http://form.kr/test01/test2.php.
but look the page at http://form.kr/test01/test3.php.

There are 3 columns on the page at http://form.kr/test01/test3.php.
The background color of the 1st column is pink
The background color of the 2nd column is yellow.
The background color of the 2rd column is cyan.

The first pink column has a link to yahoo.
If you click anywhere on the cyan block, it will go to yahoo although there is no anchor text “yahoo”.

The second yellow column has a link to google.
If you click anywhere on the yellow block, it will go to google although there is no anchor text “google”.

The third cyan column has a link to sitepoint.
If you click anywhere on the cyan block, it will go to sitepoint although there is no anchor text “sitepoint”.

So far so good.

Now I like to make it like the following

Add a text link “gmail” inside the pink block
if you click the anchor text gmail, it goes to gmail.
If you click anywhere on the pink block except the text “gmail”, it goes to yahoo.

And I like to add a text link “youtube” inside the cyan block
if you click the anchor text “youtube”, it goes to youtube.
If you click anywhere on the cyan block except the link “youtube”, it goes to sitepoint.

[PaulOB]

@joon1

A table with yellow background is on top with position fixed.

As mentioned in your other thread (to which you haven’t replied or acknowledged yet) it would be better to use position:sticky instead of position:fixed these days.

You can position the three anchors at the top quite easily without a table or without nesting divs inside the empty anchors.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;
	padding:0;
}
.top {
	position:fixed;
	pasition:-webkit-sticky;
	position:sticky;
	top:0;
	left:0;
	width:100%;
}
.row {
	display:flex;
	background:yellow;
}
.row > a {
	flex:1 0 33%;
	max-width:33.33333%;
	min-height:30px;
	background:cyan;
	margin:1px;
}
.row a:nth-child(2) {
	background:yellow;
}
</style>
</head>

<body>
<div class="top">
  <div class="row">
  	<a href="http://yahoo.com"></a>
   	<a href="http://google.com"></a>
  	<a href="http://sitepoint.com"></a>
  </div>
</div>

<p>Start following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
</body>
</html>

I’m guessing that this is just a learning exercise as you don’t really want empty anchors leading to somewhere that no one knows. Indeed that may be considered a risky behaviour and should be avoided.

If its a learning exercise then all well and good

As Erik said above it’s unclear where you want the second row but it sounds like you want it to cover the first row which again is very odd behaviour unless you are just practising?

[Erik_J]

@joon1

If you click anywhere on the pink block except the text “gmail”, it goes to yahoo.

You are not allowed to nest anchors, but you could use other rmeans to overlay a small link over a larger. How this is done is somewhat dependent of where the small link should be placed over the large.

Also why are the anchors expanded by a div and not displayed block with their own dimensions?

[PaulOB]

As Erik said the only way to do it is to overlay the anchors by positioning them on top of the other anchors. This will involve magic numbers and fixed widths in order to be able to position the elements correctly.

Here is an example:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;
	padding:0;
}
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

.top {
	position:fixed;
	position:-webkit-sticky;
	position:sticky;
	top:0;
	left:0;
	width:100%;
}
.row {
	display:flex;
	background:yellow;
}
.row > a {
	flex:1 0 33%;
	width:33.33333%;
	min-height:30px;
	background:cyan;
	margin:1px;
	padding:5px 10px;
}
.row a:nth-child(1) {
	background:pink;
}
.row a:nth-child(2) {
	background:yellow;
}

.row2{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:0;
}
.row2 > a:nth-child(1) {
	position:absolute;
	left:10px;
	top:5px;
	z-index:2;
}
.row2 > a:nth-child(2) {
	position:absolute;
	left:calc(66.666% + 10px);
	top:5px;
	z-index:2;
}

</style>
</head>

<body>
<div class="top">
  <div class="row">
  	<a href="http://yahoo.com"></a>
   	<a href="http://google.com"></a>
  	<a href="http://sitepoint.com"></a>
  </div>
  <div class="row2">
   	<a href="http://gmail.com">Go to Gmail</a>
    <a href="http://youtube.com">Go to YouTube</a>
  </div>
</div>

<p>Start following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
<p>Following content</p>
</body>
</html>

This would also be considered risky behaviour as you are tricking the user into accidentally clicking a link that they did not want to visit.

[joon1]

with you code I make a page at http://form.kr/test01/test4.php
and I have another page at http://form.kr/test01/test5.php

At http://form.kr/test01/test4.php, there are no anchor text “gmail” on the left and “youtube” on the right.

Although there are both anchor text gmail and youtube at http://form.kr/test01/test5.php, there is no link to yahoo and sitepoint.

I like to make 5 links on a row.
Ttwo link with anchor text and 3 link without anchor text on the row with fixed position.

.

[PaulOB]

@joon1

I like to make 5 links on a row.

Check my previous post and see if that’s what you wanted or not. If it’s not correct then explain what needs changing exactly and we can progress from there.

[joon1]

it works fine at http://form.kr/test01/test5.php

It is what I want.except the anchor text “youtube” need to be on the most right.like the anchor text “youtube” at http://form.kr/test01/test2.php

[PaulOB]

@joon1

It is what I want.except the anchor text “youtube” need to be on the most right

Change the left 66% to right instead.

i.e.

.row2 > a:nth-child(2) {
	position:absolute;
	right:10px;
	top:5px;
	z-index:2;
}

[joon1]

Thank you. it is perfect.

[joon1]

@PaulOB

pasition:-webkit-sticky;

I see pasition for the first time.

Is it a typo for position?
Or
What does it mean by “pasiton”?

[PaulOB]

Well spotted. It was a typo

I put it in there to test you

[joon1]

With Paul’s help, I have a page at http://form.kr/test01/topFix/centerEmpty.php

So far, so good.

I want something more on the page.

Although there is no text or no link in the center of the page, I want to put something in the center of the page.

In order to put a text in the center, I made a page at http://form.kr/test01/topFix/centerText.php
And
In order to put a link in the center, I made a page at http://form.kr/test01/topFix/centerLink.php

Both pages above works fine.

Now I like to combine the pages into a page because the contents of the center is dynamic.
It can be a text sometimes, a link another times, or a text which includes a link other times.

Can I make it with your help?

[joon1]

I made another page at http://form.kr/test01/topFix/centerTextLINK.php

As I change the dynamic text to text and link going to facebook, the facebook link is changed going to the right and youtube link is being centered.

I like to make it youtube link is on the most right and facebook link is centered because face book link is followed by “centerText and” is as a whole a dynamic part.

Gmail link which is on the left most and youtube link which should be on the most right are static but facebook link is dynamic.

“Dynamic” means it can be a text, a link, text and link, or link and text changing dynamically by coming from database,

How can I make it dynamic center with static gmail on the most left and youtube on the most right?

[Erik_J]

@joon1

How can I make it dynamic center with static gmail on the most left and youtube on the most right?

To me it sounds like you could rearrange the html to get the links where you want with the present css?

Maybe that’s not the problem?

I think if you could use the html as it is in the test page and describe how you want those links to appear, I could better understand how it’s supposed to work.

Sorry if I’m too slow to comprehend your goal.

[joon1]

@Erik_J

Sorry if I’m too slow to comprehend your goal

Thank you very much for your concern.

I think I am near to the goal by my own trials.