Page does not recognize href=" "as if there was no href=" ", nothing happens - PHP

Asked

Viewed 95 times

0

I’m finishing up a project, but I had a little problem. On the page there is a "button" where a document is downloaded. But when you hover over, or even click, nothing happens, it’s like any element, except a link (href=).

inserir a descrição da imagem aqui

Look at: http://passagemfranca.ma.gov.br/diario-oficial/publicacao/9diario-oficial.html

When passing the mouse over, a movement should occur, such as IN THIS EXAMPLE.

HEADER PART:

<div class="faixaCinza">
<div style="
    display: flow-root;
    background: #1a7ed4;
    padding: 40px 80px;
    padding-bottom: 140px;
">
<div style="
    max-width: 980px;
">    
<div style="
    display: inline-flex;
    float: left;
    margin-top: 35px;
">
    <span style="
    display: grid;
    line-height: 1000px;
    text-align: left;
">
<h3 style="padding-top:10px;color: #FFF;font: bold 30px 'Roboto';display: block;padding: 0;margin: 0;">Diário Oficial do Município</h3>
<span style="padding-top:10px;color: #FFF;font: bold 18px 'Roboto';display: block;">A edição número 2459 de 28 de julho de 2017 já está disponível.</span>
</span>
    </div>
    <a href="/arquivos/diario/DOM-1634-certificado.pdf" class="download" target="_blank">
            <img class="icon-pdf" src="https://diario.famem.org.br/app/themes/jornal/assets/imgs/pdf-icon.png" alt="Edição 1.634">
            <span>
                <span>Edição 1.634</span>
                <span><time datetime="00:00">13 julho 2017</time></span>
                <span class="btn btn-danger btn-md" role="button">Baixar edição</span>
            </span>
        </a>
    </div>
</div>
</div>
html css
  • 1

    The problem is that the div class conteudo somehow this superimposing your image

  • 1

    In.css template, in row 70, in class .faixaCinza remove the position: relative;

  • 1

    It seems that the class .faixaCinza is with the negative z-index, this is breaking. If you take the z-index, it already works.

  • @Marceloboni makes an answer that I will give as correct =)

  • @Ikaropinheiro thanks for the help, but if I remove only the z-index, it overrides the table. =)

  • 1

    If the lower ones solve the problem, you can vote for one of them :) remove the position:relative can break your page depending on the size of the screen, the ideal would be to look for another solution.

  • So Marcelo, worse than the answers make the blue bar overlap the table, I want it to be behind the table, only that the link works, I did what you said and worked super well, =D

  • 1

    Are you sure this should be the expected behavior? https://i.stack.Imgur.com/Alenr.gif

  • Yes @Marceloboni =D, I already updated, look there. How do you make this GIF?

  • @Marceloboni I put . content with z-index:2; and faixaCinza with z-index:1;

  • 1

    I use a program called Licecap

Show 6 more comments

2 answers

1

Change the.css template css for this one:

body {
    padding: 0px;
    margin: 0px;
    width: 100%;

    background: #f9f9f9; /* Old browsers */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNmU2ZTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#e6e6e6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* IE10+ */
    background: linear-gradient(to bottom, #f9f9f9 0%,#e6e6e6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-8 */
}
body > center > span > a{display: none;}
a {
    text-decoration: none; 
}
/* -- -- TOPO -- -- */

.faixaVerde {
    background-color: #00052b;
    width: 100%;
}

.faixaVerde .conteudo {
    width: 1000px;
    padding: 20px 0px 20px 0px;
    height: 110px;
}

.faixaVerde .logo {
    float: left;
    width: 300px;
}

.faixaVerde .nomeTopo {
    float: right;
    color: #FFF;
    font-family: 'Roboto', sans-serif;
    letter-spacing: -1px;
    height: 100%;
    font-weight: bold;
}

.faixaVerde .nomeTopo .instituicao{
    float: right;
    font-size: 26px;
    line-height: 30px;
}

.faixaVerde .nomeTopo .cidade{
    width: 100%;
    text-align: right;
    float: right;
    font-size: 45px;
    line-height: 45px;
    letter-spacing: -2px;
}

.faixaAmarela{
    background-color: #ffeb00;
    width: 100%;
    position: relative;
    min-height: 20px;
}

.faixaCinza {
    position: relative;
    z-index: 999;
    /* height: 120px; */
    width: 100%;
    background: #1a7ed4; /* Old browsers */
    /* background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNmU2ZTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); */
    background: -moz-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); /* FF3.6+ */
    /* background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#e6e6e6)); */ /* Chrome,Safari4+ */
    /* background: -webkit-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); */ /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* IE10+ */
    /* background: linear-gradient(to bottom, #f9f9f9 0%,#e6e6e6 100%); */ /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-8 */
    /* display: table; */
    margin-bottom: -200px;
}

/* -- --  -- -- */

body .conteudo {
    width: 980px;
    position: relative;
    z-index: 1001;
}

/* -- -- MENU -- -- */

.menu {
    width: 100%;
    height: 180px;
    text-align: center;
    margin: -60px 0px 50px 0px;
    text-align: center;
    position: relative;
    z-index: 1;
    display: none;
}

.menu .caixa {
    display: inline-block;
    padding: 5px;
    cursor: pointer;
}

.menu .caixa .bolha {
    width: 70px;
    height: 70px;
    padding: 15px;
    border: solid 1px #CCC;
    border-radius: 50%;

    background: #f9f9f9; /* Old browsers */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNmU2ZTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#e6e6e6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* IE10+ */
    background: linear-gradient(to bottom, #f9f9f9 0%,#e6e6e6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-8 */
    -moz-box-shadow: 0px 0px 40px #CCC;
    -webkit-box-shadow: 0px 0px 40px #CCC;
    box-shadow: 0px 0px 40px #CCC;
}

.menu .caixa:hover .bolha{
    -moz-box-shadow: 0px 0px 50px #bcbcbc;
    -webkit-box-shadow: 0px 0px 50px #bcbcbc;
    box-shadow: 0px 0px 50px #bcbcbc;
}

.menu .caixa #verde {
    background: #008291; /* Old browsers */
    background: -moz-linear-gradient(top, #008291 0%, #00555e 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#008291), color-stop(100%,#00555e)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #008291 0%,#00555e 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #008291 0%,#00555e 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #008291 0%,#00555e 100%); /* IE10+ */
    background: linear-gradient(to bottom, #008291 0%,#00555e 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008291', endColorstr='#00555e',GradientType=0 ); /* IE6-9 */
}

.menu .caixa .bolha img {
    width: 50px;
}

.menu .caixa span {
    color: #4D4D4D;
    font-family: 'Oswald', sans-serif;
    letter-spacing: -1px;
    font-size: 20px;
}

.menu .caixa:hover span{
    text-shadow:0px 0px 20px #CCC;
}


/* -- -- */

.conteudo .caixaTexto {
    width: 80%;
    color: #4D4D4D;
    text-align: justify;
    font-family: Arial, sans-serif;
    font-size: 15px;
    line-height: 18px;
}

h3 {
    color: #4D4D4D;
    font-family: 'Roboto', sans-serif;
    letter-spacing: -1px;
    font-size: 25px;
    text-align: left;
}

.filtro {
    font-family: Arial, sans-serif;
    border: solid 1px #bcbcbc;
    background-color: #fff;
    padding: 10px;
    text-align: left;
    margin-bottom: -1px;
    margin-top: 100px;
}

.filtro select {
    padding: 5px;
}

table {
    width: 100%;
    border: solid 1px #ccc;
    background-color: #fff;
    font-family: 'Roboto', sans-serif;
    line-height: 18px;
    text-align: center;
    font-weight: bolder;
    color: #505050;
}

table thead tr {
    background: #f9f9f9; /* Old browsers */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNmU2ZTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#e6e6e6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* IE10+ */
    background: linear-gradient(to bottom, #f9f9f9 0%,#e6e6e6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-8 */
}

table thead th {
    font-weight: bold;
    border: solid 1px #ccc;
    padding: 5px;
}

table tbody td {
    border: solid 1px #ccc;
    padding: 5px 30px;
}

.even {background: #BEE8ED;}
.even:hover {background: #A3DAE0;}
.odd {background: #F9F9F9;}
.odd:hover {background: #E9E9E9;}

tbody tr:nth-child(even) {background: #f1f1f1;}
tbody tr:nth-child(even):hover {background: #e0e0e0;}
tbody tr:nth-child(odd) {background: #ffffff;}
tbody tr:nth-child(odd):hover {background: #feffef;}

.paginacao {
    border: solid 1px #bcbcbc;
    background-color: #fff;
    padding: 10px;
    text-align: left;
    margin-top: -1px;
}

.paginacao span {
    font-family: Arial, sans-serif;
    font-size: 18px;
    color: #4D4D4D;
    padding: 5px;
    margin: 5px 2px 5px 0px;
    cursor: pointer;
    border: solid 1px #e6e6e6;

    background: #f9f9f9; /* Old browsers */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNmU2ZTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#e6e6e6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f9f9f9 0%,#e6e6e6 100%); /* IE10+ */
    background: linear-gradient(to bottom, #f9f9f9 0%,#e6e6e6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-8 */

}
.download{float:right;width: 290px;background:#fff;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-transition:transform 500ms ease;-moz-transition:transform 500ms ease;transition:transform 500ms ease;font: bold 16px 'Roboto';} .download > span{width: 130px;padding:20px 10px 0 10px;text-align:center;float:right;} .download span > span{display:block;line-height:130%;font-size:1.1em;color:#666;font-weight: bold;} .download .btn{margin:5px 0 0 0;color:#fff;background: #dc4642;padding: 8px;border-radius: 5px;} .download .icon-pdf{width:120px;height:120px;background:#ecf0f1;-webkit-border-radius:10px 0 0 10px;-moz-border-radius:10px 0 0 10px;border-radius:10px 0 0 10px;padding:10px;float:left} .download:hover{-webkit-transform:scale3d(1.1,1.1,1.1) rotateZ(-2deg);-moz-transform:scale3d(1.1,1.1,1.1) rotateZ(-2deg);-o-transform:scale3d(1.1,1.1,1.1) rotateZ(-2deg);-ms-transform:scale3d(1.1,1.1,1.1) rotateZ(-2deg);transform:scale3d(1.1,1.1,1.1) rotateZ(-2deg)}

If you remove only the element z-index: -1; of .faixaCinza it will override the div .conteudo. I adjusted this css to make it right.

  • Thank you so much for the help @EGDEV =D

1

The problem is that you put a z-index negative value:

.faixaCinza {
    position: relative;
    z-index: -1; /* <<-- Problema */
    height: 120px;
    width: 100%;
    background: #1a7ed4;
    /* ... */
}

With this you threw the element "underneath" the others, ie the others div's are over your link. Just remove the property z-index: -1 or put another higher value as z-index: 0 or z-index: 1 that it will function normally.

  • Thank you very much Kadu, but this way the blue bar overlaps the table, I wanted the blue band to stay as it is, only difference that the links work =)

Browser other questions tagged html css

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