Link appears outside the image on the html page

Asked

Viewed 39 times

-2

        <div class="box">
            <a href="https://www.microsoft.com/pt-br/windows/" target="_blank"><img src="img/win.png" alt="" width="150px"></a>
        </div>

        <div class="box">
            <a href="https://www.xbox.com/pt-BR" target="_blank"><img src="img/xbox.jpg" alt="" width="150px"></a>
        </div>

        <div class="box">
            <a href="https://www.office.com/?auth=2"  target="_blank"><img src="img/office.png" alt="" width="150px"></a>
        </div>

        <div class="box">
            <a href="https://azure.microsoft.com/pt-br/" target="blank"><img src="img/azure.png" alt="" width="150px"></a>
        </div>

        <div class="box">
            <a href="https://www.microsoft.com/pt-br/microsoft-365/onedrive/online-cloud-storage" target="_blank"><img src="img/onedrive.jpg" alt="" width="150px"></a>
        </div>

        <style>
        div.box {
            width: 200px;
            display: inline-block;
        }
        </style>

    </section>
</body>

The link to the pages appear, however, appear to the left of the image, and not on top of it. inserir a descrição da imagem aqui

html html5

  • Man you got to put display: inline-block; on the link, on the tag <a>

  • Continued the same thing :/

1 answer

0

This doesn’t make sense, probably you manipulated the image with css to align it, this must have created a square or rectangle around it, do so:

    <a href="https://www.microsoft.com/pt-br/windows/" target="_blank" rel=”noopener”>
        <div class="box">
             <img src="img/win.png" alt="" width="150px">
        </div>
    </a>

A div can be the daughter of an A element, no problem there! It is interesting you give a searched in bootstrap, so you can work with the grid, it would be easier.

I suggest you of a searched also, on the target="_Blank", someone may end up hijacking the connection in this loop to show a fake page.

Browser other questions tagged html html5

You are not signed in. Login or sign up in order to post.