Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

NÃO CONSIGO DEIXAR OS TÓPICOS DO MEU MENU UM DO LADO DO OUTRO (INLINE-BLOCK)

por Raul Victor Santana Rios
| 46.9k xp | 26 posts
Iniciação Científica

NO MEU CABEÇALHO (HEADER) NÃO CONSIGO DEIXAR OS TÓPICOS DO MEU MENU UM DO LADO DO OUTRO (INLINE-BLOCK).

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

SEGUE O CÓDIGO HTML:

<!DOCTYPE html>

<hmtl lang="pt-br">

    <head>
        <meta charset="UTF-8">
        <title>Gestação Saudável</title>
        <link rel="stylesheet" href="resett.css">
        <link rel="stylesheet" href="style-home.css">

    </head>

    <body>
        <header>
            <div class="caixa"> 
                <h1 class="titulo-principal">Bem vindo(a) ao CuidarLab</h1>
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="produto.html">Produtos</a></li>
                        <li><a href="contato.html">Contatos</a></li>
                    </ul>
                </nav>
            </div>
        </header>

CÓDIGO CSS: 

.titulo-principal {

    padding: 20px 20px;
    font-size: 22px;
    text-transform: uppercase;
    font-weight: bold;
    color: rgb(151, 126, 126);
    text-decoration: none;
}

.caixa {
    position: relative;
    width: 940px;
    margin: 0 auto;
}
nav {
    position: absolute;
    top: 10px;
    right: 0;
}

nav li {
    display: inline;
    margin: 0 0 0 20px;
}

nav a {
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 20px;
    color: rgb(151, 126, 126);
    text-decoration: none;
}

nav a:hover {
    color: #eeb74a;
    text-decoration: underline;

}
3 respostas
por Douglas de Oliveira Lima
| 137k xp | 47 posts

Olá!

Fiz um teste com literalmente o mesmo código que você disponibilizou e o cabeçalho está distribuído horizontalmente (Teste realizado no Chrome e no Firefox):

Print da tela após aplicar o código HTML e CSS fornecidos

O que pode estar ocorrendo é que algum código presente no resett.css esteja sobrescrevendo a estilização do seu style-home.css.

Apesar disso, vou apresentar uma sugestão de CSS que possa solucionar, mas sinta-se livre para fazer ajustes mais finos conforme sua necessidade:

.caixa {
    position: relative;
    width: 940px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

nav {
    /* Estilização removida */
}

nav ul {
    display: flex;
}

nav li {
    margin-left: 16px;
}

Resultado com o código sugerido (Levando em consideração que haja um list-style: none no seu css reset): Print da tela com a aplicação do CSS sugerido

por Raul Victor Santana Rios
| 46.9k xp | 26 posts
Iniciação Científica

Olá douglas, consegui resolver o problema com suas sugestões, obrigado!!! Só fiquei em dúvida como vc "driblou" o reset.css? É ruim usar o reset.css nos meus códigos?

solução!
por Douglas de Oliveira Lima
| 137k xp | 47 posts

Boa tarde, Raul!

Não fiz nenhuma outra ação além dos códigos que disponibilizei, apenas fiz testes sem o arquivo reset estar presente e outro com um arquivo de reset que tenho na minha máquina.

Sobre o arquivo reset, apesar de todos terem o mesmo proposito de desativar a estilização padrão do navegador, nem todos são idênticos. Pode ser que, no seu caso, alguma estilização de elemento tenha sobrescrito a que você criou na style-home.css por ter algum fator de prioridade maior.

Respondendo sua pergunta sobre se é ruim ou não, eu diria que não, pois é um facilitador para focarmos no desenvolvimento da interface sem ter que fazer correções dos estilos automáticos do navegador manualmente (Mas também acho importante que você entenda como elas funcionam e consiga realizar soluções independentemente do reset).

Código do reset que venho utilizando (Ele é de domínio público):

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

a {
    color: inherit;
    text-decoration: none;
}