I'm trying to put link to some text but it is not working. I think something is overlapping in css but i won't understand it. could you take a look

Issue

hyperlink is not working. i think there is some problem with css. can anyone please overlook and help with this?

*{
    margin: 0;
    padding: 0;
    font-family: 'Dongle', sans-serif;
}

.header{
    min-height: 70vh;
    width: 100%;
    background-position: center;
    background-size: cover;
}

nav{
   display: flex;
   padding: 1% 1%;
   justify-content: space-between;
   align-items: center; 
}

nav img{
    width:140px;
    height: 80px;
}

.nav-bar{
    flex: 1;
    text-align: right;
}

.nav-bar ul li{
    list-style: none;
    display: inline-block;
    padding:8px 12px;
}

.nav-bar ul li a{
    color: aquamarine;
    text-decoration: none;
    font-size: 33px;
}


.start-1{
    width: 100%;
    color: #fff;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    padding-left: 1%;
}

.start-1 h1{
    font-size: 50px;
    text-align: left;
    padding-top: 15%;
}

.start-1 p{
    margin: 10px o 40px;
    padding-right: 1%;
    text-align: left;
    font-size: 18px;
    color: #fff;
    font-family: monospace;
}

.table{
    padding-left:2% ;
    font-family: monospace;
    font-size: 28px;
}
body{
    background-image: url(webimages/india.jpg);
    background-position: center;
    background-size: cover;
    position: relative;
    width: 100%;
}
<html>
<head>
    <title>HOME PAGE</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dongle:wght@300;400&display=swap" rel="stylesheet">
</head>
<body>
    <section class="header">
    <nav>
        <a href="index.html"><img src="webimages/logo.jpg" alt="LOGO"></a>
        <div class="nav-bar">
            <ul>
                <li><a href="index.html"><u>HOME</u></a></li>
                <li><a href="ABOUT US.html"><u>ABOUT US</u></a></li>
                <li><a href="CONTACT US.html"><u>CONTACT US</u></a></li>
                <li><a href="DONATE PAGE.html"><u>DONATE</u></a></li>
            </ul>
        </div>
    </nav>
    <div class="start-1">
        <strong><h1>CO <sub>2</sub> and Greenhouse Gas Emissions Country Profiles</h1></strong>
        <p>How are emissions changing in each country? Is your country making progress on reducing emissions? We built 4 country profiles which allow you to explore the statistics for the top polluting countries. Each profile includes interactive visualizations, explanations of the presented metrics, and the details on the sources of the data.</p>
    </div>
    
</section>
<section>
<ol class=table>
    <h3 > Every profile includes five sections</h3>
                    <li> CO2 emissions: How much does a country emit each year? What is the average emissions per person? How much has it emitted over time? How do emissions compare when we correct for trade?</li>
                    <li>Coal, oil, gas, cement: How much CO2 comes from coal, oil, gas, flaring or cement production?</li>
                    <li>Other greenhouse gases: How much total greenhouse gases does each country emit? How much methane, and nitrous oxide is emitted?</li>
                    <li>Emissions by sector: Which sectors contribute most to emissions? Does transport contribute more or less than electricity; how large are agriculture and land use emissions?</li>
                    <li>Carbon and energy efficiency: How much energy do we use per unit of GDP? How much carbon do we emit per unit of energy?</li>
            </ol> 
        </section>    
</body>
</html>

hyperlink is not working. i think there is some problem with css. can anyone please overlook and help with this?

Solution

Your container with class name start-1 have a position: absolute; and is overlapping your navigation. Add a z-index: -1; on that class to move it to the back of the page. Check the snippet for your reference.

* {
  margin: 0;
  padding: 0;
  font-family: 'Dongle', sans-serif;
}

.header {
  min-height: 70vh;
  width: 100%;
  background-position: center;
  background-size: cover;
}

nav {
  display: flex;
  padding: 1% 1%;
  justify-content: space-between;
  align-items: center;
}

nav img {
  width: 140px;
  height: 80px;
}

.nav-bar {
  flex: 1;
  text-align: right;
}

.nav-bar ul li {
  list-style: none;
  display: inline-block;
  padding: 8px 12px;
}

.nav-bar ul li a {
  color: aquamarine;
  text-decoration: none;
  font-size: 33px;
}

.start-1 {
  width: 100%;
  color: #fff;
  position: absolute;
  z-index: -1;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-left: 1%;
}

.start-1 h1 {
  font-size: 50px;
  text-align: left;
  padding-top: 15%;
}

.start-1 p {
  margin: 10px o 40px;
  padding-right: 1%;
  text-align: left;
  font-size: 18px;
  color: #fff;
  font-family: monospace;
}

.table {
  padding-left: 2%;
  font-family: monospace;
  font-size: 28px;
}

body {
  background-image: url(webimages/india.jpg);
  background-position: center;
  background-size: cover;
  position: relative;
  width: 100%;
}
<html>

<head>
  <title>HOME PAGE</title>
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Dongle:wght@300;400&display=swap" rel="stylesheet">
</head>

<body>
  <section class="header">
    <nav>
      <a href="index.html"><img src="webimages/logo.jpg" alt="LOGO"></a>
      <div class="nav-bar">
        <ul>
          <li><a href="index.html"><u>HOME</u></a></li>
          <li><a href="ABOUT US.html"><u>ABOUT US</u></a></li>
          <li><a href="CONTACT US.html"><u>CONTACT US</u></a></li>
          <li><a href="DONATE PAGE.html"><u>DONATE</u></a></li>
        </ul>
      </div>
    </nav>
    <div class="start-1">
      <strong><h1>CO <sub>2</sub> and Greenhouse Gas Emissions Country Profiles</h1></strong>
      <p>How are emissions changing in each country? Is your country making progress on reducing emissions? We built 4 country profiles which allow you to explore the statistics for the top polluting countries. Each profile includes interactive visualizations,
        explanations of the presented metrics, and the details on the sources of the data.</p>
    </div>

  </section>
  <section>
    <ol class=table>
      <h3> Every profile includes five sections</h3>
      <li> CO2 emissions: How much does a country emit each year? What is the average emissions per person? How much has it emitted over time? How do emissions compare when we correct for trade?</li>
      <li>Coal, oil, gas, cement: How much CO2 comes from coal, oil, gas, flaring or cement production?</li>
      <li>Other greenhouse gases: How much total greenhouse gases does each country emit? How much methane, and nitrous oxide is emitted?</li>
      <li>Emissions by sector: Which sectors contribute most to emissions? Does transport contribute more or less than electricity; how large are agriculture and land use emissions?</li>
      <li>Carbon and energy efficiency: How much energy do we use per unit of GDP? How much carbon do we emit per unit of energy?</li>
    </ol>
  </section>
</body>

</html>

more on z-index here.

Answered By – Yong

Answer Checked By – David Marino (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.