Div disturbs the Link

Question

I have the following Divs:

<section id="cidades">
    <div class="listacidade">ESCOLHA UMA OPÇÃO</div>
    <div class="listacidade"><a href="../zz"><img src="<? echo base_url(); ?>site/modules/entrada/images/cidade_fozdoiguacu.jpg" width="250" height="120" alt=""/></a></div>
    <div class="fade-down listacidade"><a href="../x"><img src="<? echo base_url(); ?>site/modules/entrada/images/cidade_curitiba.jpg" width="250" height="120" alt=""/></a></div>
    <div class="fade-down listacidade"><a href="../y"><img src="<? echo base_url(); ?>site/modules/entrada/images/cidade_santacatarina.jpg" width="250" height="120" alt=""/></a></div>
</section>

<div class="texto-interno">
    texto do site
</div>

With the following CSS:

.listacidade 
{
    margin-left: 40%;
    margin-right: 30px;
    margin-top: 15px;
    float: left;
}

.texto-interno{
    font-weight: bold;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    color: #656565;
    margin-top: 60px;
    margin-right: 30px;
    line-height: 40px;
    text-align: center;
    z-index: 999;
}

But the case is: that as much as I have a link in the images... They are "no link", as if one div overlaps the other. I do not know what is incorrect

Answer 1

You’re only linking to the image, not the DIV itself. For it to work you need to put a size for DIV too and if you want the link to be in the whole div not only in the image (if it is smaller than the div)put the link before the div.

Answer 2

The element <a> by default has the display type as inline, which allows it to be incorporated into texts and in conjunction with other words. But inline elements do not accept certain existing properties in block elements (such as margin, width and height), and this is affecting the links in your case (by being inline it does not take the size of the image inside).

To solve the problem, simply change the type of the element <a> in the CSS of inline for block. Example:

.listacidade a{
    display: block; /* todos os links dentro da lista agora são de bloco */
}