htmlcsshyperlinkheaderletter-spacing

My links in <a> tag are not working (when I pass the cursor over the text nothing happens)

I'm beginning to learn HTML/CSS and I have to make a header, and I'm having some troubles in the spacing I need to get between the texts on it. After trying a lot of things, I got the spacing right, but now somewhy the texts aint getting the interaction they should.

The HTML code is:

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="_css/estilo.css"/>
</head>
<body>
    <div class="header" id="header">
        <div class="header_sn">
            <a href="sobre-nos.html">Sobre nós</a></div>
        <div class="header_serv">
            <a href="servicos.html">Serviços</a></div>
        <div class="header_logo">
            <figure>
                <a href="home.html"><img id="logo_header" src="_imagens/logoimagem.png">
                    <figcaption>Palavras Cafeinadas</figcaption></a>
            </figure>
        </div>
        <div class="header_cont">
            <a href="contato.html">Contato</a></div>
        <div class="header_tel">
            <a><img id="logotel" src="_imagens/icone-telefone.png">19-99126972</a>
        </div>
</body>
</html>

And the CSS code is:

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond&display=swap');
@font-face{
    font-family: 'FontePadrao';
    src: url("../_fontes/CormorantGaramond-SemiBold.otf");
}
    :root{
        --color-fundo: #57290B;
        --color-letra: #EBDACC;
        
    }
    *{
        margin: 0;
        padding: 0;
    }
    
/* Formatação header fundo */




/* Format header writings */
body{
        font-family: 'Cormorant Garamond', serif;
        font-size: 18px; 
        line-height: 22px;
        color: var(--color-letra);
    }
.header, .header-esquerda, .header-direita{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.header{
    background-color: var(--color-fundo);
    height: 100px;
    justify-content: space-between;
    padding: 0 0 0 0;

}
.header_sn{
    position: absolute;
    padding: 39px 0px 39px 119px;
}

.header_serv{
    position: absolute;
    padding: 39px 0px 39px 324px;
}
.header_logo{
    position: absolute;
    padding: 39px 0px 39px 698px;
}
.header_cont{
    position: absolute;
    padding: 39px 0px 39px 1400px;
}
.header_tel{
    position: absolute;
    padding: 39px 0px 39px 1650px;
}

.header a{
    text-decoration: none;
    color: var(--color-letra);

}

/* Format header imgs */
img#logo_header{
    position: absolute;
    width: 43px;
    height: 54.86px;
    top:7px;
    padding: 0 181px;
}
img#logotel{
    position: relative;
    top: 7px;
    right: 10px;
}
figure figcaption{
    position: relative;
    top:15px;
    left: 135px;
}

And this is how the header looks right now, it is almost as it should be looking but I got that problem and couldn't finish it.

Before I got to this final code, the interactions were working in my several others attempts, in this one they didn't work anymore.

Solution

  • If you want a quick and easy fix, add a z-index to those classes you have defined in your header.

    From the Mozilla Docs:

    The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.

    It's basically forcing those elements to be on top of other elements in the view. Each element you have here is one on top of the other. So you could either layer them with z-index, or use "display: flex" and position "relative" on the elements.

    Or, since you're using "position: absolute" you could use "left: 1000px" and "top: 36px" to define the position of the elements instead of using padding. Padding affects the actual size of the element, and therefore would cause elements to overlap.

    @charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond&display=swap');
@font-face{
    font-family: 'FontePadrao';
    src: url("../_fontes/CormorantGaramond-SemiBold.otf");
}
    :root{
        --color-fundo: #57290B;
        --color-letra: #EBDACC;
        
    }
    *{
        margin: 0;
        padding: 0;
    }
    
body{
        font-family: 'Cormorant Garamond', serif;
        font-size: 18px; 
        line-height: 22px;
        color: var(--color-letra);
    }
.header, .header-esquerda, .header-direita{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.header{
    background-color: var(--color-fundo);
    height: 100px;
    justify-content: space-between;
    padding: 0 0 0 0;

}
.header_sn{
    position: absolute;
    top: 39px;
    left: 119px;
}

.header_serv{
    position: absolute;
    top: 39px;
    left: 324px;
}
.header_logo{
    position: absolute;
    top: 39px;
    left: 698px;
}
.header_cont{
    position: absolute;
    top: 39px;
    left: 1400px;
}
.header_tel{
    position: absolute;
    top: 39px;
    left : 1650px;
}

.header a{
    text-decoration: none;
    color: var(--color-letra);

}
.header a{
    text-decoration: none;
    color: var(--color-letra);

}

/* Format header imgs */
img#logo_header{
    position: absolute;
    width: 43px;
    height: 54.86px;
    top:7px;
    padding: 0 181px;
}
img#logotel{
    position: relative;
    top: 7px;
    right: 10px;
}
figure figcaption{
    position: relative;
    top:15px;
    left: 135px;
}
    <!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="_css/estilo.css"/>
</head>
<body>
    <div class="header" id="header">
        <div class="header_sn">
            <a href="sobre-nos.html">Sobre nós</a>            </div>
        <div class="header_serv">
            <a href="servicos.html">Serviços</a></div>
        <div class="header_logo">
            <figure>
                <a href="home.html"><img id="logo_header" src="_imagens/logoimagem.png">
                    <figcaption>Palavras Cafeinadas</figcaption></a>
            </figure>
        </div>
        <div class="header_cont">
            <a href="contato.html">Contato</a></div>
        <div class="header_tel">
            <a><img id="logotel" src="_imagens/icone-telefone.png">19-99126972</a>
        </div>
</body>
</html>