CODEWITHSUNDEEP
htmlcss
clearblueskies
clearblueskies

Reputation: 7

How to make link clickable only on text

I want to make the links clickable only on text. The problem is that the links can be clicked on anywhere on the right to the text as well. How do I make it such that the link can be clicked on text only? I have included a part of my website where the problem lies in the links at the bottom of the navigation bar. Thanks for the advice!

<head>
 
  <style>
    .topnav {
        background-color: #F2C369;
        overflow: hidden;
        max-width: 70%;
        margin-left: auto;
        margin-right: auto;
    }

    .topnav a {
        float: left;
        color: black;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
        font-weight: bold;
    }

    .topnav a:hover {
        background-color: red;
        color: white;
    }

    .topnav a.active {
        background-color: #e3ef34;
        color: black;
    }


    .sidebar {
        background-color: #FCEFDC;
        width: 20%;
        display: inline-block;
        box-sizing: border-box;
        float: left;
        position: absolute;
        left:0px;
    }

    .links-box {
        background-color: none;
        width: 100%;
        border: 1px solid black;
        display: inline-block;
        box-sizing: border-box;
        float: left;
        padding: 10px;
    }

    .links-box a {
        display: block;
    }

  </style>

</head>

<body>

  <div class="topnav">
      <a href="index.html">Main</a>
      <a href="all-articles.html">All</a>
      <a href="about.html">About</a>
      <a href="gallery.html">Gallery</a>
      <a href="contact.html">Contact</a>
  </div>

  <div class="content-container">

      <div class="sidebar">

          <div class="links-box">
              <div class="link-header">Header</div>
              <a href="">Link 1</a>
              <a href="">Link 2</a>
          </div>
      </div>            
  </div>
</body>

Upvotes: 0

Views: 5136

Answers (4)

Ishara Jayaweera
Ishara Jayaweera

Reputation: 49

replace anchor tags which includes "Link 1" and "Link 2" with the following un-ordered list.

            <ul>
                <li>
                    <a href="">Link 1</a>
                </li>
                <li>
                    <a href="">Link 2</a>
                </li>
            </ul>

and then add following CSS as well.

ul li{
    list-style: none;
}
ul{
    margin:0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px; 
}

finally remove the following css block

.links-box a {
    display: block;
}

This should done your work.

Upvotes: 0

Nidhi
Nidhi

Reputation: 1443

Wrap your link(<a href="">) in the div and removed .links-box a { display: block;} from css

<head>
 
  <style>
    .topnav {
        background-color: #F2C369;
        overflow: hidden;
        max-width: 70%;
        margin-left: auto;
        margin-right: auto;
    }

    .topnav a {
        float: left;
        color: black;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
        font-weight: bold;
    }

    .topnav a:hover {
        background-color: red;
        color: white;
    }

    .topnav a.active {
        background-color: #e3ef34;
        color: black;
    }


    .sidebar {
        background-color: #FCEFDC;
        width: 50%;
        display: inline-block;
        box-sizing: border-box;
        float: left;
        position: absolute;
        left:0px;
    }

    .links-box {
        background-color: none;
        width: 100%;
        border: 1px solid black;
        display: inline-block;
        box-sizing: border-box;
        float: left;
        padding: 10px;
    }

    

  </style>

</head>

<body>

  <div class="topnav">
      <a href="index.html">Main</a>
      <a href="all-articles.html">All</a>
      <a href="about.html">About</a>
      <a href="gallery.html">Gallery</a>
      <a href="contact.html">Contact</a>
  </div>

  <div class="content-container">

      <div class="sidebar">

          <div class="links-box">
              <div class="link-header">Header</div>
              <div><a href="">Link 1</a></div>
              <div><a href="">Link 2</a></div>
          </div>
      </div>            
  </div>
</body>

Upvotes: 1

Corn&#233;
Corn&#233;

Reputation: 1413

Change this part of your css:

.topnav {
   padding: 14px 16px;
}
     a {
        float: left;
        color: black;
        text-align: center;
        margin: 10px;
        text-decoration: none;
        font-size: 17px;
        font-weight: bold;
    }

Upvotes: 0

Srdjan
Srdjan

Reputation: 582

Update your .links-box a with:

.links-box a {
    display: block;
    float: left;
    clear: both;
}

Upvotes: 2

Related Questions