Calculo da margem | HTML e CSS | Alura - Cursos online de tecnologia

3
respostas

por Ike

| 134.7k xp | 30 posts

Estou fazendo o curso "front-end projeto de conclusão", tentei fazer o cabeçalho antes de ver o gabarito, consegui chegar no mesmo resultado, só que da forma que eu fiz está dando problema na hora de calcular a margem do topo

código HTML

<!DOCTYPE html>

<html lang="br-pt">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width"> 
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
        <title>Projeto Alura</title>
    </head>

    <body>
        <header>
            <nav>
                <ul>
                    <li><input class="menu" type="button" value="sobre"></li>
                    <li><input class="menu" type="button" value="palestrantes"></li>
                </ul>
            </nav> 
        </header>
    </body>
</html>

Código CSS

nav ul {
    width: 100%;
    height: 100px;
    text-align: center;
    background-image: url(img/destaque.jpeg);
    background-repeat: no-repeat;
    background-size: 100%;
}

nav li {
    display: inline-block;
}

.menu {
    font-size: 16px;
    font-weight: bold;  
    text-transform: uppercase;
    padding: 0.8em 1em;
    margin: calc(50px - 0.8em - 0.5em) 0.1em;
    background: rgba(0, 0, 0, 10%);
    color: whitesmoke;
    text-shadow: 1px 1px 5px grey;
    border: none;
    border-radius: 5px;
    transition: 0.5s;
    cursor: pointer;
}

.menu:hover {
    background: #46989D;
}

O problema é que o calculo que eu fiz "50px(metade da altura do header) - 0.8em(altura do padding) - 0.5em(metade da fonte)" não está centralizando os botões verticalmente no cabeçalho da página, eu preciso subtrair mais 0.2em. O que tem de errado no calculo?

3 respostas

por Francisco Tiago Cipriano de Castro

| 218.9k xp | 150 posts

Desenvolvedor Back End

09/01/2021

Oi Ike, bom dia, Creio que a class="menu" está na tag errada.

Não sei como é o projeto, só estou deduzindo. Mas tenta tirar do INPUT e colocar na NAV:

<!DOCTYPE html>

<html lang="br-pt">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width"> 
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
        <title>Projeto Alura</title>
    </head>

    <body>
        <header>
            <nav class="menu">
                <ul>
                    <li><input  type="button" value="sobre"></li>
                    <li><input  type="button" value="palestrantes"></li>
                </ul>
            </nav> 
        </header>
    </body>
</html>

Valeu! Me informa aqui qualquer coisa.

por Ike

| 134.7k xp | 30 posts

09/01/2021

Não há como eu colocar na tag nav, porque eu criei essa classe para ser aplicada para cada um dos botões do menu, e a tag nav possui a tag ul onde eu apliquei o background, se eu colocar uma margem na nav, ele ficará com um espaço em branco e não vai separar os botões do topo.

Tenta copiar esse código meu e só mudar o background que tem uma imagem, e coloca uma cor qualquer para visualizar. O background tem 100px de altura, e os meus botões se vc somar as margins + borders + paddings + content, vão dar 100px também de altura, igual o background, porém visualmente não está centralizado, e se vc apertar a tecla f12 para abrir o painel de desenvolvedor, você vê que a margem dos botões passa o background... eu não entendi foi nada kkkk

por Ike

| 134.7k xp | 30 posts

09/01/2021

Eu uso o linux, e eu percebi que utilizando o google chromium ele centraliza mais, passando mais ou menos apenas1px da altura do background, já no firefox isso é diferente, a margem acaba passando bastante, e a única coisa que muda entre os dois navegadores, é a fonte da página, então creio que os valores "em" não estão sendo muito preciso ao tamanho da fonte