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

Im beginning to learn HTML/CSS and i have to make a header, and im 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  id="header">
        <div >
            <a href="sobre-nos.html">Sobre nós</a></div>
        <div >
            <a href="servicos.html">Serviços</a></div>
        <div >
            <figure>
                <a href="home.html"><img id="logo_header" src="_imagens/logoimagem.png">
                    <figcaption>Palavras Cafeinadas</figcaption></a>
            </figure>
        </div>
        <div >
            <a href="contato.html">Contato</a></div>
        <div >
            <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 couldnt finish it.

Before i got to this final code, the interactions were working in my several others attempts, in this one they didnt work anymore.

CodePudding user response：

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  id="header">
        <div >
            <a href="sobre-nos.html">Sobre nós</a>            </div>
        <div >
            <a href="servicos.html">Serviços</a></div>
        <div >
            <figure>
                <a href="home.html"><img id="logo_header" src="_imagens/logoimagem.png">
                    <figcaption>Palavras Cafeinadas</figcaption></a>
            </figure>
        </div>
        <div >
            <a href="contato.html">Contato</a></div>
        <div >
            <a><img id="logotel" src="_imagens/icone-telefone.png">19-99126972</a>
        </div>
</body>
</html>

CodePudding user response：

If you inspect, is there a chance that you have moved the element but visually it's still at same place? Try to inspect and find it.

What kind of interactions should it have? Maybe you need to add with css for example cursor: pointer or anything else.