Clickable link which is on the center horizontally and on the bottom vertically

I have a page at http://form.kr/dest/footer.php

Since the main contents of the page is dynamic, you can see short contents at http://form.kr/dest/footer.php?length=short and long contents at http://form.kr/dest/footer.php?length=long

If you click on bottom of the page, it will go to google.com because there is stickyBottom going to google.com

You can click any links at http://form.kr/dest/footer.php?length=short because main contents is short.

However, you cannot click the link to sitepoint. because it is always on the bottom at http://form.kr/dest/footer.php?length=long.
Although some cnn links which are going to cnn.com is sometimes hidden by the stickBottom, It’s okay because it is clickable when all scroll is downed.

But the link which is going to site point in the footer is not clickable.
The sitepoint link is always on the bottom and centered horizontally
I try to add “z-index:2” on the sitepoint link for making it clickable. but it seems not to work as I expected.
Can I make it clickable by your help?

Z-index only applies to positioned elements and the Sitepoint link is not positioned. You need to add position:relative to the link before the z-index will take effect.

Only if you click at the bottom 100px. On my large screen there is a lot of gray background at the bottom so your code makes little sense.

What you should have done is set the stickyBottom to take over the whole viewport (position:fixed with top,left,right and bottom set to a value of zero) and set its z-index below all other elements on the page and then the blank section of the bottom of the page will always take you to google no matter how short it is. If content goes below the fold then there will be no blank screen to click anyway and the link will be hidden underneath the page content.

Assuming that’s what you meant to do but I guess you may have wanted the green section to also go to google but I can’t second guess everything.

No that is not OK and goes against all design principles :slight_smile: It’s almost like you are tricking someone on purpose. :wink: If you add position:relative to #main with a z-index of 2 then your stickyBottom will not obscure the links to CNN.

You also have a horizontal scrollbar on the viewport when none is needed because you have added width:100% to your footer making it 100% + 20px (padding) wide thus forcing a scrollbar. You do not need a width on static elements. remove the width and the horizontal scrollbar will disappear (this has been mentioned to you before ;)).

Note that ids are unique and you are not allowed to have 2 id="footer on your page.Use classes if you need to reuse styles.

I’m assuming you are just doing this for learning purposes so I should be a bit more lenient :slight_smile:

1 Like

I did it. it works fine at http://form.kr/dest/footer2.php?length=long

As I remove the width, the horizontal scrollbar doesn’t not being disappeared.
And, google link doesn’t work at http://form.kr/dest/footer3.php?length=long
How can I remove the horizontal scroll bar with google link alive?

It works fine at http://form.kr/dest/footer4.php?length=long

It is okay, It is intended that most of my users will know there is google link on the bottom.

I don’t understand the quote above.
I cannot see the gray background at the bottom with my desktop(chrome) and my handphone(sapari)…
How can I see the gray background at the bottom?

You removed the width from the wrong element. I specifically mention the footer element and you still have the width in place on #footer.

#footer {width:100%;background:green;color:white;text-align:center;padding:10px;}

That’s because you removed the width:100% from it and not the footer as I told you to do! I also specifically said that static elements do not require a width and stickyBottom is not a static element. It is an absolutely positioned element and absolutely positioned elements shrink fit their content unless you provide a width.

Here’s a screenshot from my PC.

If you can explain exactly what you are trying to do then I may be able to help a little more but the logic of the google link way down the page makes no sense to me and indeed on my large screen imac it is miles away from any content and of no use whatsoever.

1 Like

Since I don’t have ima and I cannot test it. I might give up the gray background at the moment.

How about http://form.kr/dest/footer5.php?length=long
I hope it will be some sense to you.

The screenshot is from my standard normal sized PC monitor and you can clearly see the gap on the page.

I don’t understand what you are trying to do so its hard to help properly?

  1. It looks like you want the green footer to go to google apart from the link in the middle which should go to where its pointed to.

  2. On short pages where is the link to google supposed to be situated?
    a) Is the google link still supposed to be over the green area?
    b) Is the google link also supposed to extend all the way down the empty part of the page to the bottom of the viewport?
    c) Or is the google link supposed to be over the green area and also extend down the page to the bottom of the viewport when content is small.

If you can clarify those details unambiguously I can then offer some pointers :slight_smile:

There is no google link at http://form.kr/dest/footer5.php?length=long.

The contents of my page is usually very long.
It’s not journal like twiter or facebook but academic like essays or novels.

I want that I can go to bottom or top of the page at any place on the page.by one or two click.
The stickBottom is a kind of substitute of scroll bar…
I don’t like to use scroll bar for going to bottom or to top since I have some chronic pains on my wrist personally.

You can go to bottom of the page by one click without any use of scrollbar at http://form.kr/dest/footer6.php?length=long#middle

The Home key should take you to the top of a page, and the End key to the bottom. I use them quite often.

2 Likes

Me too, and I miss them on all my mobile devices! :slight_smile:

(OT) What was they thinking?

Is mobile users the target?

1 Like

That seems to be an entirely different question and doesn’t answer any of the questions I laid out. You can jump to any part of the page using in page links and your stickBottom has no meaning in that context.

If you don’t want any gray (viewport background) at the bottom of the viewport you could make your page a minimum of the viewport height and use a proper sticky footer technique.

As I said I can’t really offer any code as there are too many variable conditions that you have not answered and you seem to be building a page that fits only your screen.:slight_smile:

Perhaps if you explain just one issue that you want solved then we can address that alone :slight_smile:

1 Like

The target user is me at the moment.

Not only the handphone but also desktop pc needs it.
Sometimes I am in my bed with my mouse and read the page of an essay.on the monitor.
I am half sleep on the page and not want to go to desk for tapping the home or end key on the keyboard.
In that situation, the sticyBottom might work fine.

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