How to fix multiple anchors leading to the same link error in Django?

Question

Both of the anchors links to the href that leads to the stack overflow page. For reference, (in case this is a confounding variable), I'm using the django environment if that means anything.

<div>

  <a href="https://www.w3schools.com/tryit/" style="position: absolute; bottom: 30px; right: 80px; width: 100%; text-align: center;" id=1>
        Something1
    </a>
  <a href="https://stackoverflow.com/questions/25345392/how-to-add-url-parameters-to-django-template-url-tag" style="position: absolute; bottom: 30px; right: -80px; width: 100%; text-align: center;" id=2>
        Something2
    </a>

</div>

I initially tried using django variables but later swapped to these 2 links in order to debugg it. It still had the similar issue of both anchors leading to the latter href. I'm pretty new to this so I need a bit of help, thank you.

score 0 · Accepted Answer · answered Jun 15 '23 at 07:30

You are positioning them both at the bottom with width 100%. This means that they will be overlapping. And they are, and so only the top one will intercept the clicks for the overlapping section.

If you add a semi transparent background to the anchors you will see the overlap that is happening

a{
  background:rgba(0,0,0,0.15);
}

<div>

  <a href="https://www.w3schools.com/tryit/" style="position: absolute; bottom: 30px; right: 80px; width: 100%; text-align: center;" id=1>
        Something1
    </a>
  <a href="https://stackoverflow.com/questions/25345392/how-to-add-url-parameters-to-django-template-url-tag" style="position: absolute; bottom: 30px; right: -80px; width: 100%; text-align: center;" id=2>
        Something2
    </a>

</div>

The darker are is the overlap.

Perhaps a solution like the following, where i move the whole container to the bottom and style the elements to split the available space between them (using flex) is what you are trying to achieve.

.bottom-links {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  
  display:flex;
  text-align:center;
}

.bottom-links a{
  flex: 1;
}

<div class="bottom-links">
  <a href="https://www.w3schools.com/tryit/" id="1">Something1</a>
  <a href="https://stackoverflow.com/questions/25345392/how-to-add-url-parameters-to-django-template-url-tag" id="2">Something2</a>
</div>

How to fix multiple anchors leading to the same link error in Django?

1 Answers1