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

Question

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

Navigation

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

0

I'm finishing a project, but I had a small problem. On the page there is a "button" where a document is downloaded. But by hovering over the mouse, or even clicking, nothing happens, it's like some element, but a link ( href= ).

See: link

By hovering over the mouse, 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

asked by anonymous 13.07.2017 / 22:13

2 answers

Time Count Mysql Why is the navigation bar overlapping the header?

score 1 · Answer 1

Change the css of template.css to this:

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; from .faixaCinza it will override div .conteudo . I set this css to make it right.

score 1 · Answer 2

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 played the element "underneath" of the others, that is, the other div's are above your link . Just remove the z-index: -1 property or put another higher value as z-index: 0 or z-index: 1 that it will function normally.