Div disrupts Link

Question

Div disrupts Link

Navigation

#1 by (0 votes)
#2 by (0 votes)

2

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 "without link", as if one div overlapped the other. I do not know what is wrong

css

asked by anonymous 03.08.2015 / 22:14

2 answers

0

You are only linking to the image, not the DIV itself. For this to work you need to put a size for DIV as well and if you want the link to stay in the whole div not only in the image (if it is smaller than the div) place the link before the div

03.08.2015 / 22:17

Error creating a method in a WFA application in inheritance and polymorphism Animation with dependency property

score 0 · Accepted Answer

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

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

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