CODEWITHSUNDEEP
htmlcss
Shniper
Shniper

Reputation: 854

Link spans entire screen even when width is lowered

Have a link on an h1 and no matter what css I provide it always spans across the whole page. I only want the h1 to be clickable.

enter image description here

DEMO

<section>
  <a href="about.html" target="_blank"><h1>
 About Me
 </h1></a>
</section>

 section a {
      text-decoration: none;
      width: 40vw;
      box-sizing: content-box;
    }

    section a:hover {
      text-decoration: none;
    }

    section h1 {
      width: 40vw;
      box-sizing: content-box;
    }

    section {
      width: 100vw;
      height: 100vh;
      background-color: black;
    }

Upvotes: 1

Views: 483

Answers (3)

Dhaval Chheda
Dhaval Chheda

Reputation: 5147

Try this code:

  <style>
        .abcd {
            width: 40vw;
        }
        section a {
            text-decoration: none;
            width: 40vw;
            box-sizing: content-box;
        }

        section a:hover {
            text-decoration: none;
        }

        section h1 {

            box-sizing: content-box;
        }

        section {
            width: 100vw;
            height: 100vh;
            background-color: black;
        }

    </style>
</head>

<body>

    <section class="abcd">
        <h1>
 <a href="about.html" target="_blank">About Me</a></h1>
    </section>

</body>

It was picking up some default section so added a class to have it take up only a certain size (you may ignore this if you don't like) and also made changes to and in HTML and now only About me is clickable.

Upvotes: 0

Fil
Fil

Reputation: 8863

This line of your code means that you are making the entire adjacent clickable

<a href="about.html" target="_blank"><h1> About Me</h1></a>

Becuase the h1 tag is an entire adjacent, while this one

<h1><a href="about.html" target="_blank"> About Me</a></h1>

Focus only on the text About Me

Use the latter as a solution.

If you would like to use the anchor tag a outside h1 tag, add this position: absolute; and adjust the width in your style.

For Example:

  section h1 {
    width: 10vw;
    box-sizing: content-box;
    border: 1px solid white;
    position: absolute;
  }
  section {
    width: 100vw;
    height: 100vh;
    background-color: black;
    position: relative;
  }

Thay way you can make About Me as the only clickable

Upvotes: 0

Joseph Berthiaume
Joseph Berthiaume

Reputation: 31

Well, if you put the a inside the h1, that would do it. 

<h1><a href="about.html" target="_blank">About Me</a></h1>

Hope that helps

Upvotes: 3

Related Questions