The hyperlink is unresponsive to clicks

Question

The hyperlink is unresponsive to clicks

My text is displaying in a different color, but when I try to click on it nothing happens. I must be doing something wrong with my HTML and CSS code, as I am new to this.

.column {
  float: left;
  width: 50%;
  padding: 10px;
  height:800px;
  text-align: center;
  color: white;
  position: relative;
 }

 .centered {
    position:absolute;
    top: 430px;
    left: 300px;
    width: 100%
}

<!DOCTYPE html>
<html>
<div class="row">
  <div class="column" style="background-color:#aaa;">
    <img src="4.jpg"alt="Snow">
     <div class="centered"><a href="http://www.google.com">Google</a></div>
  </div>

html css sharepoint

Answer 1

Answer №1

Below is the complete HTML code provided for your reference. To test it in SharePoint, you can insert the code into a script editor web part on a web page to see if it functions correctly.

<!DOCTYPE html>
<html>
<head>
    <style>
    .column {
        float: left;
        width: 50%;
        padding: 10px;
        height:800px;
        text-align: center;
        color: white;
        position: relative;
    }

    .centered {
        position:absolute;
        top: 430px;
        left: 300px;
        width: 100%
    }
    </style>
</head>
<body>
<div class="row">
  <div class="column" style="background-color:#aaa;">
     <img src="4.jpg" alt="Snow"/>
     <div class="centered"><a href="http://www.google.com">Google</a></div>
  </div>
</div>
</body>
</html>

If the hyperlink is still not clickable, you can use IE/Chrome F12 to inspect and troubleshoot any errors that may be preventing the link from functioning properly.

Answer 2

Below is the complete HTML code provided for your reference. To test it in SharePoint, you can insert the code into a script editor web part on a web page to see if it functions correctly.

<!DOCTYPE html>
<html>
<head>
    <style>
    .column {
        float: left;
        width: 50%;
        padding: 10px;
        height:800px;
        text-align: center;
        color: white;
        position: relative;
    }

    .centered {
        position:absolute;
        top: 430px;
        left: 300px;
        width: 100%
    }
    </style>
</head>
<body>
<div class="row">
  <div class="column" style="background-color:#aaa;">
     <img src="4.jpg" alt="Snow"/>
     <div class="centered"><a href="http://www.google.com">Google</a></div>
  </div>
</div>
</body>
</html>

If the hyperlink is still not clickable, you can use IE/Chrome F12 to inspect and troubleshoot any errors that may be preventing the link from functioning properly.

Answer 3

Answer №2

Remember to always include the s in the https protocol. Here is an example: https://www.google.com/ instead of http://www.google.com/

Although the absence of s shouldn't make a difference, it seems to affect the link. Try using https for better results.

Check out this link with http: https://jsfiddle.net/fg7tbwzL/3/

And here's the same link with https: https://jsfiddle.net/fg7tbwzL/4/ (which worked for me)

Answer 4

Remember to always include the s in the https protocol. Here is an example: https://www.google.com/ instead of http://www.google.com/

Although the absence of s shouldn't make a difference, it seems to affect the link. Try using https for better results.

Check out this link with http: https://jsfiddle.net/fg7tbwzL/3/

And here's the same link with https: https://jsfiddle.net/fg7tbwzL/4/ (which worked for me)

The hyperlink is unresponsive to clicks

Answer №1

Answer №2

Similar questions

Move the footer down to the bottom of the page

What is the best way to maximize the use of the space available until reaching a div with varying dimensions each time

Displaying data from a JSON object to a DOM table can be achieved by dynamically generating table columns based on the keys within

.slideDown Not Functioning Properly on my System

Python file is not able to show data on HTML table

How can one choose an HTML element and then select another nested element using XPath?

The challenge with looping through JQuery using the .each method

Issue with AngularJS pagination: unable to detect the current page number

Issues with Line Chart in D3: Scaling and Zoom not functioning as expected due to ClipPath limitations

Encountering difficulties connecting to the database within Vue data tables

When using the HTML a tag, it can create unexpected gaps and

When dalekjs attempted to follow a hyperlink with text in it, the link failed to function properly

Creating an interactive PHP form for real-time data input

Ways to turn off default browser tooltip using bootstrap4 tooltip

Easiest method to globally disable form autocompletion in an application without manually setting autocomplete off for every individual form

Is it possible to influence IE Browser Mode to switch to Compatibility mode?

placing advertisements within HTML5 videos

Using AJAX in JavaScript within an HTML document is a valuable skill to have

Delete the initial double line break and then switch the remaining double line breaks to single line breaks

Adjust size of logo in navigation bar header