Image with link is not opening the page

Asked

Viewed 33 times

1

In my application I created the accesses to social networks of the company I work for. But when I click on the image with link, nothing opens.

Follows code:

<a href="https://www.facebook.com/" target= "_blank" style="display:table;padding:15px;background:url('https://upload.wikimedia.org/wikipedia/commons/f/fb/Facebook_icon_2013.svg') center;background-size: 30px 30px;
                               background-repeat: no-repeat;margin-top: -80px;margin-left: 91%; position: absolute; "><a/>

                    <a href="https://br.linkedin.com/" target= "_blank" style="display:table;padding:15px; margin-top: 50%; background:url('https://upload.wikimedia.org/wikipedia/commons/c/c9/Linkedin.svg') center;background-size: 30px 30px;
                                 background-repeat: no-repeat; position: absolute; margin-top: -80px; margin-left: 95%; "><a/>
html css

  • Hello lexandre Lima, wouldn’t you? <a href="https://www.facebook.com/" target= "_Blank"><img src="https://upload.wikimedia.org/wikipedia/commons/f/fb/Facebook_icon_2013.svg" width="50" height="50"><a/>

2 answers

0


As you are using background elements, they do not take the image size, you need to set width and height for the elements, in the example below I put only the sizes and took the margins to show on the screen. I made a test on a page here and the April link, only on the console Stackoverflow is not running.

<a href="https://www.facebook.com/" target= "_blank" style="display:table;padding:15px;background:url('https://upload.wikimedia.org/wikipedia/commons/f/fb/Facebook_icon_2013.svg') center;background-size: 30px 30px;background-repeat: no-repeat;margin-top:0;margin-left: 0; position: absolute;width:50px;height:50px;"><a/>

<a href="https://br.linkedin.com/" target= "_blank" style="display:table;padding:15px; margin-top: 50%; background:url('https://upload.wikimedia.org/wikipedia/commons/c/c9/Linkedin.svg') center;background-size: 30px 30px;background-repeat: no-repeat; position: absolute; margin-top:50px;margin-left:0;width: 50px;height:50px;"><a/>

  • bs.: as the element is absolute, it is good to play a z-index, because an element may end up staying on top of your link, in which case you will not be able to click.

0

Remembering that the 'a' tag closes like '' and not '', I copied your html and just changed it and is working normally.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.